Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now

1.2 How to Make Your Theme WooCommerce Compatible

In this lesson, I’ll show you how to add WooCommerce compatibility to a theme. We’ll start by inspecting the HTML created by the theme. Then we’ll use WooCommerce hooks and actions to ensure that the right HTML is emitted for store pages.

Code Snippet

With just a few lines of code in functions.php, you can add WooCommerce compatibility to any theme. Start off by declaring WooCommerce support:

function tutsplus_woocommerce_theme_support() {
  add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'tutsplus_woocommerce_theme_support' );

Then remove WooCommerce’s default content wrapper actions, and define your own. The exact HTML you emit depends on the implementation of the theme to which you are adding WooCommerce support.

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

function tutsplus_before_main_content() {
  echo '<!-- Starting content wrapper for your theme -->';
}
add_action( 'woocommerce_before_main_content', 'tutsplus_before_main_content' );

function tutsplus_after_main_content() {
  echo '<!-- Ending content wrapper for your theme -->';
}
add_action( 'woocommerce_after_main_content', 'tutsplus_after_main_content' );

Related Links

1.How to Make Your Theme WooCommerce Compatible
2 lessons, 07:58

Free Lesson
1.1
Introduction
00:35

1.2
How to Make Your Theme WooCommerce Compatible
07:23