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

Move Add to Cart button above Product short description in WooCommerce

Last updated - September 24, 2020

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.

13 COMMENTS

  1. What’s a code snippet code for this if we are using a code snipper plugin?

    • Hi Ashley,

      You just need to add the above code in your code snippet plugin. It works.

  2. Thank you for sharing this hook. I moved the short description beneath the add to card button. The only problem is that the short description duplicates two times. Why did it happen?

    I added this hook to fucntions.php and short description displays in both places:
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10);
    add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 30);

    • Hi Alina,
      Try below code

      add_action( ‘woocommerce_single_product_summary’, ‘elex_move_add_to_cart_above_short_desc’);
      function elex_move_add_to_cart_above_short_desc() {
      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 );
      }

    • Hello Alina,
      The reason for getting the short description twice on the product page is because you may have added the code snippet in core WordPress’s functions.php file instead of the one in Theme Functions Folder (here’s how you should update – https://learnwoo.com/update-code-snippets-themes-functions-php-wordpress-woocommerce-site/).
      However, the approach taken by Shashidhar is more appropriate. Hence, I have updated my code snippet with his in the article. Just use the updated code snippet in the Theme Functions folder’ functions.php file and you will see the correct result.

      Do let us know if it has worked!

  3. Perfect, works great! Is there a possibility to only move the variations (like color, size etc), but not the add-to-cart button?

    • Hi Lukas,
      The single add-to-cart hook (as used in the code snippet) works for both the variation drop-down list as well as the add-to-cart button. This makes sense from a good UI point of view, as a customer is most likely to (and should!) click on the Add to Cart button after selecting the variation.
      However, if you still want to change it, you can do so with custom CSS. A little research on the web might help.

  4. Great work around, worked very well for me. Thanks a lot!

    • Thanks for letting us know, Angela!
      I’m glad it helped. 🙂

  5. What would be the best practice for having one position for desktop and another for mobile only? For instance, I’d like to move the variations just below the thumbnail gallery in mobile but keep it where it is in desktop. Any suggestions there?

LEAVE A REPLY