how to integrate woocommerce into wordpress theme

Woocomerce is most popular wordpress ecommerce plugin available. Using woocommerce you can convert your wordpress website into a online store to sale your products. If you are planning to create a woocommerce website then first question comes in your mind is how to integrate woocommerce into wordpress theme. And your current wordpress theme is compatible with woocommerce or not?

For most of the wordpress themes woocommerce templates will integrate easily. If you have problems when your current theme’s content wrappers don’t match with woocommerce’s defult content wrappers.

Using two ways you can integrate woocommerce into wordpress theme.

[title line=”false” size=”h4″ icon=”icon-code” text=’ 1. Using woocommerce_content() function inside your wordpress theme’ ]
[title line=”false” size=”h4″ icon=”icon-edit” text=’ 2. Using Hooks integrate woocommerce into wordpress theme’ ]

[title line=”true” size=”h3″ icon=”icon-code” text=’ Using woocommerce_content() function inside your theme’ ]
To use this solution you have to create a new page template which will be used for all woocomerce templates like woocommerce product catalog, product archive and single product pages. If you are a developer then use hooks instead of this step.

To set up woocommerce template page perform following steps:

[bullets type=”number”]
[bullet] Duplicate page.php[/bullet]
[bullet] Edit your woocommerce.php Template file[/bullet]
[bullet] Replace the default wordpress loop[/bullet]
[/bullets]

[title line=”false” size=”h4″ icon=”icon-copy” text=” 1) Duplicate page.php”]
First create copy of your current themes page.php file and rename that to woocommerce.php, You will find page.php file inside your current theme folder. To do this you have to use your hostings control pannel and use file manager or FTP.

[title line=”false” size=”h4″ icon=”icon-edit” text=” 2) Edit your woocommerce.php Template file”]
After creating copy of the page.php file open woocommerce.php file which you created inside any text editor. You can use any text editor like notepad on windows and sublimetext on mac.

[title line=”false” size=”h4″ icon=”icon-code” text=” 3) Replace the default wordpress loop”]
In this step you have to replace default wordpress post loop with woocommerce function. For this search following lines of code inside woocommerce.php

<?php if ( have_posts() ) :

wordpress loops usually starts with above line and ends with following line

<?php endif; ?>

When you found this start and end of the loop then just delete all code inside that with the start and end. and replace that code with following line

<?php woocommerce_content(); ?>

This will replace wordpress’s default post loop with woocommerce loop. That’s it, You integrated woocommerce inside your wordpress theme. Check your website.

Using Hooks integrate woocommerce into wordpress theme

You have to first unhook woocommerce default content wrappers by adding these two lines.

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Then you have to add your own content wrappers inside which you want to display woocommerce products or collections by adding following lines of code.

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="your-theme-content-wrapper">';
}

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

Replace your-theme-content-wrapper with div id inside which you want to display woocommerce. That’s it you integrated woocommerce into your wordpress free or premium wordpress theme.

Remove ‘Your theme does not declare WooCommerce support’ message

We added woocommerce to your wordpress theme but if your wordpress dashboard still displaying ‘Your theme does not declare WooCommerce support’ message then to remove this you have to add following line inside your current theme’s functions.php file

add_theme_support( 'woocommerce' );

If you found this difficult then hire us for ecommerce website development