Editing WooCommerce Product Page Layout – The Right Way 2018

I need to edit the order of elements on the product page in WooCommerce. What I’ve done in the past is copy over the single-product.php from WooCommerce templates folder into my theme into a woocommerce folder. Then I would edit the crap out of it.

The correct way to do this is to look in the content-single-product.php located inside templates folder in Woocommerce plugin and see what order those elements are set to.

content-single-product.php

content-single-product.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<div class="summary entry-summary">

<?php

/**

* Hook: Woocommerce_single_product_summary.

*

* @hooked woocommerce_template_single_title - 5

* @hooked woocommerce_template_single_rating - 10

* @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

* @hooked WC_Structured_Data::generate_product_data() - 60

*/

do_action('woocommerce_single_product_summary');

?>

</div>

As you can see, woocommerce_template_single_title is set to 5, woocommerce_template_single_rating is set to 10 and so on.

Your mission is to remove that element and add it back in with the correct order inside your functions.php file.

This reorders the elements and puts them where you need them so then you can CSS to your heart’s content.

Adding Custom Content Into The Summary Section

To add custom content you just need to create a woocommerce folder in the root directory of your theme and inside create another folder named single-product. Here, copy the code below and paste it into a new file (name it whatever you want, for this tutorial we’ll call it mynewelement.php).

Now you need to add these new elements to the product summary section. To do this, we go back to functions.php and add functions to include these new files and then we will pull them into the summary section and give them an order number.