How to Add WooCommerce Add to Cart Button in Divi Under the Image
Moving the Add to Cart button underneath the product image sounds like a five-minute job. On a Divi-powered WooCommerce store it usually is, but only once you understand which layer you are actually editing. Divi wraps the WooCommerce product page in its own module structure, and that wrapper behaves differently depending on whether you are using the classic Divi Builder, the Divi Theme Builder, or Divi 5’s new WooCommerce modules. Get the wrong one and your changes either do not save or only apply to a single product instead of the whole catalog.
This guide walks through every practical method: drag-and-drop rearranging inside the Divi Builder, the Theme Builder approach for changing every product page at once, custom CSS for people who want pixel-level control, and a PHP hook for developers who would rather skip Divi’s visual layer entirely. It also covers the mistakes that trip people up most often, because the button moving on desktop and then vanishing on mobile is a far more common complaint than most tutorials admit.
Why the Default Layout Puts the Button Beside the Image
WooCommerce’s stock single-product template arranges the gallery on one side and a summary column, price, short description, variation selectors, and the Add to Cart form, on the other. Divi inherits that structure through its WooCommerce Product Description and WooCommerce Add to Cart modules, which sit inside a two-column layout by default. Nothing is broken here. It is simply the traditional retail layout that assumes a wide viewport where side-by-side columns make sense.
Stacking the button directly under the image instead changes the reading order. A shopper looks at the photo, then immediately sees the price and purchase action, rather than scanning sideways to find it. Stores selling a small number of high-consideration products, apparel with size charts, or anything where the image needs more visual weight tend to prefer this vertical flow. It also happens to match how most mobile themes already render checkout pages, so making desktop match mobile removes an inconsistency shoppers notice even if they cannot name it.
Before You Start
Three things need to be true before any of the methods below will work cleanly.
- Divi and WooCommerce are both active, and your theme is Divi or a Divi child theme rather than a different theme with the Divi Builder plugin bolted on. The module names referenced here assume the full Divi theme.
- You are editing on a child theme, or at minimum adding custom CSS through a location that survives theme updates: Divi Theme Options > General > Custom CSS, or the WordPress Customizer’s Additional CSS panel.
- You have at least one published product with a variation or two, since the Add to Cart form renders differently for simple versus variable products and you want to confirm the change holds for both.
Method 1: Drag-and-Drop in the Divi Visual Builder
This is the fastest route for a single product page, and it is entirely code-free.
Step 1: Enable Divi Builder on the Product
Open the product from Products in your dashboard, or navigate to the live product page and click Enable Visual Builder in the top admin bar. If the product was created before Divi was activated, you may see a prompt to use Divi Builder rather than the default WooCommerce editor. Accept it.
Step 2: Locate the Product Row
Inside the builder, find the row containing the WooCommerce Images module and the WooCommerce Add to Cart (or WooCommerce Product Description, depending on your Divi version) module. On most default layouts this is a two-column row: images in the left column, the purchase form and description in the right.
Step 3: Restructure the Row
You have two workable approaches here. The first is to change the row’s column structure from two columns to one, then stack the modules vertically inside it in the order you want: image module first, Add to Cart module second. The second approach keeps the two-column structure but moves the Add to Cart module out of the right column and into a new row directly beneath the image column, spanning full width.
The second approach usually looks cleaner because it lets the button span the full width under the image rather than being squeezed into a narrow single column. To do it, add a new one-column row directly below the existing row, then drag the WooCommerce Add to Cart module into that new row. Divi’s drag handles appear when you hover over a module’s icon in the top-left corner; click and hold, then drop it into the new row.
Step 4: Adjust Spacing
With the button now sitting under the image, the default top margin often looks either too tight or too loose depending on your theme’s spacing scale. Select the Add to Cart module, go to the Design tab, and adjust Spacing under the Sizing section. Twenty to thirty pixels of top margin is a reasonable starting point; check it against your image’s bottom padding so the two do not double up.
Step 5: Save and Preview
Click Save in the builder, then exit and view the live page in a fresh browser tab, not the builder’s preview, since the builder’s own chrome can mask layout issues that appear once real page CSS loads.
Method 2: Divi Theme Builder for a Site-Wide Change
Method 1 only touches the one product you edited. If you sell more than a handful of products, repeating that process manually does not scale, and it is easy to end up with half your catalog matching the new layout and half still on the old one. The Theme Builder solves this by letting you define a single dynamic template that every product page pulls from.
Step 1: Open the Theme Builder
Go to Divi > Theme Builder from the WordPress dashboard sidebar.
Step 2: Create or Edit the Product Template
If you already have a custom template assigned to WooCommerce products, click the pencil icon to edit it. If not, click Add New Template, set it to apply to All Products (or a specific category if you only want this layout on certain products), and add a Dynamic Content template for the body.
Step 3: Rebuild the Product Layout with Dynamic Modules
Inside the dynamic template, use the WooCommerce module category to insert Product Images and Add to Cart as separate modules, in the order you want them to appear: image first, button beneath it. Because this is a template rather than a real product, the modules pull data dynamically from whichever product a visitor is currently viewing.
Step 4: Save and Publish the Template
Save the template, then confirm at the top of the Theme Builder that it is set to Publish rather than Draft. Visit two or three different products on the live site to confirm the change applied across the catalog, not just the one you were testing with.
The Theme Builder route takes longer to set up the first time, roughly fifteen minutes versus five for a single product, but it means every future product you add automatically inherits the same layout without additional work.
Method 3: Custom CSS
If dragging modules around in the builder feels fiddly, or if you want the change to apply without touching Divi’s module structure at all, CSS is the more surgical option. It works on top of whatever layout you already have.
.woocommerce div.product .images { display: block; width: 100%; }
.woocommerce div.product .summary { display: flex; flex-direction: column; width: 100%; }
.woocommerce div.product form.cart { order: 1; margin-top: 24px; }
.woocommerce div.product .summary .price { order: 0; }
.woocommerce div.product .summary .product_title { order: 0; }What this actually does: it turns off the side-by-side column behavior on the images and summary blocks, forcing both to run full width and stack. Then, inside the summary block, it uses flexbox’s order property to push the cart form (which contains the Add to Cart button) below the title and price, and gives it breathing room with a top margin. The order property is doing the real work here; without it, the button would just sit wherever it naturally falls in the markup, which is not necessarily right after the image.
Paste this into Divi > Theme Options > General > Custom CSS, or Appearance > Customize > Additional CSS if you prefer working in the Customizer. Either location keeps the CSS safe from theme updates, unlike editing style.css directly.
A Note on Specificity
Divi sometimes generates its own inline styles or higher-specificity selectors for modules built through the visual builder, particularly for spacing and column widths. If the CSS above does not visibly change anything, open your browser’s inspector, click the Add to Cart button, and check the Styles panel for rules that are overriding yours. You may need to add !important to specific properties, or increase specificity by prefixing selectors with your body class, rather than sprinkling !important across the whole block.
Method 4: PHP Hook (For Developers Who Skip Divi’s Module Wrapper)
If your product pages were built with plain WooCommerce templates rather than Divi’s WooCommerce modules, you can reorder the button using WooCommerce’s own action hooks instead of touching Divi at all. This is the most durable option because it survives Divi Builder changes and even a full Divi to non-Divi theme migration.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 25 );The first line removes the Add to Cart form from its default position inside the product summary column. The second line re-adds it to the hook that fires before the summary column starts, immediately after the product gallery. Add this to a site-specific plugin or your child theme’s functions.php, never the parent Divi theme’s functions.php, since a theme update will overwrite it.
This method only applies if the page is rendering through WooCommerce’s default template hooks. If you built the product page entirely with Divi’s WooCommerce modules, as described in Methods 1 and 2, this hook has nothing to act on because Divi bypasses the default template hooks and renders its own module markup instead. Check which situation applies to you before spending time on this approach.
Common Mistakes
A handful of issues account for most of the support requests around this exact customization.
Editing the wrong product’s layout and assuming it applies globally. Method 1 changes are local to that one product unless you also apply the Theme Builder template. Test at least two different products before concluding the change worked.
Variable products breaking the flow. Products with size or color variations render an extra layer inside the cart form, the variation dropdowns, and if your CSS forces a fixed height or hides overflow on the summary block, that extra content can get clipped. Always test the CSS or module rearrangement against a variable product, not just a simple one.
Page caching hiding the change. If you are using a caching plugin or your host caches pages at the server level, a saved change in the builder will not show up until the cache clears. Purge your cache after every save while testing, or use an incognito window to bypass a browser-level cache.
Forgetting mobile breakpoints entirely. Divi’s responsive controls apply per-breakpoint by default when you edit spacing or visibility in the builder, but custom CSS you add manually applies everywhere unless you wrap it in a media query. A layout that looks perfect on desktop can end up with the button squeezed awkwardly on a 375px viewport if you never checked it there.
Testing Responsiveness Properly
Divi’s builder includes a responsive preview toggle in the bottom toolbar that switches between desktop, tablet, and phone views. Use it, but do not treat it as the final word. The builder’s preview runs inside an iframe that does not always match real device rendering exactly, particularly for flexbox order changes made through custom CSS. After confirming the layout looks right in the builder, load the live page on an actual phone, or at minimum in your browser’s device toolbar with the viewport set to 390 pixels wide, and confirm the button is fully visible, tappable, and not overlapping the price or variation selectors.
Accessibility and Keyboard Navigation
Reordering elements visually does not automatically reorder them in the underlying HTML unless you used Method 1, 2, or 4. The CSS approach in Method 3 only changes visual order through flexbox; a screen reader or a user tabbing through the page with a keyboard still encounters the elements in their original source order. For most stores this is a minor issue since the button and the price are close together either way, but if accessibility compliance matters to your business, or you sell to government or education customers with WCAG requirements, prefer Method 1, 2, or 4, all of which physically move the markup rather than just repainting it.
Whichever method you use, check that the button still has a visible focus outline when tabbed to. Some Divi color schemes and custom button styling remove the default browser focus ring without replacing it with anything, which leaves keyboard users with no way to tell where they are on the page. A simple two-pixel outline in a contrasting color, added through the module’s design settings or a small CSS rule targeting :focus-visible, closes that gap without affecting the visual design for mouse users.
Frequently Asked Questions
Does this work with Divi 5?
Yes, though the module names and interface have shifted slightly. Divi 5 reorganizes some WooCommerce modules and changes how the visual builder’s layer panel displays nested elements, but the underlying approach, moving or restructuring the row containing the Add to Cart module, is the same. If you are on Divi 5 and cannot find a module referenced above, check the WooCommerce category in the module library since naming has changed for a few of them.
Will this affect how variations display?
No, as long as you move the entire Add to Cart module rather than trying to split the variation dropdowns from the button itself. WooCommerce renders variation selectors and the Add to Cart button as one connected form; separating them with CSS or module rearrangement can break the price update behavior that happens when a shopper picks a variation.
Can I use this alongside a quick-view or ajax add-to-cart plugin?
Generally yes. Most ajax add-to-cart plugins hook into WooCommerce’s existing button markup rather than depending on its position in the DOM, so moving it under the image should not interfere. Test after installing any such plugin, since a few older ones do assume a specific layout structure.
What if the CSS approach and the builder approach conflict?
Pick one. Applying both a Theme Builder restructure and custom CSS that targets the old layout at the same time is the most common cause of buttons appearing twice or in the wrong place. If you switch from CSS to the Theme Builder method, remove the earlier CSS rules rather than layering new ones on top.
Does moving the button change conversion rates?
It can, but not in a way you can predict without testing on your own traffic. A vertical layout tends to help on narrow, image-heavy stores, and it rarely hurts, but the effect size varies enough by niche that guessing is not useful. If your store has meaningful traffic volume, run the change for two to four weeks and compare add-to-cart rate before and after rather than assuming either layout is universally better.
Getting the Layout to Hold
Whichever method you pick, the real test is not how it looks in the builder. It is how it looks after a cache purge, on a phone, on a variable product with three attributes selected. Divi gives you enough flexibility that almost any layout is achievable, the harder part is making sure it is consistent across every product and every screen size rather than just the one you happened to be looking at when you made the change.
For a broader look at customizing product page layout beyond this one adjustment, see our guide on WooCommerce single product page examples, and if you are working with product attributes and variations more generally, the guide on changing the order of product attributes in WooCommerce covers related ground.
