Which file (or files, if more than one) do I need to edit to re-arrange the Product Page?

I want to make some basic layout changes to the default Woocommerce product page. Specifically, I want to put the Order stuff just below the Price, and push the description down. In other words, swap the Short Description with the Order Stuff (Attributes, Add to Cart, SKU, etc.) Here is a screenshot of what I want to do: http://d.pr/i/YGAY

  • 1
    Take look at my answer here: wordpress.stackexchange.com/a/113189/22534. Btw those are many questions, the concept of this site is to ask questions concerning one solvable problem. – Nicolai Sep 18 '13 at 19:53
  • Thank you @ialocin. I have already seen those "structure" pages and spent quite a bit of time hacking around various files to no avail. Sorry if you mis-interpreted my question, but it was intended to be singular (and specific): Which file (or files, if more than one) do I need to edit to re-arrange the Product Page as shown in my screenshot? I just want to move the Buy Now button and Attributes Selector up above the Product Description. Thanks again. – Blake Miller Sep 21 '13 at 14:04
  • No problem, I'm just trying to help. See, what you wrote in your comment is a problem I - somebody - can work with. I post an answer for you, how to solve this. Can you please rewrite your question to reflect this? Thanks! – Nicolai Sep 21 '13 at 14:44

You can do what you want by hooking into the woocommerce_single_product_summary action. The action is executed inside content-single-product.php like this:

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

Above you have a description/documentation about the hooked in parts, the number represents the priority and/or order.

You can change the priority/order by removing and re-adding the parts you want the postion changed - like this:

    /** woocommerce: change position of add-to-cart on single product **/
    remove_action( 'woocommerce_single_product_summary', 
               'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_single_product_summary', 
            'woocommerce_template_single_add_to_cart', 9 );

Drop this piece of code into your functions.php to take effect. The add-to-cart part now should show after title and before price, if you want it to show after the price - for example - choose a number - in above code, on the add_action() line - between 11 to 19 - I'm sure you are getting the principle by now.

  • It's been some time on this, but I thank you for your help. That worked! Once I figured out the method, I made some more edits. I have also changed my original question to better match my problem. Thank you again @ialocin – Blake Miller Oct 5 '13 at 12:02
  • @BlakeMiller Any time, glad you figured it out and now are able to use it further! If it's a correct answer give it a check mark, so everybody coming to the question later knows that. – Nicolai Oct 5 '13 at 12:17
  • How can I position it above the Add to Cart button but below variations? – MF1 Jan 20 '17 at 19:30
  • @MF1 I'm not sure, you've to inspect it yourself. Good luck! – Nicolai Jan 23 '17 at 13:08

Not the answer you're looking for?Browse other questions tagged or ask your own question.