How to woocommerce add to cart underneath the image divi ?

When using the Divi theme with WooCommerce, the default layout places the “Add to Cart” button within the product summary section. If you want to move the button underneath the product image, you will need to modify your theme using hooks or custom CSS.

Method 1: Using a Child Theme and WooCommerce Hooks

Step 1: Create a Child Theme (If You Haven’t Already)

Before making changes to your theme’s files, it’s best practice to use a child theme to prevent losing modifications when updating Divi.

Navigate to wp-content/themes/ via FTP or File Manager.
Create a new folder, e.g., divi-child.
Inside this folder, create a style.css file and add:
```
/*
Theme Name: Divi Child
Template: Divi
*/
```

Create a functions.php file and enqueue the parent theme:

<?php
function my_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
?>

Activate your child theme from the WordPress dashboard (Appearance > Themes).

Step 2: Modify the Single Product Page Layout

Now, add the following code to your child theme’s functions.php file:

function move_add_to_cart_under_image() {
    global $product;
    
    if ( is_product() ) {
        echo '<div class="custom-add-to-cart">';
        woocommerce_template_single_add_to_cart();
        echo '</div>';
    }
}

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
add_action('woocommerce_after_single_product_summary', 'move_add_to_cart_under_image', 5);

This code:

Removes the default “Add to Cart” button from the summary section.
Adds the button below the product image using the woocommerce_after_single_product_summary hook.

Method 2: Using Custom CSS (Quick Fix)

If you prefer not to edit PHP files, you can reposition the button using CSS:

Step 1: Find the Product Page Class

Use Inspect Element (F12) to locate the class of the product summary. Typically, it’s .woocommerce div.product.

Step 2: Apply Custom CSS

Go to Appearance > Customize > Additional CSS and add:

.woocommerce div.product form.cart {
    position: relative;
    margin-top: 20px;
}

.woocommerce div.product form.cart {
    display: block;
    width: 100%;
    text-align: center;
}

.woocommerce div.product .images {
    display: flex;
    flex-direction: column;
    align-items: center;
}

This CSS ensures:

The “Add to Cart” button is centered below the image.
It remains properly aligned across different screen sizes.

Method 3: Using a Page Builder Module

If you are using Divi’s Theme Builder, you can:

Go to Divi > Theme Builder > Single Product Template.
Click Add Custom Body > Build Custom Body.
Use the WooCommerce Modules:
- Add an Image Module for the product image.
- Add a WooCommerce Add to Cart Module underneath.
Save the template.