A shopper lands on a product page needing five answers: what this is, whether it suits them, what it costs in total, when it arrives, and what happens if it is wrong. Good product page design gives those answers in that order, on a phone, without making anyone hunt.
The sections below walk the page from top to bottom. Each one says what belongs there, what usually goes wrong, and where you will need a developer.
The first screen carries the decision
On a phone the first screen holds a name, a price, one image and little else. That is enough if those are right and everything else is one scroll away.
- The name in plain words, including what separates this item from its neighbors: size, material, model number.
- The price beside the name, with what it covers (per item, per pack, tax included or not).
- A rating summary that jumps to the reviews when tapped.
- Availability: in stock, low stock, or the date a backorder ships.
- The buy button, visible without scrolling on a desktop and within one thumb movement on a phone. On long pages, a bar with the price and button that sticks to the bottom of the screen after the shopper scrolls past the original is a dependable fix.
What does not belong here: a promotional banner above the product, a newsletter popup that fires on arrival, or a cookie notice that covers the button.
Images do the work of a shop assistant
Online, nobody can pick the thing up. The gallery has to stand in for that.
- Show several angles on a plain background, plus one image that gives scale: in a hand, on a person, in a room.
- Add close-ups of whatever a customer would touch or inspect in a shop: the fabric, the ports, the stitching, the label.
- Switch the image when a color or finish is selected. WooCommerce lets you set an image on each variation for this.
- Offer a full-screen view that responds to pinch on a phone.
- Use video only where it shows something a photo cannot, such as movement, sound or assembly. Never autoplay it with sound.
- Keep one aspect ratio across the gallery so the page does not jump between images.
Write alt text that describes the view ("navy canvas weekender, side pocket open"). It serves shoppers using screen readers and helps the images appear in image search.
Price and variants without surprises
If the price depends on the options, show the range first and the exact price the moment the options are chosen. Nobody should have to add an item to the cart to find out what it costs.
When there are only a few options, show them as buttons or swatches so every choice is visible at once. Keep dropdowns for long lists. A combination that is sold out should look unavailable before the click, not produce an error after it. Stock messages should follow the selected variant.
Put the selected variant in the link where you can, so that an ad for the green one lands on the green one. WooCommerce reads attributes from the query string, for example ?attribute_pa_color=green.
A sale price needs the regular price next to it, and volume discounts read best as a small table. Rules on how prices are displayed (tax, unit prices, the reference price for a discount) differ by country. Check what applies where you sell before you design the price block.
Delivery and returns beside the button
Delivery cost, delivery time and the return policy are usually the hardest answers to find on a product page. The shipping charge should not be a surprise saved for the checkout. Two or three short lines directly under the buy button cover it:
- when the order ships or arrives,
- what delivery costs, or the order value above which it is free,
- how long they have to return the item and who pays for the return.
Link each line to the full policy. Write only what you can keep to on a bad week. If terms differ by country, show the ones for the visitor's country or the shortest summary that is true for everyone.
Descriptions for two kinds of reader
Some shoppers scan and some research. Serve both by layering the text. Open with two or three sentences on who the product is for and what it does for them. Follow with a short list of the facts people compare on. Then give the full specification as a table: dimensions, weight, materials, compatibility, what is in the box, care and warranty.
Put the size guide next to the size selector, not in a tab at the bottom. Tabs and accordions are fine for long sections as long as the text is in the page and not fetched after a click.
Write the text yourself. The manufacturer's description is on every other reseller's page as well, which gives a search engine no reason to prefer yours and gives the shopper nothing they have not read already.
Reviews and other proof
Reviews work when they look unedited. Show the average and the spread of ratings, let shoppers sort by lowest and filter by reviews with photos, and reply to the critical ones in public. A page with nothing but five stars reads as curated.
Mark reviews from people who bought the item. WooCommerce can label verified owners and can limit reviewing to them, under WooCommerce > Settings > Products. Never write, buy or import reviews you cannot trace to a customer. Many countries treat fake reviews as a consumer protection offense, so confirm the rules for your market.
Beyond reviews, the proof that counts is specific: a named guarantee, a real address and phone number, and customer photos. A row of generic security badges adds clutter without adding trust.
Speed is part of the design
On most product pages the main image is the largest thing on the first screen, which makes it the element that Largest Contentful Paint measures. Four habits protect it:
- Serve the image at the size it is displayed, in WebP or AVIF.
- Do not lazy-load the first gallery image. Lazy-load the rest, and give the first one
fetchpriority="high". - Set
widthandheighton every image so the layout holds still while they load. - Delay scripts that serve the lower half of the page: review widgets, chat, recommendation carousels.
Test on a mid-range phone over mobile data, not on the office laptop. Google's guide to optimizing Largest Contentful Paint explains the reasoning, and our article on WordPress image optimization covers formats and sizes.
Structured data that matches the page
Product structured data restates the name, price, availability and rating in a form search engines can parse. It makes the page eligible for richer results that show price, stock and stars. WooCommerce outputs basic Product markup on its own, SEO plugins extend it, and a custom store has to generate it. A minimal version in JSON-LD:
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Canvas weekender bag",
"image": ["https://example.com/images/weekender-front.jpg"],
"description": "Waxed canvas weekender with a leather base.",
"sku": "WKD-NVY-01",
"brand": { "@type": "Brand", "name": "Example Co" },
"offers": {
"@type": "Offer",
"url": "https://example.com/product/canvas-weekender/",
"priceCurrency": "USD",
"price": "129.00",
"availability": "https://schema.org/InStock"
}
}The values must match what the shopper sees, and they must change when the price or stock changes. Add rating markup only when the reviews are on the page. Google's product structured data documentation also covers variants, shipping details and return policies. Run the finished page through the Rich Results Test before you rely on it.
What to fix first, and what needs a developer
Work in the order the shopper meets the page: the first screen on a phone, the delivery and returns lines, the images, the reviews, then speed and structured data. Photography, copy and policies are yours to fix and cost nothing in code. A sticky buy bar, swatches that switch images, delivery estimates by country, performance work and custom markup are development tasks, and they are the kind of work we do on eCommerce store projects. If the layout itself is the problem, start with UI and UX design. On an existing WordPress store, most of it falls under WooCommerce customization.
Once the product page does its job, the next place shoppers drop out is the checkout. We cover that in eight checkout changes for WooCommerce.
Frequently asked questions
How many images should a product page have?
Enough to answer what a customer would check in a shop: every side, the scale, the details and each color or finish. A plain item may need four. Furniture or clothing usually needs more, including one in use.
Should product descriptions be long or short?
Both, in layers. A short summary near the top serves the shopper who already knows what they want. The full specification below serves the one who is comparing, and it is also what search engines read.
Do tabs and accordions hide content from search engines?
Not when the text is in the page's HTML. Content that is only fetched from the server after a click may not be read. Use tabs for layout, and keep delivery and returns information visible without a tap.
What should happen to the page when a product is out of stock?
If it is coming back, keep the page live, show the expected date and offer a back-in-stock email. If it is discontinued, point shoppers to the replacement or redirect the address to the closest category. Update the availability value in the structured data in both cases.
Add worldwincoder.com as a preferred source on Google, or open this article in your AI assistant to use it as a source.
I'm Swati Priyadarshani, Founder & CEO of LMS Advisor and Co-Founder of WorldWin Coder Pvt. Ltd. (est. 2019). Over the last 10+ years, I've helped enterprises build learning platforms that actually get used - not just deployed.
