Wordpress Theme

How to Create Woocommerce compatible theme

6 views May 18, 2017 March 5, 2020 admin 0


-- Download How to Create Woocommerce compatible theme as PDF --


How to Create Woocommerce compatible theme

What is woocommerce?

WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Why to make woocommerce compatible with theme?

Because to make our theme compatible with woocommerce to support the shop page in our theme with all its feature.

What are the prerequisites? Need wordpress admin credentials of theme .

How to Create Woocommerce compatible theme?

1.

2017-05-18_1305

Because of this we need to make theme compatible.

WooCommerce uses it’s 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

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.

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>’;

}

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.

add_theme_support( ‘woocommerce’ );

 

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.

What can go wrong

1.Copy the page properly and change and rename it to woocommerce.

2.don’t forget to add theme support in functions.php

Created By Rahul