By default, the add to cart button on the product page, in most WooCommerce themes will be below the short description section. This can sometimes result in the add to cart button being below the fold. A complete conversion killer! There are several ways to optimize your product page for conversions i.e purchases and having your add to cart button above product short description is a must.
After running several WooCommerce stores for years, I cannot emphasize enough the importance of having your add to cart button above the fold. In fact, It needs to be big, bold, clearly visible, and most importantly above the fold.
Benefits of Moving Add to Cart Button above Product Short Description
As mentioned earlier the major benefit of moving the add to cart button above the product short description is the conversion boost that you will get. Because it will be visible above the fold and it will give a clear call to action to visitors and tell them what they need to do.
Other than that it also helps improve the user experience for your visitors. The add to cart button is your call to action, if a visitor lands on your store and they cannot see the call to action, or they need to scroll to find it, it is not a very optimal user experience.
To explain this better, have a look at the 2 product pages below. Which one do you think will convert better?
As you can see the product page on the left has the add to cart button above the fold, but the product page on the right has the add to cart button below the fold. The customer has to scroll down the page to be able to add the product to the cart. It is highly likely the product page on the left will convert better than the product page on the right. It may look like a minor thing but it can make a huge difference.
Below is a live example of a product page that we will be working with. As you can see first the Title of the product is displayed, followed by the price, then the short description and finally the add to cart button.
Our goal will be to move the add to cart button above the short description. Without further ado, let’s have a look at how you can go about this. You will
Step 1: Log in to your WordPress dashboard
Visit your login link usually www.yourwebsite.com/wp-admin and log in to your WordPress dashboard.
Step 2: Open the theme editor
In your WordPress dashboard navigate to Appearance > Theme editor.
Here you will need to search for the function.php file from the right hand list of files. Click on it to edit it.
Step 3: Add code to the functions.php file
In the functions.php file you will need to add the following code.
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 );The code simply changes the priority of the hooks on the product page. Here are more priorities of various hooks on the product page.
Once you have added the relevant code to the functions.php file. Click on update file as shown below.
You can change the priorities to move any of these items up or down. For example of you change the priority for the sharing buttons from 50 to 25 it will be below the excerpt but above the add to cart button.
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
Once you have updated your functions.php file your add to cart button should now be above the short description.
Here is what our test website looks like now. You can see that the Add to Cart button is above Product short description
Of course we do not recommend you to edit the functions.php file of your main theme. It is always better to create a child theme and do changes there. If you do the changes in your main theme, there is always the risk of loosing the changes when you update the theme. If you are unsure about how to create a child theme have a look at this excellent tutorial on how to create a child theme in WordPress.
Bonus: Product page optimizations
When you are running a WooCommerce store there is so much that you need to take care of in order to be successful. An optimized product page, an easy checkout process, a great user experience, speed of the website, customer support, and much more! When it comes to your product page there are several techniques you can use to make it convert better.
Carefully have a look at the product page below and note the points 1 – 4 on the example below.
- Discount on offer – Customers always love a discount. On the product page below it is well outlined and easily visible.
- Scarcity – “Only 7 Left” shows the customer that there is limited stock and creates the fear of missing out. Thereby, asking customers to act as soon as possible.
- Urgency – 8 people are looking at this product right now! Only 7 left and 8 people are already looking at it. It means the visitor needs to act fast.
- Trust – Money back guarantee, great customer support all add to the customer’s trust.
As you can see minor things if taken care of can be a massive conversion booster. You can read more on how to add scarcity and urgency to your WooCommerce store here.
Conclusion
We hope you are now easily able to move the add to cart button above your short description. If you have any trouble doing it, let us know in the comments section below.