woocommece-product-page-2-wasim-sama

WooCommerce Product Page Content Position Change

woocommece-product-page-wasim-samawoocommece-product-page-2-wasim-sama

To reorder the elements on woocommerce product page, Find content-single-product.php located within the WooCommerce plugin’s templates directory which holds the action that outputs the main elements on the product page.

File Location: 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' );

We can find the above code in content-single-product.php file The action we see above is called ‘woocommerce_single_product_summary’ and the default hooks are listed in the comments. For example, woocommerce_template_single_title prints the title. The numbers next to each of these hooks are their priority level which determines the order in which they display on the page. It means the title will be displayed first and the price will be displayed below title and then excerpt, add to cart, etc.

Now find theme’s function.php file to Remove and re-add the actions

To hook a function into action use add_action();

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

Read more about do_action(), add_action() and remove_action().

In below example we’ll move the price below Short description.

Apply remove filters on your theme function.php

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

Now add the hooks again and change their position

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 20 );

with above code we’ve moved the price price below Short description.

If you want to remove a particular section use only remove_action(), Don’t add the action back.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
The following two tabs change content below.

Wasim

Wasim Sama is a passionate blogger and experienced web developer. Founder of wasimsama.com and co-founder of TechnicalMail.com.

Leave a Reply

Your email address will not be published. Required fields are marked *