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).

  • WPBackOffice

    Test Comment

  • Totosites

    How would you move the related products section to underneath the product image and gallery on the single product page on the left hand side?

    I understand the principle off removing an action and the adding a new one but can’t seem to target the right parts. Thanks.

  • Tim McMorris

    Posted last year, but so valuable for me today! Thanks for this Mike, was able to understand and do things I have been try and failing at for a while now!!

  • Debbie Campbell

    Very helpful, thank you!

  • Very useful.

    WooCommerce is a beast with more code than any parent theme i know of.

    Thanks for the help

  • Absolute Deals

    Very helpful post. It explains the concept thoroughly. I would like to do display price and add to cart button on the same row (Price on left and add to cart on right). Even if i give both of them the same priority i.e. 10 one appears above other. Is there a way to get them on the same row? Any help is much appreciated

  • pramodpandey

    Its really help me.Thank you Mike.

  • adrien becker

    Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks ! Thanks !

  • Thanks a lot for this clear tutorial – it’s very useful!

  • sathar

    how to display woocommerce product page & single product page inside the jquery tabs

  • Thank you for the explanation. Somehow does step one works but step two not. I have tried different priority numbers all with no results. The add to cart won’t show anymore. Do you have any suggestions? Thanks

  • Andrew Schultz

    Can you remove/add actions based on the current product being viewed?

  • Pedro Andres Miguras Martin

    Hello. Great article. I made a plugin that do the same. You can disable/rearrange content inside the single product page and shop page. Also, you can remove checkout fields. I uploaded it to wordpress, so here you have the link https://wordpress.org/plugins/wooenhancer/ if someone is interested

    • Kinetic Roberts

      tried your plugin and Im most interested in the Product grid but it does not allow for title and image and gallery to extend across the 2 columns. without that functionality its not very customizable as we are still restricted to the 2 column product layout honestly a fullwidth for each element is needed especially when dealing with large numbeers of color swatches pn cariable products. also I understand english is not your native kanguage but an english option on your site would help immensely

  • Lorn64

    Hello!
    I have been stuck on this issue for weeks and i’m totally lost!

    At the bottom of my woocommerce shop on wp there are x3 boxes – pages (a list of all my pages) / categories and meta (which gives sign in details)

    I really want to hide these three boxes.
    If you can offer any help at all it would be massively appreciated.

    Kind Regards

    • Wild Pop

      Did you ever figure it out?

  • Simba Lion

    it looks as tho you’ve replaced the content of this post with a password.