Customising WooCommerce templates

If you are building your own WordPress theme and using WooCommerce, you'll want to customise the look and feel of the product pages. This is achieved quite easily by doing using the hooks method.

Firstly make the theme and the template overrides compatible:

//making theme and template overrides compatible
remove_action( 'WooCommerce_before_main_content', 'WooCommerce_output_content_wrapper', 10);
remove_action( 'WooCommerce_after_main_content', 'WooCommerce_output_content_wrapper_end', 10);

//hook in wrappers
add_action('WooCommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('WooCommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<div id="main">'; //this must match your theme html structure
}

function my_theme_wrapper_end() {
  echo '</div>';
}

Then copy the WooCommerce template file from /plugins/WooCommerce/template/templatename.php to /themes/yourtheme/WooCommerce/templatename.php. Note the path used here does not exactly match the one in the Woo plugin folder. This catches quite a lot of people out.

To check if your templates are being successfly overridden, you can go to WooCommerce > System Status and at the bottom is a list of the templates Woo knows are being overridden.

Note that this method will not work in you have a woocommerce.php file present in your theme.

Gotchas

When overriding archive-template.php, it's important to check if the WooCommerce Views plugin is being used. If so, the template override for archive-template.php will not work. Go into the WooCommerce Views settings and select Custom Product Template option for the Product Archive Template File setting.