Theme developers looking to build a WooCommerce compatible theme? This article is for you. Now, WooThemes claims that WooCommerce templates will integrate seamlessly with almost any theme. Which they do. Most of the times. There could be some issues. Nevertheless, even if the templates integrate with your theme well, you’ll want to at least disable the “Your theme does not declare WooCommerce support” message.
WooCommerce uses its own templates for Shop page, single Product page, and Taxonomy pages. These are the pages that would be affected if there were any integration issues with the theme. To avoid any structure from breaking, it is best to provide support in your theme for WooCommerce. You have two options for this:
-
Using woocoomerce_content()
-
Using WooCommerce Hooks
[space]
Using woocommerce_content()
WooCommerce single product page and taxonomy pages, are displayed using the WooCommerce Loop. To make sure your theme calls the same, you need to do the following:
-
Create a copy of page.php and rename it to woocommerce.php
-
In woocommerce.php, replace the Loop with woocommerce_content();
-
i.e., instead of if(have_posts)… endif; should be replaced by woocommerce_content()
-
-
This will ensure that the WooCommerce templates are picked up for the product and taxonomy pages.
Using WooCommerce Hooks
Content displayed on the WooCommerce pages is wrapped between WooCommerce specified tags. For your theme, you can specify your own wrapper. You will need to unhook the WooCommerce wrappers first and then add your own. Make the following changes in functions.php of your theme.
[pre]remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);
add_action(‘woocommerce_before_main_content’, ‘my_content_wrapper_start’, 10);
function my_content_wrapper_start() {
echo ‘<section id=”primary”>’;
}
remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);
add_action(‘woocommerce_after_main_content’, ‘my_content_wrapper_end’, 10);
function my_content_wrapper_end() {
echo ‘</section>’;
}[/pre]
Proper WooCommerce integration ensures the theme aligns with WooCommerce website design
best practices and delivers a seamless shopping experience.
Finally..
Now that you have made the changes, the final thing you have to do, is specify that your theme now supports WooCommerce. You need to add the following in functions.php of your theme.
[pre]add_theme_support( ‘woocommerce’ );[/pre]
And you’re done! Your theme is now WooCommerce ready (hopefully). Well, you will have to test the templates to see that nothing is breaking, and you will be set.
