Moving the Add to Cart button directly under the product image is one of the highest-impact WooCommerce customizations you can make. The default WooCommerce layout places the button inside the product summary column, separated from the image by a vertical gap. Repositioning it under the image creates a natural visual flow, customers see the product, then immediately see the buy action. This guide covers every method available in 2026: pure CSS (updated for WooCommerce 9.x), PHP hooks, block theme approaches using the Product Collection block, and theme-specific solutions for Astra, Kadence, and GeneratePress. There is also a full FAQ section at the end for common edge cases.
Why Button Placement Under the Image Increases Conversions
Research on ecommerce UX consistently shows that proximity between the product image and the primary call-to-action reduces decision friction. When the Add to Cart button is tucked inside the product summary column, a shopper’s eye must travel away from the image to find it. Placing the button beneath the image keeps attention on the product while delivering the action trigger at the right moment.
- Reduced cognitive load: The image-to-button path is direct and predictable.
- Better mobile layout: On narrow screens the image stacks above content anyway, so having the button follow naturally works well.
- Cleaner visual hierarchy: Product details and reviews appear after the purchase action, not before it.
If you are also looking to improve what happens after a customer decides to buy, read our guide on WooCommerce upsells and cross-sells to maximize average order value once the cart is active.
Understanding WooCommerce Hook Priorities (2026 Update)
WooCommerce 8.x and 9.x introduced block-based product templates as the default for new installs, but the classic hook system remains fully supported. Before you choose a method, check which template type your site is using.
| Template Type | How to Identify | Best Method |
|---|---|---|
| Classic (PHP templates) | product page renders via woocommerce/templates/single-product.php | CSS or PHP hooks |
| Block template (FSE) | Appearance > Editor shows a Single Product template | Product Collection block reorder |
| Classic with block theme | Block theme active but no custom product template | CSS or child theme override |
The hooks relevant to this customization are:
woocommerce_before_single_product_summary, fires before the product summary column, inside the product image wrapperwoocommerce_single_product_summary, fires inside the summary column (default Add to Cart location is priority 30)woocommerce_after_single_product_summary, fires below both columns
Method 1: CSS Reorder (No Code Changes to PHP)
The safest and most update-proof approach for classic themes is CSS flexbox reordering. This does not touch WooCommerce templates or hooks, so it survives plugin updates cleanly. The technique works by converting the single-product layout to a flex column and assigning an order value to the Add to Cart form.
Updated CSS for WooCommerce 9.x
WooCommerce 9.x changed some wrapper class names and restructured the single product image container. The CSS below accounts for both old and new markup:
If you are not using GitHub Gists, here is the approach in plain text. Target the .woocommerce-product-gallery wrapper and convert it to a flex column. Then give the .cart form (which contains the Add to Cart button) an order value higher than the image elements but lower than the thumbnails you want below it. The exact selectors depend on your theme’s wrapper classes, which is why the theme-specific sections below are important.
Where to Add the CSS
- Appearance > Customize > Additional CSS: Works for any theme, but clears if you switch themes.
- Child theme style.css: The preferred location for theme-coupled CSS.
- A custom CSS plugin: WPCode or Simple Custom CSS are both reliable options.
Method 2: PHP Hooks in functions.php
The PHP hook method moves the Add to Cart button by removing it from its default position inside the product summary and re-adding it to the woocommerce_before_single_product_summary hook, which outputs inside the image wrapper section. Use a child theme’s functions.php for this, never edit the parent theme directly.
The core logic:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );, removes the default button from the summary columnadd_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 25 );, re-adds the button after the gallery image (priority 25 places it after the main image at priority 20 but before thumbnails at priority 30)
Important: Variable Products and Grouped Products
For variable products, the Add to Cart form includes the variation selector dropdowns. Moving the entire form under the image works, but you should test with a variable product after applying the hook. If the variation options break visually, you may need to adjust the hook priority or apply the change conditionally based on product type:
Method 3: Block Theme Approach (WooCommerce Product Collection Block)
If your site uses a block theme (Twenty Twenty-Four, Kadence Blocks-based themes, Blocksy, or any FSE theme) with WooCommerce’s block templates, the approach is different. WooCommerce 8.0+ ships with a block-based Single Product template that you can edit directly in the Site Editor.
Step-by-Step: Edit the Single Product Template
- Go to Appearance > Editor in your WordPress dashboard.
- Click Templates in the left sidebar.
- Look for Single Product. If it exists, click to edit it. If it does not exist, click Add New and choose Single Product.
- Inside the template, find the product layout area. You will typically see a Columns block containing the Product Image block and the Product Details column.
- Click on the Add to Cart block inside the Product Details column.
- Use the Block toolbar’s move up arrows or drag the block out of the Product Details column.
- Drop it into the Product Image column, below the Product Image block but above the Product Gallery Thumbnails block.
- Save the template.
Using the Product Template Block
If you are using the Product Collection block on shop or archive pages (introduced in WooCommerce 8.x as a replacement for the Products block), each product card inside the Product Template can be rearranged similarly. Open the Product Template, drag the Add to Cart button block to be the first item after the Product Image block in each card.
The block template approach is the most future-proof method for block themes. It avoids CSS specificity battles and hook priority conflicts, and the layout persists across WooCommerce updates as long as you do not overwrite your saved template.
Theme-Specific Instructions
CSS selectors and hook outputs vary by theme. The sections below give you the exact approach for three of the most popular WooCommerce themes in 2026.
Astra Theme
Astra wraps the product image in .ast-woo-single-product-summary and uses flex layout at specific breakpoints. The default Astra single product layout places the image and summary side by side using a two-column grid.
For Astra, the CSS reorder approach works well. Target .woocommerce div.product div.images with display: flex; flex-direction: column; and assign the .cart form an order: 2 after the main image (order 1) and before thumbnails (order 3).
If you use Astra Pro with its WooCommerce module, check under Appearance > Customize > WooCommerce > Single Product for a built-in button position setting. Astra Pro 4.x added a “Button position” option that handles this without custom code.
Kadence Theme
Kadence renders the single product with .product-single and uses its own image gallery structure under .woo-product-gallery. Kadence also has its own Add to Cart button styling under .kadence-woo-add-to-cart in some versions.
For Kadence, the PHP hook method is more reliable than pure CSS because Kadence’s gallery structure does not always respond predictably to flexbox reordering. Add the remove_action and add_action calls in your child theme’s functions.php, or install Kadence Child Theme via the Kadence Starter Templates plugin and add the code there.
Kadence Pro users: navigate to Customizer > WooCommerce > Product Layout and look for gallery and button arrangement controls. Kadence Pro 1.2+ includes a visual product layout editor that eliminates the need for custom code entirely.
GeneratePress Theme
GeneratePress uses a minimal, standards-compliant markup structure. The product image renders inside .woocommerce-product-gallery and the summary inside .summary.entry-summary. These are standard WooCommerce classes, which means the CSS reorder approach works cleanly with GeneratePress.
GeneratePress Premium users can use the Elements module to create a Hook element, set it to woocommerce_before_single_product_summary at priority 25, and output the Add to Cart template tag from there. This is a no-PHP-file approach that works entirely within the GeneratePress interface. Combine it with the CSS to remove the original button position.
Plugin-Based Method (No Code Required)
If you prefer not to write or maintain any custom code, these plugins handle Add to Cart button placement through a visual interface:
| Plugin | Free / Paid | Approach |
|---|---|---|
| WooCommerce Product Page Customizer | Freemium | Drag-and-drop product page layout builder |
| Elementor Pro (WooCommerce Builder) | Paid | Full single product template builder |
| Divi Builder (WooCommerce modules) | Paid | Drag-and-drop with Add to Cart module |
| Blocksy Companion | Free + Pro | Product page layout options in Customizer |
For stores where product page performance is critical, keep in mind that full page-builder plugins add JavaScript overhead on every product page. Measure page speed before and after installing any of these if your store already has a tight Core Web Vitals score. Our post on how AI is optimizing WooCommerce conversions covers performance-aware conversion strategies you should read alongside any layout change.
Compatibility: WooCommerce 9.x Changes to Watch
WooCommerce 9.0 (released mid-2024) and subsequent 9.x updates made these changes relevant to this customization:
- Product Gallery Block: The block version of the product gallery no longer uses
.woocommerce-product-gallery__imageas a direct child. CSS selectors targeting this class need an updated specificity path. - HPOS (High-Performance Order Storage): Does not affect front-end product page rendering. No changes needed for this feature specifically.
- Cart Fragment updates: After moving the Add to Cart button, ensure the mini cart fragment still updates correctly by testing an add-to-cart action after the customization is in place.
- Product Collection block vs Products shortcode: If you use the Products shortcode on archive pages and are also changing the single product template, verify both contexts separately, they render independently.
It is also worth ensuring your product structured data is intact after any layout change. Google reads product schema to generate rich snippets, and moving DOM elements can occasionally affect how schema parsers see the page. Read more in our guide to schema markup for WooCommerce products.
Testing Your Implementation
After applying any of the methods above, run through this checklist before considering the change live:
- Simple product: Visit a simple product page. The Add to Cart button should appear below the main product image and above or below the gallery thumbnails depending on your CSS order values.
- Variable product: Visit a variable product. Confirm the variation dropdowns (size, color, etc.) are still present and functional. Adding to cart should work after selecting a variation.
- Grouped product: If your store uses grouped products, test one. The grouped product form is different from the simple product form and may need separate handling.
- Mobile view: Use browser DevTools to simulate a 375px screen width. WooCommerce stacks the layout vertically on mobile, and the button position should remain logical.
- AJAX add to cart: Enable WooCommerce’s AJAX add to cart setting (WooCommerce > Settings > Products > Enable AJAX add to cart buttons on archives) and verify the button still triggers the AJAX action correctly after your changes.
- Cart page: Add a product and verify the cart count in the header updates correctly.
If you have a wishlist plugin installed, also check that the wishlist button (if it appeared near the Add to Cart button) is still rendering correctly. See our WooCommerce wishlist setup guide for details on wishlist button placement best practices.
Optimizing Product Page Structure Beyond the Button
Button placement is one piece of product page optimization. Once you have the Add to Cart button under the image, consider these additional improvements to your product page structure:
- Product page breadcrumbs: Help users understand where they are in your catalog and reduce bounce from wrong product pages.
- SKU display: Showing the SKU on the product page helps customers reference products when contacting support. Our guide on how to show SKU on the WooCommerce product page walks through several display methods.
- Product tabs: The Description, Additional Information, and Reviews tabs can be reordered or renamed using WooCommerce hooks to prioritize what customers find most useful.
- Related products: The Related Products section at the bottom of the product page is a natural place for cross-sell links. Pair it with structured upsell offers.
Frequently Asked Questions
Will moving the Add to Cart button affect SEO?
Moving the button position does not directly affect SEO rankings. It may indirectly improve performance metrics if it leads to more conversions and lower bounce rates. Ensure your product structured data remains intact after the change.
The button moved but the styling looks broken. What do I do?
This usually means the button is inheriting CSS from the summary column that does not apply in the image column context. Inspect the button in DevTools, identify the conflicting styles, and add overrides. Common fixes: reset width, set margin to 0, and adjust display properties.
Does this work with WooCommerce Subscriptions?
Yes. Subscription products use the same Add to Cart template hooks. Test a subscription product after applying the change to confirm the purchase button and subscription notice text both render correctly under the image.
Can I move the button under the image only on mobile?
Yes. Wrap your CSS reorder rules inside a @media (max-width: 768px) block. On desktop the button stays in the default summary column; on mobile it moves under the image.
Will the change revert after a WooCommerce update?
Not if you used Additional CSS, a child theme, or a dedicated CSS plugin. Changes to parent theme template files will be overwritten on update. Always use a child theme for any WooCommerce customization that touches PHP template files.
Summary: Choosing the Right Method
| Your Situation | Recommended Method |
|---|---|
| Classic theme, no coding | CSS in Additional CSS or WPCode |
| Classic theme, comfortable with PHP | PHP hooks in child theme functions.php |
| Block theme with FSE support | Block template editor in Appearance > Editor |
| Astra theme | Astra Pro layout settings or CSS reorder |
| Kadence theme | PHP hooks or Kadence Pro product layout |
| GeneratePress theme | GeneratePress Elements hook or CSS reorder |
| No code at all | WooCommerce page builder plugin |
The Add to Cart button position is a small change with measurable impact on purchase intent signaling. Pick the method that matches your technical setup and test thoroughly with all your product types. If you need expert help customizing your WooCommerce product pages beyond button placement, our team at Woosell Services handles WooCommerce development projects of all scopes.
