Reorder Content on WooCommerce Single Product Page

Still struggling to grab your customers’ attention in your WooCommerce store? Reordering content on your product pages can help boost engagement and make the shopping experience on your WooCommerce store smoother. 

In this article, let’s explore how to effortlessly reorder content on WooCommerce single product pages.

A single product page in WooCommerce follWooCommerce-compatibleows a pre-defined page structure that generally includes product details, sorted and displayed in a specific order. However, some WooCommerce compatible themes may modify this default layout, altering the order of the product summary or order details. 

If you want to customize the product summary page, WooCommerce is a well-built plugin that provides several hooks. You can use, to change the order of the content on the product summary page. These changes would have to be made in functions.php of your theme or your child theme.

Reordering content involves customizing and updating your store’s product pages by adjusting description, changing gallery placement, moving price above title etc. These modifications can improve customer engagement and potentially increase your sales.

How WooCommerce Displays Product Content By Default

By default, WooCommerce has a set layout for product pages, including product details like the title, price, description, and images, displayed in a particular order. However, some themes might change this default layout.

If you want to customize your product page layout, WooCommerce offers several built-in hooks that allow you to reorder the content the way you want. You’ll be working with the functions.php file in your theme or child theme for this.

Reordering the content lets you tweak things like:

• Moving the price above the title
  
• Changing the gallery’s placement
  
• Shifting the product description

Understanding WooCommerce Product Page Hooks

The content on a product page is controlled by action hooks. These hooks define where each piece of content appears on the page. You’ll find these hooks in the woocommerce/templates/content-single-product.php file.

Here are the main hooks that control the content placement:

• woocommerce_before_single_product_summary: This hook runs before the product summary (e.g., sale flash, product images).
  
• woocommerce_single_product_summary: This is where most of the product details appear, like the title, price, and add-to-cart button.
  
• woocommerce_after_single_product_summary: This runs after the product summary (e.g., related products, product data tabs).

How to Reorder Content Using WooCommerce Hooks

Each element in the product summary is attached to a specific hook, and the number associated with each hook controls the order. Lower numbers mean higher priority—so items with lower numbers appear first.

For example, here’s how the woocommerce_single_product_summary section works:

1. Product Title
   
2. Product Price
   
3. Short Description
   
4. Add to Cart Button
   
5. Product Meta (Categories, SKU, Tags)
6. Sharing Links

To change the order, you can adjust the priorities of the hooks or remove and add them in the order you want.

Show me the Money: WooCommerce Single Product Summary hooks

The content displayed on a single product summary page is displayed on three actions. You can find these actions being executed in ‘woocommerce/templates/content-single-page.php’.

/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @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' );
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );

Each product detail is displayed on a hook for an action. The number associated with each hook basically sets the priority of execution. Lower the number, higher the priority of execution. Thus on the ‘woocommerce_single_product_summary’, the order of display will be, the product title, price, excerpt, add-to-cart, meta and sharing links, because of the associated weights.

Need Help Reordering WooCommerce Content? Get Woo Expert Advice Now!

To change the order you have to change the associated priority and WordPress will take care of displaying the content in the said order. To change the priority, you need to remove the hook and add it again with a new number.

Thus, if you wanted to show the excerpt after add-to-cart button, the weight of excerpt hook should be more than add-to-cart button hook, indicating lower priority.

/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );

Make it your Own: Showing Custom Fields

Custom data can be added to a WooCommerce custom post type ‘Products’, using meta boxes or by the Advanced Custom Fields Plugin. To show this custom field data on the product summary page, you would have to create a function which displays the fields, and hook it to a WooCommerce action, along with the desired priority.

For example if you wanted to display the custom fields after product excerpt but before add-to-cart, you would have to write a function similar to the one below.

function wdm_add_custom_fields()
{
    /** if your have added information using a metabox **/
    echo 'ABC'.get_post_meta(get_the_ID(), "ABC", true);
    /** if you have used ACF to add custom fields **/
    echo 'XYZ'.get_field(“XYZ”);
}
add_action( 'woocommerce_single_product_summary', 'wdm_add_custom_fields', 21 );

Remember, these changes have to be made in the functions.php file.

Similarly, instead of reordering content, you can choose to remove unwanted content, or add additional content similar to displaying custom field content. This can help you personalize your WooCommerce product page, by structuring the content the way you like.

Also Read:

• How to Add Custom Tab to a WooCommerce Product Page
• How to Add Custom Data to WooCommerce Order