WooCommerce Product Page Design: A Checklist for Pages That Sell

A good WooCommerce product page answers a shopper’s questions in the order they ask them. What is it? Is it right for me? What will it cost in total? When will it arrive? Can I trust this store? And it makes adding to cart easy, especially on a phone. In practice, that means clear photos, a visible price, simple variation choices, a prominent add-to-cart button, delivery and returns information next to that button, honest reviews, a description that covers the details, and a page that loads fast without jumping around.

Below is a checklist you can go through product by product, followed by three ways to change the WooCommerce product page layout: with hooks, with the block editor, or with a theme builder.

How a WooCommerce product page is put together

A default WooCommerce single product page has two parts. The first screen (above the fold) shows the image gallery on one side and the product summary on the other: title, rating, price, short description, add-to-cart form and product meta (SKU, categories, tags). Below that come the tabs (Description, Additional information, Reviews), then upsells, then related products.

The goal is to get everything a shopper needs to decide into that first screen and the area just below it, then back it up further down. On phones, the summary sits below the gallery, so the order of elements matters even more.

The product page checklist

1. Photos that answer questions

• Show several angles, a close-up of the material or detail, and at least one photo of the product in use or at scale.
• Keep the same aspect ratio and background across the catalog, so category grids look tidy and the gallery doesn’t change height between photos.
• Turn on zoom or a full-screen lightbox. Most WooCommerce themes support both.
• Write descriptive alt text (“black leather Chelsea boot, side view”, not “IMG_2041”).
• Remember that the main image is usually the page’s Largest Contentful Paint. Compress it, serve it as WebP or AVIF, and never lazy-load it.

2. A clear title and a short description that sells

The title should say what the product is, using the words shoppers search for. Use the short description, which sits next to the price, for three or four lines on the key benefits and facts. Leave the long story for the Description tab.

3. Price clarity

Show the price near the title, with the regular price crossed out only when there really is a sale. Be consistent about tax: if you show prices including tax in the shop, do the same on product pages. For products sold by weight or volume, a unit price helps shoppers compare.

4. Variations without friction

Dropdowns are the default for variable products, and they are the weakest option for color and size. Visual swatches show the choice right away. Switching the gallery to the selected variation’s image confirms it. Unavailable combinations should be clearly disabled, not discovered at the error message. Put a size guide link right next to the size selector. If your theme doesn’t have these features, you’ll need a plugin. XStore includes color and image swatches and a variation gallery out of the box.

5. An add-to-cart button nobody can miss

• Use a color that contrasts with the rest of the page and that you use for nothing else.
• On phones, make sure the button is reachable without a long scroll. For long pages, a sticky add-to-cart bar that appears as the shopper scrolls keeps it close.
• For stores where most orders are a single item, a “Buy now” button that goes straight to checkout saves a step.

6. Stock, delivery and returns next to the button

Uncertainty about delivery stops many shoppers at the last moment. Right under the add-to-cart button, show:

• Stock status. WooCommerce can show it automatically. Under WooCommerce → Settings → Products → Inventory, the stock display format can show the exact quantity, only a low-stock warning, or nothing.
• A delivery estimate and the shipping cost, or how far the shopper is from free shipping.
• A link to your returns policy, summed up in one line (“Free returns within 30 days”, if that is your policy).

7. Honest social proof

Show the star rating and review count near the title, and link it to the reviews. In Settings → Products, WooCommerce can add a “verified owner” label to reviews from real customers, and can limit reviews to verified owners only. Use only real data: invented “23 people are viewing this” counters and fake countdowns damage trust once noticed. In some markets, for example in the EU, false urgency claims can also break consumer-protection law.

8. A description that covers the details

Write your own copy instead of pasting the manufacturer’s text, which appears on dozens of other sites. Cover who the product is for, what’s in the box, dimensions and materials, care instructions and the questions customer support hears most often. Product attributes and weight and dimensions fill the “Additional information” tab automatically, so enter them once and they appear as a tidy specs table.

9. Tabs or accordions that work on mobile

Horizontal tabs are fine on desktop. On phones, they often turn into tiny links that people miss. Accordions or a single long page with clear headings usually work better. Whatever you choose, the review count should be visible without opening anything.

10. Relevant extras: upsells, bundles and “frequently bought together”

The product page is the right place for a better alternative (an upsell) and for items that complete the purchase. Keep it to a few well-chosen suggestions. Our guides on WooCommerce upsells and cross-sells and product bundles explain the options. For offers based on rules, such as suggestions by category or cart contents, SalesMax adds Frequently Bought Together, Smart Recommendations and Product Add-Ons to the product page of any WooCommerce theme.

11. Speed and a stable layout

Product pages carry the most images and scripts in a store: gallery, zoom, swatches, review widgets, recommendation sliders. Give the gallery and any late-loading sections fixed dimensions so nothing jumps (CLS). Keep scripts lean so tapping a swatch responds instantly (INP). Test a typical product page with the free FlashMax speed test. For a deeper look, see our WooCommerce speed optimization guide.

12. Structured data and on-page SEO

WooCommerce adds Product structured data (name, price, availability and rating) to product pages automatically, and SEO plugins can extend it. Check a few pages with Google’s Rich Results Test. Beyond that: write a unique description, use a short descriptive URL slug, and link to the product from its category and from related content. Our WordPress SEO beginner’s guide covers the basics.

13. Accessibility basics

Alt text on every image, buttons that are real buttons with clear labels, enough color contrast on the price and button text, visible keyboard focus, and swatches that announce their color name to screen readers. These help everyone, not only shoppers who use assistive technology.

14. A plan for out-of-stock products

Don’t send a visitor to a dead end. Show when the product will be back if you know, offer a back-in-stock notification, and display good alternatives. If a product is permanently discontinued, redirect it to the closest replacement or its category.

How to change the WooCommerce product page layout

Option 1: classic themes, with hooks

In classic themes, the product summary is built from functions attached to the woocommerce_single_product_summary hook, in order of priority: title (5), rating (10), price (10), short description (20), add to cart (30), meta (40) and sharing (50). You can move a block by removing it and adding it back at a different priority, in your child theme’s functions.php:

// Move the short description below the add-to-cart button
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 35 );

For bigger changes, you can copy WooCommerce template files such as single-product/price.php into a woocommerce folder in your child theme and edit them there. You will need to check those copies after major WooCommerce updates. Our complete guide to customizing WooCommerce covers this in more detail.

Option 2: block themes, with the Site Editor

With a block theme, go to Appearance → Editor → Templates → Single Product. The page is built from WooCommerce blocks (product image gallery, price, add-to-cart form, details, related products) that you can rearrange without code. You can also create custom templates for specific categories.

Option 3: a theme with a product page builder

If you want full control without code and without a separate builder license, choose a theme that includes one. XStore has a built-in Single Product Builder and ready-made product page layouts, such as a vertical gallery, a sticky description, tabs next to the image and accordion tabs. It also has sticky add-to-cart and buy-now options, and it doesn’t require Elementor Pro. XStore costs $59 as a one-time purchase with lifetime updates, and you can see these layouts in action in the 150+ ready-made demo stores.

Common product page mistakes

• Hiding shipping costs until checkout.
• Copying the manufacturer’s description word for word.
• Auto-rotating image sliders that move while the shopper is reading.
• Showing several pop-ups (newsletter, discount, cookie notice, chat) on the first screen.
• Putting reviews in a tab with no rating or review count near the title.
• Small photos with no zoom, especially for clothing, furniture and jewelry.
• Long dropdowns for color and size on mobile.

Measure, then improve

Treat the product page as something you keep improving. With Google Analytics 4 ecommerce tracking (our Google Tag Manager guide helps with the setup), compare product views with add-to-cart events for your top products. A product with plenty of views but few add-to-carts is the first one to look at. Change one element at a time and compare equal periods.

For a quick outside view, run the free SalesMax AI store scan. It opens a product page like a shopper would, adds an item to the cart and follows it to checkout, then reports which selling moments are missing. It needs no signup and reads only public pages.

FAQ

What should a WooCommerce product page include?

At least: several good photos with zoom, a clear title, price, a short benefit-focused description, easy variation selection, a prominent add-to-cart button, stock and delivery information, a returns policy link, reviews, a detailed description with specifications, and a few relevant upsells or related products.

How do I customize the WooCommerce product page without code?

With a block theme, edit the Single Product template in the Site Editor. With a classic theme, use a theme that includes a product page builder, such as XStore, or a page builder that supports WooCommerce templates.

What size should WooCommerce product images be?

There is no single right number. Upload originals large enough for your theme’s largest display and for zoom, keep the same aspect ratio across products, and let WordPress create the smaller sizes. Then make sure the pages serve compressed WebP or AVIF versions, not the full-size originals.

Should I use tabs or one long product page?

Tabs work well on desktop. On mobile, accordions or a long page with clear headings are usually easier to use. Whatever you choose, keep the rating and the key facts visible without any clicks.

How do I add a size guide to WooCommerce products?

Many store themes include a size guide feature. If yours doesn’t, add a link next to the size selector that opens a pop-up or a page with the size chart. Keep it one tap away, so the shopper doesn’t leave the product.

Does product page speed affect sales?

Yes. The product page is where the buying decision happens. A slow gallery, a layout that jumps or a swatch that lags makes shoppers hesitate. Test your product pages regularly on a phone profile.