WooCommerce Product Variations – How to move Add to Cart button above Product short description?

0
2602
Move Add to Cart button above Product short description in WooCommerce

Last updated - May 10, 2018

If you are selling a WooCommerce product that has a detailed product description on its product page, the Add to Cart button, moves down to the page, by default. This product short description outlines the features of the product and is generally placed right below the product price.

When the Add to Cart button moves down to the page, it might make your chances for conversion low. Hence, in such situations, it is always better to have the Add to Cart button on the top for the easy click to the customers.

In this article, I’ll show how you can move Add to Cart button above Product short description in WooCommerce.

Consider the following case

Let us consider we have a variable product with product information as shown in the screenshot below.

Move Add to Cart above Product Short Description | Default setup
Move Add to Cart above Product Short Description | Default setup

All we need to do is place the Add to Cart button above the short description.

To do this, add the following code snippet at the end of the Themes Function(functions.php) file of your currently activated website theme. You can locate this file in Appearance > Editor > click on functions.php file from the files listed on the right.

Code snippet:

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', 15 );

Following are the hooks for single product page and its associated priorities:

woocommerce_template_single_title - 5
woocommerce_template_single_price - 10
woocommerce_template_single_excerpt - 20
woocommerce_template_single_add_to_cart - 30
woocommerce_template_single_meta - 40
woocommerce_template_single_sharing - 50

You can change the priority of other hooks of the page to customize as per your need.

Tip: You can use this code snippet for Simple, Grouped, and External products as well.

The Resultant

Following is a screenshot showing the updated single product page.

Move Add to Cart above Product Short Description | Custom setup
Move Add to Cart above Product Short Description | Custom setup

Therefore, in this way, you can move Add to Cart button above Product short description in WooCommerce.

 

For more customization for your WooCommerce store, check out our WooCommerce Customization archive.

Or you can continue exploring LearnWoo for more amazing articles.