Integrating WooCommerce on a Custom Theme

Let’s start with the WooCommerce documentation. The first part of the documentation suggests copying the code from page.php to a new file called woocommerce.php then replacing the WordPress loop with the the WooCommerce loop instead. This works in some cases but it turns out not to be the most flexible way, and in fact on one theme I was using the first template solution did not work at all. The best way I found to really get WooCommerce working properly is by using using Hooks. Here is how to do it.

1. Open up your theme’s function.php file and add the following hooks at the end of the file:

//remove woocommerce tags

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); //This line adds a new action which adds your own tag before woocommerce add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10); //This line adds a new action which adds a your own tag after woocommerce add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10); //This line adds a new css section tag before woocommerce function my_theme_wrapper_start() { echo '<div id="your-own-css">
'; } //This line ends the new custom section function my_theme_wrapper_end() { echo '</div>
'; } }

2. After you add the hooks you will need to customize your theme. There are a few tempaltes in the woocomerce plugin to customize. The two that we will be working with here are:


The archive product.php template displays the main front of your store with all the products. The single-product.php is the template which displays the product on its own. Move these files to a new folder in you root theme directory called woocommerce. Now the changes you make to these files will override the pluign files and you can upgrade the plugin without fear of losing your changes.

Every theme will require some different modifications but that is the gist of it. If you have any questions or comments feel free to leave them below.