How to Add WooCommerce Support to Your Theme

I’m a big fan of WooCommerce, the awesome ecommerce plugin freely available on the WordPress.org repository. There are times, however, when you come up against some issues, and looking up for an answer just takes time.

In this post I’m giving you the answer to a common problem you could be having right now.

Have you ever wondered why the layout of your WooCommerce pages looks broken? How is it that all your theme’s pages look great but WooCommerce pages are messed up?

The most likely reason is because your theme is not WooCommerce-ready.

To add WooCommerce support is easily done using the plugin’s action hooks. Watch this short video to find out more.

In this video, you’re going to learn why the pages WooCommerce automatically creates in your theme look broken and how to fix the problem. As a last step in the process, you’re going to declare WooCommerce support for your theme.

Why Is the Layout in WooCommerce Pages Broken?

If you’re using the WooCommerce plugin on a WordPress theme without native WooCommerce support, it’s likely that the layout of the pages WooCommerce adds by default, e.g., Shop, Single Product, etc., looks broken.

The reason is that the HTML markup for the main column in the relevant template files and the CSS classes, which largely determine the layout of your theme’s pages, used by your theme and by WooCommerce don’t match up.

This is the code WooCommerce uses to markup the main column of the pages it automatically creates for your online shop:

Shop page in Aventurine theme without WooCommerce support
Shop page in Aventurine theme without WooCommerce support

The image above is of the Aventurine theme, available on WordPress.org, which hasn’t got native WooCommerce support.

If you check the relevant markup in page.php, here’s what Aventurine uses instead:

General page template used in Aventurine theme to mark the difference from WooCommerce default markup
General page template used in Aventurine theme to mark the difference from WooCommerce default markup

If the two structures differ and the CSS classes don’t match up, no wonder the layout of WooCommerce-generated pages looks a bit of a mess:

Broken layout on theme that doesn't offer WooCommerce support by default
Broken layout on theme that doesn’t offer WooCommerce support by default

The Solution to the Layout Problem in non-WooCommerce Supporting Themes

To remedy the situation, the first thing you need to do is to look into the HTML markup for the main column in your theme. The best way is to open page.php in your theme and look for the bit of markup where the main content of the page will be displayed. This tells you what you need to put in place of the WooCommerce-generated markup for the same section of the page.

Below, the Aventurine theme’s page.php markup in the relevant area (on the left) is placed side by side the WooCommerce-generated markup in the Shop page of the same theme (on the right). This highlights the differences between the two templates:

page.php and WooCommerce-generated Shop page in Aventurine theme without WooCommerce support
page.php and WooCommerce-generated Shop page in Aventurine theme without WooCommerce support

The fix is to replace the WooCommerce-generated markup with the markup used by your theme to display the main content on the page.

You do this using WooCommerce action hooks.

Here’s the sequence of steps.

#1 If you’re not coding the theme yourself, use a child theme

The reason for this is that you’re going to modify the theme’s functions.php file. If you’ve downloaded your theme from WordPress.org or a marketplace, using a child theme will preserve your mods after a theme’s update. However, if you’re coding your own theme from scratch, there’s no need for a child theme.

#2 Remove WooCommerce functions from relevant action hooks

WooCommerce generates the markup for the main content in its templates using the woocommerce_before_main_content action hook for the opening tags and the woocommerce_after_main_content action hook to close the tags. The functions WooCommerce attaches to those hooks are woocommerce_output_content_wrapper() and woocommerce_output_content_wrapper_end() respectively, both with a priority of 10 (that’s important because you’ll have to keep this priority both for removing these functions and for adding your own functions to those hooks).

To remove both functions from the above hooks, write this code to functions.php in your theme, or child theme (I’m using the Aventurine theme for my example, but you can adapt the example to your own theme):

//remove function attached to woocommerce_before_main_content hook
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

//remove function attached to woocommerce_after_main_content hook
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

#3 Replace WooCommerce-generated markup with your theme’s markup: attach your functions to WooCommerce hooks

Next, write your functions to spit out your desired markup and attach them to WooCommerce action hooks (prefix your functions with your theme’s or child theme’s name):

//adding theme's starter container
function aventurine_child_wrapper_start() {
  echo '<div id="primary" class="content-area"><main id="main" class="site-main" role="main">';
}
add_action( 'woocommerce_before_main_content', 'aventurine_child_wrapper_start', 10 );

//adding theme's ending container
function aventurine_child_wrapper_end() {
  echo '</div></main>';
}
add_action( 'woocommerce_after_main_content', 'aventurine_child_wrapper_end', 10 );

The functions above simply echo out the appropriate markup for the Aventurine theme. If your theme uses a different markup with different classes, make sure you adjust the code above appropriately.

Each function is then attached to the relevant WooCommerce action hook keeping the same priority as the functions you removed earlier.

If you save and refresh, you should see the layout of the WooCommerce-generated pages look consistent with the other pages in your theme.

Declaring WooCommerce Support

As a last task, you need to get rid of the message WooCommerce sends you in your WordPress back-end:

WooCommerce notice to add WooCommerce support to your theme
WooCommerce notice to add WooCommerce support to your theme

To fix this, add the snippet below to functions.php (replace the aventurine prefix in the function with your theme’s or child theme’s prefix):

//declare WC support
function aventurine_child_wc_support() {
  add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'aventurine_child_wc_support' );

The code above is pretty self-explanatory: the aventurine_child_wc_support() function simply uses add_theme_support('woocommerce') to declare theme support for WooCommerce. Then it attaches this function to the after_setup_theme WordPress hook, which is triggered on page load after the theme is initialized.

If you save your work and refresh, the WooCommerce notice should be gone!

For more on WooCommerce support for non-WooCommerce-enabled themes, head to this great resource by WooThemes.

To Sum Up

In this post, you learned how to fix the layout problem in WooCommerce-generated pages when using a theme that doesn’t support WooCommerce by default. You also learned how to declare WooCommerce support in your theme.

What’s your experience working with WooCommerce? Have you built your awesome online WooCommerce shop? Hit the comments box below to let me know!

Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s