Move Price WooCommerce Storefront Hooks

A single product page in WooCommerce contains product details displayed in a specific way. The WooCommerce Storefront theme displays the product description in a separate tab, along with reviews.

By default, the Storefront theme displays the price above the product description. Moreover, the summary order is predefined. What if you wanted to change that order?

Move Price WooCommerce Storefront Hooks

WooCommerce is flexible and provides several hooks, which you can use to change the content’s order on the single product page. In this tutorial, I will share the WooCommerce single product Summary hooks. Additionally, I will demonstrate how to move the price below the product description.

 WooCommerce Storefront Single Product Page Summary Hooks

Content in the single product page is displayed using three actions. These actions are 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' );

A hook on an action displays the product detail for each product. It is worth mentioning that the number associated with each hook sets the priority of execution.

Therefore, the lower the number, the higher the priority of execution. The order of the product detail page will be displayed as follows:

• Product title
• Add to cart button
• Meta description

Therefore, for you to change the order, you have to change the associated priority. WooCommerce 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 different number.

For example, if you want to show the excerpt after the add-to-cart button, the excerpt hook’s weight should be more than the add-to-cart button hook. This indicates a lower priority. Add the following code in the functions.php file:

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

This will be the outcome:

Steps to Move the Price in WooCommerce Storefront Theme

Here are the simple steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to move the price in the WooCommerce Storefront theme.
3. Add the following code to the php file:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );

4. This will be the outcome:

Conclusion

In this brief article, I have shared about the hooks used in the single product page. I have highlighted that the Storefront theme displays the price above the product description by default.

Moreover, it is important to note that content in the single product page is displayed using three actions, which I have shared. The hook on an action displays the product detail for each product. Therefore, the number associated with each hook sets the priority of execution. The lower the number, the higher the priority of execution.

Similar Articles

1. How to Hide Out of Stock Variations in WooCommerce
2. How to Remove Category from Product Page WooCommerce In 2 Easy Options
3. How to Change WooCommerce Storefront Layout
4. How to Set WooCommerce Storefront Theme Product Page Full Width
5. How to Remove Zoom Effect on WooCommerce Product Image
6. How to Add Woocommerce Custom Text Field on Product Page
7. How to Setup Storefront Stock Quantity & Manage Inventory
8. How to Hide Mobile Footer From Storefront WooCommerce
9. How to Add Description after Price in WooCommerce
10. How to Add Text after Price in WooCommerce » Add Price Suffix
11. How to Change Button Color Storefront Theme
12. How to Customize Storefront Theme Using Customizer
13. How to Create One Product WooCommerce Storefront Store
14. How to Remove Related Products in WooCommerce in 3 Easy Options
15. How to Hide Storefront Mobile Cart Icon In WooCommerce
16. How to Get Started with WooCommerce Storefront Theme
17. How to Hide Add to Cart Button in WooCommerce
18. How to Setup WooCommerce Storefront Mega Menu
19. How Add Text Before the Price in WooCommerce » Add Text Before Price
20. How to Fix WooCommerce Storefront Theme Internal 500 Server Error