2015-08-07_230308The WordPress WooCommerce shopping cart displays the product excerpt or short description above the add to cart button by default. If you’d like to move the product expert below the add to cart button you can do so by adding the following hook to your themes functions.php file.

I don’t like the idea of the short description being above add to cart button. Especially if you have a meaty short product description it could push the add to cart button further down the page which can hinder usability. I believe the add to cart button should be prominent and visible on the page to lead the user to quickly perform their purchase.

In order to achieve this you would have to add a new web hook to the functions.php page in your templates folder.

Assume the commented block below provides the default position or priority of the elements on a page. The product title being in position 5, product price in position 10 and so on. If you want to move the product excerpt which is position 20 below the add to cart button then you would have to re-assign a number greater than 30 in the web hook.

* Reference hook locations using 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

2015-08-07_230223First you have to unassign its current position.

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );

Then reassign it to a new position by providing an order number greater than 30 or the add to cart button as below.

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 35 );

Or just add the following code to add the product short description/product exerpt below the add to cart button:

// Move WooCommerce exerpt under add to cart button
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 30 );

You can see the code above applied to the following website https://www.gorillanutrition.ca

That’s it!

Looking for a professional web development company ? Contact NexToronto Web Development & Internet Marketing today!