How to Add WooCommerce Compatibility to Your WordPress Theme

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:

  1. Getting Started
  2. Using Hooks and Actions
  3. 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:

  1. Using hooks (for intermediate theme developers)
  2. 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.

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

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

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:

and usually ends with:

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

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.

  • WordPress Conditional Tags
  • WooCommerce Conditional Tags

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

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:

You might also like More from author

Leave A Reply

Your email address will not be published.