http://ohsoren.github.io/reorder-single-product-template/

How to reorder WooCommerce’s single product template

Let’s set the scene…

We install the latest version of WordPress and upload and activate a bare bones blank theme. Next, we install and activate the latest version of the WooCommerce plugin and add one product ready for play time

Woo’s default single product template

Our starting point. This is how the template looks before we play with any code.

Breadcrumb
Image
Title
Price
Short Description (if exists)
Cart
Category/Tag (if exists)
Tabs
- Product Description, Additional Information, Reviews
Related Products
(visible when 2 or more products in shop)

We’re freelancing as a front-end dev here, with no input into the design (yet), but a designer has given us a mockup of how they want the single product page to be structured, so let’s take a look

New reordered single product template

The new layout. This is how the template looks after we’ve done our front-end thing.

Image
Category
Title
Price
Product Description
Additional Information
Cart

Spot
the difference?

To understand how to reorder the single product template, we first need to get familiar with WooCommerce templates.

Understanding WooCommerce templates

The WooCommerce page templates can be found inside the WooCommerce plugin folder, inside a folder named ‘templates’. Let’s be smart and move the WooCommerce templates from the plugin folder to our theme’s folder

Inside the theme folder, make a new folder named ‘woocommerce’
Inside the woocommerce plugin folder, find and duplicate the ‘templates’ folder
Move the duplicate ‘templates’ folder to the themes ‘woocomerce’ folder. Remember to (re)name the duplicate folder ‘templates’

Why do we do this? So we can now edit WooCommerce template files from within the theme folder and not have to worry about our changes being overwritten when the WooCommerce plugin is updated in the near future.

We won’t be editing any template files today, only looking at two of them.

Inside the theme’s ‘woocommerce/templates’ folder is a template file named single-product.php. This is, in Woo’s own words, “The Template for displaying all single products”.

single-product.php view on github

Open the single-product.php file and have a look at the code. It contains a few “hooks” which grab chunks of code that make up the single product template.

Notice this particular line

wc_get_template_part( 'content', 'single-product' );

It’s calling another template file named content-single-product.php. This file is, in Woo’s own words, “The template for displaying product content in the single-product.php template”.

content-single-product.php view on github

The content-single-product.php file is inside the theme’s woocommerce ‘templates’ folder. Like single-product.php, there are “hooks”.

We can see that, for example, the ‘woocommerce_single_product_summary’ hook includes the code that generates the product title, price, add-to-cart and meta (category and tags), amongst others.

Notice the numbers

/**
  * woocommerce_single_product_summary hook
  *
  * @hooked woocommerce_template_single_title - 5
  * @hooked woocommerce_template_single_rating - 10
  * @hooked woocommerce_template_single_price - 10
  * @hooked woocommerce_template_single_excerpt - 20
  * @hooked woocommerce_template_single_add_to_cart - 30
  * @hooked woocommerce_template_single_meta - 40
  * @hooked woocommerce_template_single_sharing - 50
  */
  do_action( 'woocommerce_single_product_summary' );

Each number is an order positon inside the hook. The lower the number, the earlier it appears in the layout.

So let’s do it!

The reorder code

We use two simple actions to reorder the single product template,remove_action and add_action, and we add them to functions.php file.

// Remove product category/tag meta from its original position
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// Add product meta in new position
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 5 );

Remove a piece of content from it’s original order position
Add the content to a new order position

In the code example above, we are removing the single product template’s meta content from the ‘woocommerce_single_product_summary’ hook. Then we add it back to the hook, changing its order from 40 to 5.

We’re repositioning content by changing it’s order number.

/**
  * woocommerce_single_product_summary hook
  *
  * @hooked woocommerce_template_single_title - 5
  * @hooked woocommerce_template_single_rating - 10
  * @hooked woocommerce_template_single_price - 10
  * @hooked woocommerce_template_single_excerpt - 20
  * @hooked woocommerce_template_single_add_to_cart - 30
  * @hooked woocommerce_template_single_meta - 40
  * @hooked woocommerce_template_single_sharing - 50
  */

  // Remove product category/tag meta from its original position
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
  // Add product meta in new position
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 5 );

  // Remove product title from its original position
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
  // Add product title in new position
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 10 );

  // Remove product price from its original position
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
  // Add product price in new position
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 15 );

  /**
  * woocommerce_after_single_product_summary hook
  *
  * @hooked woocommerce_output_product_data_tabs - 10
  * @hooked woocommerce_upsell_display - 15
  * @hooked woocommerce_output_related_products - 20
  */

  // Remove product tabs (description, additional information, reviews)
  remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

  // Add product description tab content in new position
  function woocommerce_template_product_description() {
      woocommerce_get_template( 'single-product/tabs/description.php' );
  }
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );

  // Add product additional information tab content in new position
  function woocommerce_template_product_additional() {
    woocommerce_get_template( 'single-product/tabs/additional-information.php' );
  }
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_additional', 30 );

  // Remove product add-to-cart from it original position
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
  // Add product add-to-cart in new position
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 40 );

  // Remove product 'Related Products'
  remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

  // Remove shop breadcrumb
  remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

  // Remove main shop page "Showing X results" text
  remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

  // Remove main shop page product filter
  remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );