A product page has one job: give a shopper enough confidence to add the item to the cart. Most problems we find in reviews are not about visual style; they are about missing or hard-to-find information.
Price, availability and delivery — above the fold
On a phone, the first screen should answer three questions: how much, is it in stock, and when will it arrive. Show the full price including any variation price changes, make stock status visible, and summarise shipping cost and timing near the Add to Cart button rather than only on a separate policy page.
An add-to-cart button that is impossible to miss
- Use one primary button style per page, with strong colour contrast against the background.
- Keep the label specific: “Add to cart” or “Pre-order”, not “Submit”.
- On long mobile pages, consider a sticky add-to-cart bar so the action stays reachable after the description.
- Make disabled states obvious and explain why — for example, “Choose a size first”.
WCAG 2.2 success criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels for pointer targets, with some exceptions (W3C). That is a floor, not a goal — primary buttons on mobile should be comfortably larger.
If you want more control over the button itself — styling, direct checkout, quantity limits or a floating mobile button — that is what our Add to Cart Button Master plugin is for.
Images that answer questions
Good product photography shows scale, texture and the product in use, not just the same angle five times. Add descriptive alt text that says what the image shows — “Black crossbody bag worn on the hip, front zip open” — rather than repeating the product name. Make sure the gallery works with swipe on touch screens and with the keyboard.
Variations without surprises
- Show the price and stock for the selected variation as soon as it is chosen.
- Use clear labels and, for colours, a text name as well as a swatch.
- Avoid preselecting a variation the shopper did not choose if it changes the price.
Reassurance close to the decision
Returns, warranty and secure payment information work best right next to the button, phrased briefly and linked to the full policy. Keep these statements accurate — our article on honest urgency explains why.
Descriptions people can scan
Few shoppers read a product description top to bottom. Lead with the two or three facts that decide the purchase — size, compatibility, material, what is in the box — then add detail below. Use short paragraphs and lists, and put specifications in a table rather than a paragraph. If a question comes up repeatedly in customer emails, the answer belongs on the product page.
Reviews and questions
Real customer reviews are among the most persuasive content a product page can have, which is exactly why they must be genuine. Show reviews as they are, including critical ones, reply to them where useful, and never seed pages with invented feedback. If a product has no reviews yet, say nothing rather than filling the space.
Speed is part of usability
A product page that jumps around while images load, or that responds slowly to a tap on a variation, feels broken even when it technically works. Reserve space for images with width and height attributes, avoid injecting banners above content after load, and keep scripts lean. Our WooCommerce speed guide covers the details.
A five-minute review
- Open a best-selling product on your phone.
- Without scrolling, can you see the price, stock status and delivery summary?
- Pick a variation: does everything update correctly?
- Add to cart with your thumb: is it easy?
- Check the images with a screen reader or by reading their alt text.
Planning a redesign or a new store? See our eCommerce and website development pages.
