Customizing Theme for WooCommerce
I recently had the opportunity to help create a website for a non-profit organization who wanted to sell t-shirts, event tickets and services on their site. We had selected WordPress as the CMS for the site. And after some research it became clear that WooCommerce was a mature, well rated eCommerce plugin for that platform.
We had already begun to build out the site and had selected a site Theme that was not necessarily compatible with WooCommerce. This meant we were going to need to do some customization.
There were a few problems.
- the WooCommerce pages were not styled consistently with the rest of the site – nothing major, but font sizes, margins and padding just did not look good
- we were getting the warning that WooCommerce support was not present in the admin console
- the WooCommerce product page was not a responsive design (note we started with version 2.1 of the plugin) – the flow was horrible on phones and tablets with buttons overlapping each other, etc.
- We wanted to style some of the other pages in some specific ways, but wanted things to be consistent across the site.
Enter WordPress child themes.
A WordPress child theme allows you to make minor adjustments to a theme without the typical update headaches you would get by modifying the theme directly.
This is accomplished by taking advantage of several hooks (see the link above for details) that are in place in the WordPress framework for this purpose. You can think of the child theme as overlaying or overriding specific items in the parent theme.
These can be things like styling, functionality or even adding new functionality to the theme.
Let me spend some time addressing each of the issues we needed to overcome.
To get started I used the Duplicator plugin to backup the site and install it into a local Ubuntu VM. I won’t go into the details of how to do that here. There are plenty of good resources available about setting up a local WordPress site. I used the LEMP (Linux, Nginx, Mysql, PHP) stack. If you have not looked at Nginx yet – it is time.
I used Sublime Text as my editor of choice to do the development work.
There is a little mental challenge here. Which style changes are theme changes and which are site specific changes? The answer to that question should guide where you apply styling.
A theme has a set of style sheets that is associated with the features of the theme. WordPress also has a mechanism to provide custom styling for the site (Appearance -> Edit CSS).
In our case we needed to apply styling to the WooCommerce pages and also to the site. The distinction was pretty clear. Although, WooCommerce is a plugin and not strictly part of the theme, we chose to include the custom WooCommerce styling in our child theme for simplicity’s sake. The other styling we applied at the site level.
Note that there is discussion out there about child or extension plugins, but as far as I know that feature is not available yet.
So we followed the directions given in the link above and created our child theme. This consisted of the following steps.
- Create style.css with the child theme header – see the link above for details
- Added the WooCommerce custom styling to the style.css file
- Added a css/woocommerce-layout.css file from http://alexis.nomine.fr/en/blog/2014/02/21/bit-responsiveness-woocommerce-2-1-default-stylesheet/ (thanks to Nomine for their work!) – to add responsiveness to the WooCommerce design. Note that this worked well on earlier versions of WooCommerce but when we upgraded past version 2.3 or so it quit helping. We deregistered the additional stylesheet at that point.
- Added a functions.php to chain in our custom styles.css per the instructions
Add WooCommerce Support
In order to add WooCommerce support and eliminate the warning we followed the instructions given at http://docs.woothemes.com/document/third-party-custom-theme-compatibility/. I opted for the “Use woocommerce_content()” approach as opposed to the hooks approach.
To accomplish this I made a copy of the theme’s page.php file and modified it per the instructions. This file was made a part of the child theme and named woocommerce.php.
We added the following line to functions.php to register the support.
add_theme_support( 'woocommerce' );
We also wanted to customize the number of products visibile on the WooCommerce product page. We did that by adding this line above the theme support line in functions.php.
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
From there we put our custom CSS in place using the WordPress editor (Appearance -> Edit CSS).
We also added a footer.php file to our child theme to override the default footer behavior from the theme.
Once those steps were done we could safely update the theme without losing the customizations. Now we realize that this approach does not insulate us from breaking changes in the theme. But it does protect the customer from breaking the site when a theme update does not contain breaking changes.