How to Add WooCommerce Add to Cart Button Under the Image

WooCommerce is one of the most widely used eCommerce plugins for WordPress, offering great flexibility to customize your online store. One common customization is altering the placement of the “Add to Cart” button to improve user experience and potentially boost conversions. By default, WooCommerce places this button near the product title and price, but moving it under the product image can enhance the visual appeal and usability of your site. In this guide, we’ll show you step-by-step how to reposition the WooCommerce “Add to Cart” button under the product image, ensuring you follow best practices suitable for all technical skill levels.

Why Move the “Add to Cart” Button?

Before jumping into the technical steps, let’s look at the advantages of repositioning the “Add to Cart” button:

• Improved User Experience: Positioning the button directly under the product image makes it easier for customers to quickly add items to their cart.
• Better Visual Flow: Moving the button closer to the product image enhances the visual hierarchy, especially when product details are extensive.
• Higher Conversion Rates: Simplifying the shopping process and reducing distractions by strategically placing key elements like the “Add to Cart” button can increase conversion rates.

How to Change the “Add to Cart” Button Placement in WooCommerce

There are different methods to move the “Add to Cart” button underneath the product image, depending on your technical comfort level. Below, we’ll cover three main approaches: adding a code snippet, using a child theme, and utilizing a plugin.

Also Read: Where Do You Set the Thank You Message in WooCommerce?

Method 1: Adding a Code Snippet to Your Theme’s functions.php

One of the easiest ways to move the “Add to Cart” button is by inserting a custom code snippet into your theme’s functions.php file. This allows you to modify WooCommerce hooks to change the layout.

Step-by-Step Guide:

1. Backup Your Website: Always back up your site before editing theme files to avoid potential issues.
2. Access the Theme Editor:
   • From your WordPress dashboard, go to Appearance > Theme File Editor.
   • Locate and open the functions.php file.
3. Insert the Code: Use the following code to relocate the “Add to Cart” button:
   php
   // Remove the default add to cart button placement remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); // Add the add to cart button under the product image add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 20);
   • The remove_action() function takes out the default button placement.
   • The add_action() function moves the button underneath the product image. The number 20 defines the priority and controls where the button will appear.
4. Save the File: After adding the code, save the functions.php file and refresh your product page to see the changes.

Pros:

• Simple and fast.
• No need for extra plugins.

Cons:

• Requires basic PHP knowledge.
• Changes may be lost when the theme updates, unless you use a child theme.

Method 2: Using a WooCommerce Child Theme

To make your customizations more sustainable and preserve them during theme updates, it’s a good idea to use a child theme.

Step-by-Step Guide:

1. Create a Child Theme: If you don’t have one already, create a child theme by following the WooCommerce documentation or using a plugin.
2. Copy the Template File: WooCommerce uses templates to display product pages. To move the “Add to Cart” button, you’ll need to copy the relevant template file from the WooCommerce plugin folder to your child theme.
   • Navigate to wp-content/plugins/woocommerce/templates/single-product/.
   • Copy single-product.php to wp-content/themes/your-child-theme/woocommerce/single-product/.
3. Modify the Template: Open the copied single-product.php file in a text editor. Find the code for the product image and the “Add to Cart” button, and move the button code below the image.
4. Upload and Save: Save the changes and upload the modified file back to your child theme’s WooCommerce folder. Your changes will now remain even after updating the theme.

Pros:

• Keeps customizations intact during theme updates.
• Offers full control over the product page layout.

Cons:

• Requires manual template editing.
• Involves knowledge of WooCommerce template structures.

Method 3: Using a Plugin (No Coding Required)

If you’re not comfortable with code, you can use a layout plugin to rearrange the product page elements, including the “Add to Cart” button, without any coding.

Popular Plugins:

1. WooBuilder Blocks: This plugin provides a visual editor, allowing you to drag and drop WooCommerce elements, including the “Add to Cart” button.
2. Elementor WooCommerce Builder: Elementor Pro includes WooCommerce widgets that let you fully customize your product page layout, including repositioning the “Add to Cart” button.

Also Read: Can WooCommerce Connect to QuickBooks Online (QBO)?

Step-by-Step Guide for Elementor:

1. Install Elementor Pro: Go to Plugins > Add New, search for Elementor Pro, and install it.
2. Create a Product Template: Navigate to Templates > Add New, select “Single Product,” and create a new template.
3. Drag and Drop: Use Elementor’s drag-and-drop interface to move the product image and “Add to Cart” button widgets as needed.
4. Publish the Template: Once you’ve designed the layout, publish the template and apply it to all product pages.

Pros:

• No coding knowledge needed.
• Full design flexibility.

Cons:

• Requires a paid plugin like Elementor Pro.
• May increase website load times due to additional plugins.

Final Thought On How to Add WooCommerce Add to Cart Button

Relocating the WooCommerce “Add to Cart” button beneath the product image can improve the overall shopping experience, making it more intuitive and user-friendly. Whether you prefer working with code in functions.php, using a child theme, or relying on a plugin like Elementor, each method offers its own advantages depending on your expertise and specific needs.

By aligning the layout of your “Add to Cart” button with your store’s design, you’ll create a smoother user experience that could ultimately lead to higher conversion rates.

Interesting Reads:

How to Show SKU on WooCommerce Product Page Using Divi

How to Set Up Free Shipping in WooCommerce After Amount Added

How to Export Individual Products in WooCommerce