How to move "Add to cart" button under product image in Divi theme?

Here is the translation of the Polish text into English:

Method 1: Changing layout using child theme and WooCommerce hooks (advanced)

Step 1: Create a child theme (if you don’t already have one)

To avoid your changes being overwritten by future Divi updates, work on a child theme:

Log in to your server via FTP (or use the file manager in your hosting control panel).
Navigate to wp-content/themes/ and create a new folder, e.g., divi-child.
Create a new file called style.css with the following content:

Create a new file called functions.php with the following content:

/*

 * Remove original 'Add to Cart' button

 */

function remove_original_add_to_cart_button($hook){

remove_action('woocommerce_single_product_summary','woocommerce_template_single_add_to_cart')

}
function add_custom_add_to_cart_button($hook){

remove_action('woocommerce_single_product_summary','woocommerce_template_single_add_to_cart')
add_action('woocommerce_before_add_to_cart_form','custom_add_to_cart_button')

}
function custom_add_to_cart_button($hook){

echo 'Custom Add to Cart Button'// echo your custom button code here

}
add_action('init','remove_original_add_to_cart_button')

add_action('init','add_custom_add_to_cart_button')

}
function custom_add_to_cart_button_callback($hook){

do_action('woocommerce_before_add_to_cart_form')
echo '.woocommerce_button_wrapper_start().'

do_action('woocommerce_before_single_product_add_to_cart_button')
echo '.woocommerce_button_wrapper_start().'

do_action('woocommerce_before_single_product_add_to_cart_button')
echo '.woocommerce_button_wrapper_end().'

do_action('woocommerce_after_single_product_add_to_cart_button')
echo '.woocommerce_button_wrapper_end().'

}

add_action('custom_add_to_cart_button_callback')

Step 2: Add custom styles to your child theme’s style.css file:

Step 3: Use the Divi Builder to create a custom layout:

Navigate to Divi → Theme Builder.
Click Add Template → Add Custom Body → Build from Scratch.
Add the following modules:
- Image Module (product image),
- Woo Add to Cart Module under it.
Save your changes and assign the template to products.

Summary

You have a few options to move the “Add to Cart” button below the product image in WooCommerce with Divi theme:

Method	For whom	Benefits
PHP + Hooks	Advanced users	Full control, optimization
CSS	Beginners	Quick and safe
Divi Builder	All users	Create a custom layout

Note: This is just one way to move the “Add to Cart” button below the product image in WooCommerce with Divi theme. You can choose any of the methods mentioned above or use a different approach based on your needs and preferences.

Share on Facebook

Post on X

Save

Payment gateways

How to move “Add to cart” button under product image in Divi theme?