How to do a e-commerce website with WooCommerce

A step-by-step explanation on how to install and setup the WooCommerce plugin for doing a e-commerce website with WordPress.

For more articles and tutorials about WordPress, check out my blog at: http://julienklepatch.com/blog

Transcript

1. How to do a e-commerce website with WooCommerce? Taipei WordPress Meetup - November 2014 Julien Klepatch - julienklepatch.com
2. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce • Setting up basic options • Setting up checkout options • Setting up shipping options
3. Summary • What is WooCommerce? – The e-commerce plugin – The extensions – The themes – WooThemes, the theme shop • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce • Setting up basic options • Setting up checkout options • Setting up shipping options
4. The eCommerce Plugin • The most popular ecommerce plugin (5M + downloads) • Free • Available at WordPress Plugin Repository
5. The extensions • Dozens of PAYING extensions • Available at WooTheme website • NOT available on WordPress plugin repository
6. The themes • Themes optimized for WooCommerce plugin
7. WooTheme, the theme shop • WooCommerce was created by a theme shop called WooThemes (http://www.woothemes.com)
9. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce – Activating TwentyTwelve Theme – Installing WooCommerce – Setting up WooCommerce pages – Updating menu with new pages – Importing dummy data – Setting up Permalinks • Overview of WooCommerce • Setting up basic options • Setting up checkout options • Setting up shipping options
10. Activating TwentyTwelve theme • Appearance=>Themes • Activate TwentyTwelve
12. Installing WooCommerce (1) • Plugin=>Add New • Search for woocommerce then install
13. Installing WooCommerce (2) • 2 new menus: – WooCommerce – Products
15. Setting up WooCommerce Pages • Click on “Install WooCommerce Pages” • Check out new pages:
17. Updating menu with new pages (1) • Appearance=>Menus, create a new menu
18. Updating Menu with new pages (2) • Select new pages in “Pages”box • click “Add to Menu” • That’s it:
20. Importing dummy data (1) • What is dummy data ? – “fake” Data already created – Used for testing theme • How to download it? 1. Install WordPress Importer Plugin 2. Import dummy data
21. Importing dummy data(2) • Install WordPress Importer Plugin (tools => Import => WordPress)
22. Importing dummy data(3)
23. Importing dummy data (4) • Import xml file into WordPress (wp-content/themes/woocommerce/dummydata/dummy_data.xml)
24. Importing dummy data (5)
25. Importing dummy data (6) • New products on “shop” page: • New Products in the admin panel:
27. Setting up Permalinks (1) • Settings=>Permalinks=>Common Settings
28. Setting up Permalinks (2) • Product Permalink Base (WooCommerce Permalink)
30. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce – Front-end – Admin • Setting up basic options • Setting up checkout options • Setting up shipping options
31. Front-end (1) • On “shop” page, list of products with pictures • Click on the picture of a product
32. Front-end (2) • Product page with more information • Product name and review • Short Product description • Add to cart button • Long Product Description
33. Front-end (3) • Cart information with product name, quantity and price • Checkout button • Cross selling section below cart
34. Front-end (4) • Checkout page with: – Coupon – billing /shipping info – Order summary – payment method
36. Admin (1)
37. Admin (2) • Settings (WooCommerce=>Settings)
38. Admin (3) • Products (Products=> Products)
40. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce • Setting up basic options – General Options – Products Options – Tax Options – Accounts Options – Email Options • Setting up checkout options • Setting up shipping options
41. General Options (1) • General Options
42. General Options (2) • Currency Options
43. General Options (3) • Style and Scripts TIPS - Check “Enable Livebox - Check “Enable enhanced country select boxes
45. Products Options (1) • Products Listings TIPS Choose carefully: -default category -default product sorting
46. Products Options (2) • Product Data TIPS Check “enable ratings on reviews”
47. Products Options (3) • Product Image Sizes TIPS 1) upload square images 2) choose hard crop 3) Regenerate thumbnails with plugin
48. Products Options (4) • Inventory Options No need for non- physical products TIPS 1) Enable low stock and out of stock notifications 2) Stock display format: “Only show stock when low”
49. Products Options (5) • Downloadable Products (ex: ebooks, software) TIPS 1) check “Downloads require login” 2) check “Grant access to downloadable…”
51. Tax Options (1) • General TIPS Default Customer Address: shop base address
52. Tax Options (2) • General (continued)
53. Tax Options (3) • Adding New Tax • Tax=>Standard Rates • Click “Insert Row” TIPS Use csv file is lots of tax rates
55. Accounts Options (1) • Account Pages / endpoints TIP Leave unchanged
56. Accounts Options (2) • Registration Options TIP 1) Enable Registration on Checkout 2) Enable Registration on MyAccount
58. Email Options (1) • Email Sender Options
59. Email Options (2) • Email Template TIP Copy woocommerce email template to your theme for more customization options
61. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce • Setting up basic options • Setting up checkout options – Overview – Checkout Process – Checkout Pages and endpoints – Payment Gateways – Paypal • Setting up shipping options
62. Overview • 4 options: – BACS (Bank Transfer) – Cheque – Cash on delivery – Paypal TIP: enable it for testing TIPS: 1) standard option. 2) Stripe is an alternative (not available in every country)
64. Check out Process
66. Checkout Pages and Endpoints
68. Payment Gateways • You can choose: – Default Payment Method – Display order • You can check payment method status
70. Paypal (1) 1. Go to the paypal.com 2. Register for a merchant account, type “Paypal Payment Standard” 3. Once you are logged in, apply for a “Paypal Sandbox Account” 4. Now you have a: • a test merchant account • a test customer account
71. Paypal (2) • Go to Checkout=>Paypal=>Paypal TIP: Enable sandbox when developing
72. Paypal (3) • Shipping / Advanced Options TIP: If you check “Send shipping…”, also check “Enable address_override” TIP: Use this field to identify payment from your website
74. Summary • What is WooCommerce? • Installing TwentyTwelve & WooCommerce • Overview of WooCommerce • Setting up basic options • Setting up checkout • Setting up shipping options – Overview – Shipping Classes – Mapping a shipping class to a flat rate
75. Overview • WooCommerce=>Settings=>Shipping • Scroll down to “Shipping Method” • Several shipping methods possible • Each has to be enabled and configured
77. Shipping Classes • Shipping classes are used to manage shipping costs • Go to: Products=>Shipping classes • Create a new shipping class
79. Mapping a shipping class to a flat rate • Go back to WooCommerce=>Settings=>Shipping • Click on “Flat Rate” • For “Costs added”, choose “Per Class” • Click on “add Cost” to setup the class
81. Questions?