On August 20th I’ll be presenting at the Meetup.com WordPress Developers New Haven group, hosted by Sandra Christie of M Squared Web Design, on WooCommerce. I am very fortunate to have access to so many WordPress groups in Connecticut and New York. I’ve used WooCommerce to develop several simple e-commerce sites, and prefer it to Jigoshop, Cart66, and WP E-Commerce. Below is an overview of what I’ll be discussing in my presentation as well as some additional links and resources.
What is WooCommerce?
Simply put, WooCommerce is a free, open-source e-commerce plugin for WordPress that allows you to easily sell products through your WordPress site. It is created by the WooThemes.com developers, has a large community of support, and an increasingly large following. I got turned onto WooCommerce about 6 months ago by my friend Alex Bachuk of the Stamford WordPress Meetup Group. Alex is a WordPress pro, so whenever he recommends something I follow his lead. I checked around a bit online for other e-commerce solutions and played with JigoShop, Cart66, and WP E-Commerce, but WooCommerce seemed to have the best support, documentation, cleanest code, and best selection of add-ons.
Setup/Installation
For my presentation I’m using the Canvas E-Commerce child theme from WooThemes. I like Canvas because it provides a nice ‘blank slate’ for simple sites and is highly customizable. The only drawback I have run into is that it is highly bloated (check out the 9+ megabyte theme files), but that is bound to happen when you design a theme with so many built-in options. There are 3 places you can grab the plugin from – GitHub, WooThemes.com, or the official WordPress plugin directory. For my presentation I’ll simply be downloading the plugin from the official repository using the one-click installation from the backend of my site. I want to mention GitHub though because you can grab the absolute most recent version of WooCommerce there – at the time of this writing it had been updated 2 days ago.
Moving CSS and Template Files into the Theme Directory
One of the first things I like to do to have control over the display of the store is move the CSS and Template files from the plugin directory into my theme directory. By default, WooCommerce will use their woocommerce.css file in the plugin directory to style the appearance of the store. Don’t get into the habit of editing the woocommerce.css file directly (in the plugin folder), because when upgrading the plugin you will lose your changes. The same applies to the template files, which are included in woocommerce/templates. That being said, here are the steps to move these files:
- On the WooCommerce > Settings page, uncheck the box near the bottom ‘Enable WooCommerce CSS Styles’
- In the WooCommerce plugin folder, copy woocommerce.css from woocommerce/assets/css/woocommerce.css and entire woocommerce/templates folder
- Paste the woocommerce.css file
- At the top of your theme stylesheet, include the Woocommerce.css file using @import. So if the woocommerce.css file is in the same folder as your stylesheet, simply put ‘@import url(‘woocommerce.css’);’
- Create a folder called ‘woocommerce’ in your theme folder and place the templates folder that you copied earlier into here, this will overrride the default template files in the plugin directory, so you can modify the display of template files without losing your changes when you upgrade the theme
Settings Page
WooThemes has great documentation, so I’m not going to spend too much time here paraphrasing their setup guide. Upon installation, WooCommerce will ask your permission to ‘install the WooCommerce pages’ (click yes) – this will generate pages for the cart, checkout, store, etc. I then go through and update settings accordingly – specifying location, tax rate, allowing for inventory management, shipping options, payment gateways, the email template, and analytics integration.
Adding Products, Product Types, Attributes/Variations
Click here to view the user guide on adding and managing products. It’s important to get comfortable with setting up product attributes and using those to generate variations – this is something I see frequently in online shops.
One tip I want to throw out there is to standardize your product images ahead of time. The layout of the site doesn’t look as clean (in my experience) with different product images sizes. I pick a large image size dimension and base the “Image Options” on the Settings > Catalog page off of these numbers. For example if I use 500×500 as my image dimensions, the catalog images I’ll set at 75% – 375×375 and the product thumbnails at 50% – 250×250. This will save you some headache and help preserve image quality. Definitely don’t upload small images and scale them up – always upload larger images and scale them down.
Shipping Classes
Properly setting up shipping classes is important, so I recommend viewing the documentation here. In my presentation I show how products can be grouped in similar categories – shirts are charged one rate to ship while equipment is charged another rate. I prefer to use the Table Rate Shipping Extension to have full control over the product rates – configuring shipping class and the cost to ship per zone. For example, I had a client who wanted 1-3 shirts to ship in the USA for $5, 4-6 shirts to ship for $10, etc. This was easy to do with the Table Rate Shipping Extension by setting up a ‘shirts’ shipping class, creating a USA shipping zone in the table rate settings page, then specifying different tiers of pricing based on the number of items ordered.
I have also used the UPS Shipping calculator which worked well but requires a UPS business account to access their API.
Setting Up Coupons, Viewing Sales Reports
Useful Extensions
For a list of all available extensions, check out the official WooThemes extension directory and CodeCanyon.net. Here are the ones I’ve used and recommend:
- Table Rate Shipping - I use this in almost all my WooCommerce installations. From the plugin developers: ”Define separate shipping rates location, zone, price, weight, or item count. Wildcards may be used to match multiple regions too.”
- UPS Shipping Calculator
- Product Add Ons - This extension allows you to add customized fields (radio boxes, dropdowns, text fields) to products to allow for personalized messages, image uploads, and attaching extra product data.
- Custom Panels – I found this while posting on a message board trying to figure out the best way to build a shop. It allows you to add an additional panel on the individual product page that can include any information you want. You can customize the title of the tab, and the information contained within it is editable with the TinyMCE editor.
- PayPal Pro – This plugin requires an SSL certificate and a PayPal merchant account. It allows users to checkout from your site without being redirected to PayPal.
Plugins I definitely do not recommend:
- QuickBooks (Intuit) Payment Gateway for WooCommerce - I spent 2 weeks going back and forth with the hosting company, Intuit, and the plugin developer trying to get this plugin to work. The hosting company pointed the blame at Intuit, Intuit pointed the blame at the plugin developer, and the plugin developer pointed the blame at Intuit after taking several weeks to respond. Save yourself the time and hassle and don’t ever use this plugin.
Common Issues and Quick Fixes
- The Image Blurring Problem – This drove me crazy when I first started using WooCommerce. Even after standardizing my image sizes WooCommerce was resizing them, causing them to look awful. I found this solution online and have been using it ever since.
- Change the Number of Products Per Row
- Remove the sidebar on single products pages – Drop this snippet of code into your functions.php file: remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10);
- Remove Related Products Info
- Remove pagination on products page – show all products: add the following line of code to your functions.php file: add_filter(‘loop_shop_per_page’, create_function(‘$cols’, ‘return 40;’));
Tweaking Template Files and Developing for WooCommerce
The template files that we moved into our theme directory in the first step are what controls the display of products and product pages. Single-Product.php, for example, controls the display on single product pages. It’s worth noting that these template files are coded in such a way that encourages the use of action and filter hooks to modify them without hacking them apart. Here are some helpful resources to gain a better understanding of the hooks and filters, as well as an overview on theming these files:
- Introduction to Hooks: actions and Filters
- How to Use Actions and Filters
- Action and Filter Reference for WooCommerce
- Extending WooCommerce (Lists the Settings API, Payment API, Shipping Method API)
- API Docs
- Code Snippets – examples of hooks and filters in action within WooCommerce
- Amber Weinberg – Developing Custom WooCommerce Themes
- How to Edit and Disable Checkout Fields
Thanks Clinton! That blurring issue had me stumped for a while too. Have an awesome day and keep up the great work!:)
Great article. Thanks for sharing your knowledge. Blessing for you.
THX a lot
))
Pingback: Karl Sheskey
I’m considering the dreaded Intuit plugin you have listed. Others have compmlained as well regarding the difficulty of setting it up.
Others complain about the credit card processing time. The plugin author says it’s considered ‘normal’. Are you seeing card processing time in the 60-90 second range?
Thanks,
Bryan
Avoid the Intuit plugin if possible. I couldn’t get it to work at all. I spent a week going back and forth with Intuit support, hosting company, and the plugin author. At best, it’s the most complicated process for getting a plugin setup I’ve ever been involved with.
I pleaded with the client to use a different payment gateway and they agreed.
Tweaking Template Files and Developing for WooCommerce
The template files that we moved into our theme directory in the first step are what controls the display of products and product pages. Single-Product.php, for example, controls the display on single product pages. It’s worth noting that these template files are coded in such a way that encourages the use of action and filter hooks to modify them without hacking them apart. Here are some helpful resources to gain a better understanding of the hooks and filters, as well as an overview on theming these files:
You may use these HTML tags and attributes: