How to Add WooCommerce Compatibility to Your WordPress Theme

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

In this beginner’s tutorial I will show you the right way to add WooCommerce compatibility to your WordPress theme. You’ll also learn how to extend it in an unobtrusive way, without editing the plugin’s core files. We’ll cover these logical steps:

Getting Started
Using Hooks and Actions
WooCommerce Extensions

1. Declare WooCommerce Support

Let’s imagine we’re developing a WordPress theme. We’d like to leverage some of WooCommerce’s superb functionality, and we’d like to customize some of that functionality too. There are two ways we could extend WooCommerce without editing the plugin core files:

Using hooks (for intermediate theme developers)
Using the catch-all woocommerce_content() function inside our theme

I find that a combination of these options works best to produce reliable results. So first let’s declare WooCommerce support in our theme’s “functions.php” file and disable WooCommerce’s default styling; we will style WooCommerce with our own theme design.

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

   add_theme_support( 'woocommerce' );

}

This will hide the “Your theme does not declare WooCommerce support” message.

To disable WooCommerce’s default styling, we add the following:

if (class_exists('Woocommerce')){

    add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

}

With the class_exists() function, we check if the WooCommerce plugin is installed and active. Once it is active, we disable its default styling. Later in the tutorial, we’ll add some actions and hooks configurations within this if statement.

2. Create a New Page Template

For now, duplicate the theme’s “page.php” file, and name it “woocommerce.php”. This file should be located as follows: wp-content/themes/YOURTHEME/woocommerce.php.

Open up your newly created file in a text editor or the code editor of your choice. Next you need to find the loop, which usually starts with:

1	<?php if ( have_posts() ) :

and usually ends with:

1	<?php endif; ?>

This varies between themes. Once you have found the loop, delete it. In its place, put:

1	<?php woocommerce_content(); ?>

Our woocommerce.php template now uses WooCommerce’s loop instead. woocommerce_content() loads the products list on the shop main page, product category pages, products search page and single product content when viewing the single product page.

A Beginner's Guide to the WordPress Loop

Braden Keith

30 Jul 2011

3. Adding Things to woocommerce.php

As woocommerce.php is now part of your theme, you can customize it along with your other files. For example, I always add the page title section and breadcrumbs, as my regular pages usually contain those things. Neither of these things affects the woocommerce_content(). At this stage, you can also add other things using conditional tags from WooCommerce and WordPress.

For example, let’s add the single product pagination function, like this:

<?php if (is_product()): ?>



// your navigation function goes here.



<?php endif ?>

4. Using WooCommerce Hooks and Actions

The complete list of WooCommerce actions, hooks, and filters can be found in the WooCommerce documentation.

If you are new to WordPress actions, hooks, and filters, I highly recommend checking out these resources:

For a better understanding of hook locations, I recommend reading Business Bloomer’s Visual Hook Series.

For a slightly more complex, but even deeper understanding of how WooCommerce logic works, I recommend you examine the plugin core files (woocommerce > templates).

For example, let’s see what we can do in the shop page. To modify the layout of the shop page with hooks, you have two options:

Extend the existing action without removing it.
Remove/unhook the existing action and replace it with your custom one.

Which method is better depends on your task. For example, imagine you want to remove the product ordering option from your shop page:

1	remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

This is all that you need to add to your functions.php file inside the if class exists statement. WooCommerce now understands that you don’t need that functionality.

And imagine we want to add a search widget instead of the product ordering. After the remove action, add this code:

add_action( 'woocommerce_before_shop_loop', 'custom_woocommerce_product_search', 30 );



function custom_woocommerce_product_search() {the_widget(’WC_Widget_Product_Search’,’’,’’);}

Further still, imagine you want to remove the rating from products on the shop page. Paste the following code into your functions.php file:

1	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

Altering Execution Priority

You’ll have noticed that each action has a number as the last parameter. This is the priority that's used to specify the order in which the functions associated with a particular action are executed. Lower numbers result in earlier execution, and functions with the same priority are executed in the order in which they were added to the action.

This is very important in situations where several functions are applied to the same action hook. For example, I might want to wrap product details (title, rating, price, add to cart button) with a div.

First, we add the opening wrapper div tag:

add_action( 'woocommerce_shop_loop_item_title', 'custom_woocommerce_loop_product_content_wrapper_start', 2 );



function custom_woocommerce_loop_product_content_wrapper_start'(){?><div class=”product-content-wrapper”><?php }

Then, we add a closing tag:

add_action( 'woocommerce_after_shop_loop_item','custom_woocommerce_loop_product_content_wrapper_end', 50 );



function custom_woocommerce_loop_product_content_wrapper_end'(){?></div><!-- end of the product-content-wrapper --><?php }

Playing with the action hook priority can make our work much easier.

The same principle is applied to a single product page. And here you should be very careful, as changes you make with action hooks for products in the loop/archive/shop page are ignored for the single product page. Here you should modify the single product layout separately, but the main principle is the same.

Knowing how to work with WooCommerce actions extends your theme to the next level. Here are some examples of what I do in my themes when it comes to WooCommerce compatibility:

Custom image loading for products
Custom image placeholder for products
Custom image gallery for products
Custom label system display for products (Like Hot!, Most Popular! Recommended!)
AJAX Quick look
Custom add to cart text and button
Custom sale label
Custom image slider and lightbox effect for single product page
AJAX Wishlist
Single product custom tabs
Single product reviews
Gravatar custom size
Custom related/cross-sells/up-sells products
Custom AJAX navigation for products

5. WooCommerce Extensions

If you want to add to your theme with WooCommerce extensions, the principle is almost the same. Always support high-quality official extensions, as they will have integration guidelines and a support team. For example, I extend my themes’ shop with these two plugins:

As they are WooCommerce extensions, first you will need to make sure WooCommerce is installed and active, so any hooks, actions, or filters within the extension that you will use should be placed in the if (class_exists()) statement that we wrote at the beginning. And of course, you should make sure that your extensions are also installed and active by checking the plugin class, function, or constant name. As an example from my theme code:

if (class_exists('Woocommerce')){if (class_exists('YITH_WCQV')) {remove_action( 'yith_wcqv_product_image', 'woocommerce_show_product_sale_flash', 10 );



remove_action( 'yith_wcqv_product_image', 'woocommerce_show_product_images', 20 );



add_action('yith_wcqv_product_image','infinitum_ninzio_woocommerce_show_product_images', 20 );



function infinitum_ninzio_woocommerce_show_product_images(){?>...<?php }}}




To find out what class, function, or constant to check, examine the main file.php of the extension.

Conclusion

WooCommerce is an awesome eCommerce plugin and, to be completely frank, any new premium theme should support it. Always follow WooCommerce’s integration guides. Doing so will guarantee that your theme passes the review process and won’t break the structure and logic of WooCommerce.

After any development work of this kind, you should always test both WordPress and WooCommerce. Enable WordPress’s WP_DEBUG, and test your theme using WordPress’s Theme Unitest and WooCommerce’s dummy content test.