How to woocommerce add to cart underneath the image

WooCommerce is a powerful eCommerce plugin for WordPress that allows users to set up an online store quickly and efficiently. One of the most common customization requests is moving the “Add to Cart” button underneath the product image. By default, WooCommerce places the button in various locations depending on the theme, but if you want to modify it, follow this detailed guide.

Why Move the “Add to Cart” Button Below the Image?

Placing the “Add to Cart” button underneath the product image can enhance user experience by making it more visually appealing and easier to access. Benefits include:

• Improved user engagement and conversion rates.
• Better mobile responsiveness.
• A cleaner and more structured product layout.

Methods to Move the “Add to Cart” Button Below the Image

1. Using Hooks and Filters in functions.php

One of the most efficient ways to reposition the “Add to Cart” button in WooCommerce is by using action hooks within your theme’s functions.php file.

Steps to Implement:

1. Navigate to Appearance > Theme File Editor in your WordPress dashboard.
2. Open the functions.php file.
3. Add the following code snippet:

// Remove default add to cart button position
emove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

// Add the button below the image
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

4. Save the changes and refresh your product page to see the effect.

2. Editing the WooCommerce Template Files

If you want more control over the design, you can manually edit WooCommerce’s template files.

Steps to Implement:

1. Navigate to wp-content/themes/your-theme/woocommerce. If the woocommerce folder does not exist, create one.
2. Copy the template file content-product.php from wp-content/plugins/woocommerce/templates/ to your theme’s WooCommerce folder.
3. Open the content-product.php file and locate the following line:

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

4. Move the woocommerce_template_loop_add_to_cart(); function call below the product image section.
5. Save the changes and refresh the page.

3. Using CSS to Reposition the Button

For users who do not want to modify PHP files, CSS provides an alternative solution.

Steps to Implement:

1. Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard.
2. Add the following CSS code:

.woocommerce ul.products li.product .button {
    display: block;
    position: relative;
    margin-top: 10px;
}

3. Save the changes and refresh the page.

4. Using a Page Builder (Elementor, Divi, WPBakery)

If your site uses a page builder, you can reposition the “Add to Cart” button by customizing the product layout:

1. Open the WooCommerce Product Page in your page builder.
2. Drag and drop the “Add to Cart” button underneath the product image.
3. Adjust the spacing and styling as needed.
4. Save and update the page.

5. Using a WooCommerce Customization Plugin

If you prefer a plugin-based approach, you can use WooCommerce customization plugins like WooCommerce Customizer or WooCommerce Blocks to modify button positions visually.

Steps to Implement:

1. Install and activate a WooCommerce customization plugin.
2. Go to the plugin settings and adjust the layout options.
3. Save and preview the changes.

Conclusion

Moving the “Add to Cart” button underneath the product image in WooCommerce is an effective way to improve user experience and optimize conversions. Whether you prefer using PHP hooks, template file modifications, CSS adjustments, or a page builder, there are multiple methods available to achieve the desired layout. Choose the best method that suits your technical comfort level and theme structure.