Reorder Product Page Contents – WooCommerce

Question

How do I change the order of elements on my woocommerce product page?

Answer

Remove and then re-add the actions associated with ‘woocommerce_single_product_summary’ with the desired priority.

Where the Product Page Comes From

To change the order of elements, you must first understand where/how the product page is being generated. Located within the WooCommerce plugin’s templates directory you’ll find content-single-product.php which holds the action that outputs the main elements on the product page.

Content-Single-Product.php

Located: plugins/woocommerce/templates/content-single-product.php


/**
* 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' );

The action we see here is called ‘woocommerce_single_product_summary’ and the default hooks are listed in the comments above the action. For example, woocommerce_template_single_title prints the title. The numbers next to each of these hooks is their priority level which determines the order in which they display on the page. A lower priority number results in it appearing sooner.

If you are unfamiliar with Actions, they are a single line of code that can be ‘hooked’ into from your theme, external plugins. When WordPress is ready to print that action is simply calls:


do_action( 'my_action_title' );

To hook a function into this action use add_action():


add_action( 'my_action_title', 'my_custom_function', priority, number_of_accepted_arguments );

To remove a hook from an action use remove_action();


remove_action( 'my_action_title', 'my_custom_function', priority, number_of_accepted_arguments );

See the documentation for do_action()add_action() and remove_action().

Rearranging the Elements

Now that we understand what is generating the product page and how the initial order is determined, we can start to rearrange the elements. First go to your go to your template’s functions.php file or enter the following lines into another active php file in your WordPress install ie. an active plugin.

In this example, we’ll be moving the add to cart button below all other elements.

Step 1: Remove the hook you want to move.


remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Step 2: Add it back with a different priority.


add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 60 );

And it’s as simple as that, with these two lines we’ve moved the add to cart button from the middle of the page to the bottom.

Remove a Page Element

If you want to remove a particular section all together, do the steps above but just don’t add the action back (leave out step 2).