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.
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.
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.
Following is a screenshot showing the updated single product page.
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.