Getting WooCommerce installed and your products listed is one thing. Getting visitors to actually click Add to cart is another. The default WooCommerce product page layout is functional, but it’s built to cover every use case — not to maximise conversions for your specific store. A few deliberate structural changes can make a meaningful difference to how many visitors become buyers.
This tutorial walks through five practical steps using WordPress 6.9’s Site Editor and a couple of small code additions. No page builder required.
Before you start — what you need in place
Before making any changes, confirm you have:
- WooCommerce installed and active with at least one product set up
- WordPress 6.9 running with a block-compatible theme
- A backup of your site — any time you edit templates, a recent backup is good insurance
If you’re on a classic theme that doesn’t support full site editing, some of the Site Editor steps below won’t apply. The CSS and code snippets will still work regardless of theme type.
Step 1 — Edit your product template in the Site Editor
Go to Appearance → Editor → Templates and look for Single Product in the list. Before making any changes, duplicate the template first — hover over it, click the three-dot menu, and select Duplicate. Rename the duplicate something like “Single Product — Custom” and work from that. This gives you a clean fallback if anything goes wrong.
Step 2 — Improve the product image gallery
The product image gallery is the single most powerful conversion element on a product page. In the Site Editor, click on the Product Image Gallery block. Check that the main image is set to a large display size. Two settings worth enabling:
- Zoom on hover — lets buyers get a closer look without clicking through
- Thumbnail navigation — displays additional images as clickable thumbnails below the main image
The standard two-column layout — image left, details right — outperforms single-column layouts on desktop for most product types.
Step 3 — Strengthen the add-to-cart section
In the Site Editor, locate the Add to Cart block and the Product Price block. Group them together with the short product description using the Group block — select all three, right-click, and choose Group.
Below the Add to Cart button, add a Custom HTML block and paste in the following trust badge markup:
<!-- Trust badge row — customise text to match your store policies -->
<div class="kc-trust-badges">
<span>✔ Free shipping over $100</span>
<span>✔ 30-day returns</span>
<span>✔ Secure checkout</span>
</div>
Then add this to your Additional CSS:
/* Trust badge row below add to cart */
.kc-trust-badges {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 0.85rem;
color: #555;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e5e5;
}
.kc-trust-badges span {
display: flex;
align-items: center;
gap: 4px;
}Step 4 — Add social proof below the fold
WooCommerce includes a Product Reviews block — make sure it’s present in your template and positioned clearly below the product details. If reviews are disabled, go to WooCommerce → Settings → Products and enable them.
Below the reviews, check that the Related Products block is active. In the block settings, you can control how many related products display — three to four is enough for most stores.
Step 5 — Check the mobile layout
The following CSS adds a sticky Add to cart bar on mobile that keeps the button accessible as the visitor scrolls:
/* Sticky add to cart on mobile */
@media (max-width: 768px) {
.woocommerce-variation-add-to-cart,
.cart {
position: sticky;
bottom: 0;
background: #fff;
padding: 12px 16px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
z-index: 100;
margin: 0 -16px;
}
}Test this on your actual phone before publishing — the sticky behaviour can interact differently with some themes.
Testing before you publish
WordPress 6.9’s Site Editor includes a Preview button that lets you check your template changes across desktop, tablet, and mobile before saving. Use it after each major change rather than at the end.
Once you’re ready to save, your changes will apply to every single product page on your store immediately. It’s worth doing a quick check on two or three different products to make sure nothing looks unexpected.
