• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dominate Marketing

Why Dabble When You Can DOMINATE

  • Blog
  • Contact

Re-Order Single Product Template

November 8, 2016 by Dominate Marketing

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.

  1. Breadcrumb
  2. Image
  3. Title
  4. Price
  5. Short Description (if exists)
  6. Cart
  7. Category/Tag (if exists)
  8. Tabs
    • Product Description, Additional Information, Reviews
  9. 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.

  1. Image
  2. Category
  3. Title
  4. Price
  5. Product Description
  6. Additional Information
  7. 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

  1. Inside the theme folder, make a new folder named ‘woocommerce’
  2. Inside the woocommerce plugin folder, find and duplicate the ‘templates’ folder
  3. 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 );

Filed Under: Shopping Cart Modules, Woocommerce

Categories

  • css tricks
  • Errors
  • Fixes & F**ups
  • Formidable Forms
  • Genesis
  • Google Apps Mail
  • How To's & Tips n Tricks
  • MailChimp
  • Media
  • Plugins
  • Scam Alert
  • Shipping
  • Shopping Cart Modules
  • Videos
  • Widgets
  • Woocommerce

Recent Posts

  • font gradient
  • Horizontal Genesis eNews E-Mail Opt In Subscribe Box Inline
  • Hide shipping rates when free shipping is available
  • How to Create a WooCommerce Wholesale System
  • Imagify vs EWWW vs Kraken vs WP Smush vs ShortPixel: The 5 Best WordPress Image Optimization Plugins Compared
  • Formidable Forms & Mod Security
  • Genesis Slide-in Widget
  • Genesis Plugins
  • Genesis overlay widget
  • Add refined CTA & Announcement widget areas etc
  • Migrate Weebly to WordPress: A Step-by-Step Guide
  • Sparkle
  • Remove WordPress Default Widgets
  • Some great css tricks on this website
  • Border Around A Button
  • Adding support for the new WooCommerce 3.0 gallery features
  • 100 WooCommerce Tips and Tricks
  • Woocommerce – Change number of products displayed
  • Genesis Footer Widgets
  • 3 Ways to integrate WooCommerce with Genesis
  • Emails fail on multisite setup
  • Video Embed & Thumbnail Generator
  • WP MS User Roles
  • Setup Gmail for Domain – Google Apps Mail
  • Remove default WordPress widgets
  • Re-Order Single Product Template
  • Change SKU Text
  • Don’t Get Caught by an Invitation To Register Domain – Fake Domain Renewal Letters Can Cost You
  • WooCommerce MailChimp Integration
  • Hide the shipping methods if the cart does not have the specific shipping class

Handcrafted with by Dominate Marketing
Web Design & Development, SEO & Ultra Nerdyness!
Sitemap | Terms of Service | Privacy Policy | Delivery Policy | Refund Policy | Owner Login