Have you ever built a WordPress theme for your site or project? If you have then, have you ever tried to make your theme WooCommerce plugin compatible? If you have not, or tried it and the design of your theme always went wrong, then, here we will describe about how to do it for your project.
What is WooCommerce?
So, what really is WooCommerce? Well, the answer to this is, it is simply the WordPress plugin which extends its functionality to sell the products from within your site. So, if you want to sell products or any other such via your site, then, this plugin, WooCommerce is the best solution for you.
How to make the theme WooCommerce plugin compatible?
Now, after knowing what WooCommerce really is, now you may want to make your built WordPress themes to be WooCommerce plugin compatible, isn’t it? Well, what we are here for? We are here to describe about how to make your theme WooCommerce plugin compatible.
First of all, when you create the product via WooCommerce plugin and visit the created Shop page, then, if the theme is not made compatible with this plugin, then, you will likely see that the design is quite off, right? It is so because, this plugin will wrap that page with the div created by this plugin, not the theme. So, it is likely that you have not made the theme use same div structure as this plugin, and could see the shop page extend to full with and the sidebar just below it.
Now, after knowing this, just lets move ahead and make our theme WooCommerce plugin compatible. First of all, what you have to do is, you have to remove the WooCommerce plugin’s default wrapper for those pages. For this, you can add this below PHP code in the functions.php file of your theme:
remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);Adding this above code removes WooCommerce plugin’s default wrapper for WooCommerce pages. Now, after that, since theme has its own wrapper for all the pages, so, we can utilize this feature. Hence, you need to add this below PHP code too, in the same mentioned file above:
add_action('woocommerce_before_main_content', 'theme_prefix_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'theme_prefix_wrapper_end', 10);
function theme_prefix_wrapper_start() {
echo '<div id="primary" class="content-area"><main id="main" class="site-main" role="main">';
}
function theme_prefix_wrapper_end() {
echo '</main></div><!-- #primary -->';
}Here, in the above code, this function theme_prefix_wrapper_start() requires you to add the required start of the div of the content. And the other one, theme_prefix_wrapper_end() requires you to add the end of that started content or the div. This way, now WooCommerce plugin will use this wrapper to wrap the shop pages as well as product pages making the theme design stand out as like for all of the other pages too.
Remove WordPress dashboard notice given by WooCommerce plugin
Now, since your theme is WooCommerce plugin compatible after the above mentioned work is done, you will still notice that it will display the message like below in your WordPress dashboard:
To solve this issue too, just add this PHP code in the same file mentioned above, ie, in functions.php file and this notice will be dismissed, since this code is declaring the theme is WooCommerce plugin compatible:
function theme_prefix_setup() {
add_theme_support('woocommerce');
}
add_action('after_setup_theme', 'theme_prefix_setup');Now, after this is done properly in your theme, then, visit to your shop page and then all will be displayed perfectly in your site like the image shown below:
Conclusion
If you have done this properly and is successful on doing the same for your theme too, then, we can now say that you can make your WordPress theme WooCommerce plugin compatible more easily than before. But, if you are still confused on this and want some more information on this, then, please drop the comment on the comment box below and we will follow it up.
