Reorder Content on WooCommerce Single Product Page

A single product page in WooCommerce, generally contains, the product details, sorted and displayed in a specified way. Some WooCommerce compatible themes, sometimes change the product summary order. Say, for example, a theme might show the product description in a separate tab, along with reviews, instead of below the title.

But there is only so much a ready-made theme can do. The summary order is predefined. What if you wanted something different. Well, WooCommerce is a well-built plugin. It provides several hooks, which 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.

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.

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.

• WordPress Tips & Tricks
• With tags: WooCommerce

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!