Using WooCommerce with Sage

When you first install WooCommerce with Sage you’ll notice that WooCommerce calls a duplicate header, sidebar and footer onto all product pages. This is because WooCommerce uses its own calls to get_header(), get_sidebar() and get_footer() in their template files, whereas Sage has already includes those areas in base.php with the theme wrapper.

Fortunately it is simple to overcome this issue.

To do this, we need to create the individual template files for the Product custom post type per the WordPress template hierarchy.

This means at a minimum creating archive-product.php and single-product.php in your theme directory, and populating those files with the WooCommerce content function. Here’s the steps:

  1. Pop over to your Sage theme folder and create two new files: archive-product.php and single-product.php
  2. Open each file and drop the following function in both: <?php woocommerce_content(); ?>
  3. Open your site up and check out the shop and individual product pages, and you should see your regular layout has returned.

This is the quick and easy method for getting things working. The woocommerce_content() function basically just goes out and runs the page through a conditional statement and outputs the default code for that page type.

Getting more control over WooCommerce pages

At some point you will probably want to get some more control over the markup and what is actually shown on these pages. You can certainly add additional content or functions to these new files and use the WooCommerce actions and filters – but you can also get some more flexibility by replacing the default woocommerce_content() function with the actual post loops that WooCommerce uses, and then modifying them.

  1. Open the WooCommerce plugin templates folder (/plugins/woocommerce/templates/)
  2. Open the corresponding template file you are trying to modify in your theme (e.g. single-product.php)
  3. Copy the section between get_header('shop') and do_action('woocommerce_sidebar'), watching out to balance your opening and closing PHP tags.
  4. Replace the contents of your template file in the Roots theme folder. For example, single-product.php would look like:
<?php
  /**
   * woocommerce_before_main_content hook
   *
   * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
   * @hooked woocommerce_breadcrumb - 20
   */
  do_action('woocommerce_before_main_content');
?>

  <?php while (have_posts()) : the_post(); ?>
    <?php woocommerce_get_template_part('content', 'single-product'); ?>
  <?php endwhile; ?>

<?php
  /**
   * woocommerce_after_main_content hook
   *
   * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
   */
  do_action('woocommerce_after_main_content');
?>

You can do this with all the standard template files for the Product custom post type and related taxonomies as needed.

Replace the WooCommerce page header markup (optional)

You may notice that the WooCommerce pages use a little bit different markup than the other pages on your site. You can update these pages to use the default page header template part with these optional steps:

Add your page header template part to single-product.php and archive-product.php above the other content:

<?php get_template_part('templates/page', 'header'); ?>

Add the following in your /lib/extras.php file to remove the WooCommerce page headers:

add_filter('woocommerce_show_page_title', '__return_false');
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);

Now your product pages and archives should use the same markup as your other pages.

Declare WooCommerce theme support

Finally, now that your theme "supports" WooCommerce, get rid of the WooCommerce admin warning by declaring that your theme supports it. Add the following snippet to the setup function in /lib/setup.php.

add_theme_support('woocommerce');

Get our latest updates & occasional tips on building better WordPress sites

Follow @rootswp on Twitter