A product page should help a buyer identify the item, choose the right option and understand what they can purchase. Design around those decisions before arranging decorative sections. Check the selected variant, its image and its availability together, then compare the visible information with the product data used elsewhere on the site.
A page can look polished while leaving a buyer uncertain about which option is selected. Start with the information that changes the purchase: the relevant specification, the selected option, the included parts and any availability message. Give each a clear place in the page and ask a reviewer to explain their choice using what is actually visible.
The original decision walkthrough below uses a hypothetical bag offered in two sizes. Product-specific examples come from WooCommerce documentation and Google’s product-data guidance, read on 24 October 2026. For the wider buying journey, see online stores and web development.
What should the buyer know before choosing an option?
Write the main product question in plain language. For the sample bag, a buyer may want to know whether the chosen size suits the intended use and which contents are included. Organise the description and image sequence around those questions. Keep specifications connected to the exact product or variation to which they apply.
WooCommerce variable products support variation-specific image and stock information. Its variable-product documentation gives a concrete example of data that can change with the option. Build the review around those differences, rather than treating the product page as a single unchanging block of content.
WooCommerce supports both global attributes and product-specific attributes. Decide which terms should be consistent across the catalogue and which describe only this product. A shared size label is useful when it has an agreed meaning; if the relevant dimensions differ between products, the page should supply the information needed for the actual choice.
Keep a short evidence sheet with the product record, approved specifications, mapped images and option names. Have the catalogue owner confirm the relationship between them. This is a proposed editorial control for accurate presentation. It gives the designer reliable material to arrange and makes an incorrect label easier to trace back to its source.
How should the variation selector behave?
WooCommerce can generate all combinations of attribute values as variations. WooCommerce also permits variations to be added manually. Those documented alternatives make the actual product combinations a useful part of the design brief. Identify the combinations that are intended to exist and check how the page handles the rest.
WooCommerce requires a regular price for a variation to appear in the store. A missing option may therefore need a product-data investigation as well as a layout check. Ask the reviewer to inspect the configured variation before deciding that the selector itself is broken. The acceptance sheet should distinguish the intended catalogue state from the interface used to display it.
WooCommerce can preselect a variation through default form values. Decide whether a default helps the particular buyer and make the selected option easy to recognise. Ask a test reviewer which option they believe is selected before they touch the control. Their explanation is useful evidence of whether the page communicates its initial state.
| Buyer decision | Proposed page evidence | Review question |
|---|---|---|
| Identify the product | Clear name and relevant main image | Is this the item the visitor expected? |
| Choose the size | Understandable selector and applicable dimensions | Can the buyer explain the difference? |
| Confirm the variant | Selected label, image and availability together | Do all three describe the same option? |
| Understand included parts | Accurate description and supporting photograph | Is the expected purchase clear? |
| Review an unavailable option | Appropriate message for the configured state | Does the buyer understand the next choice? |
| Continue the purchase | Clear action linked to the selected option | Does the chosen item remain identifiable? |
This table is an original page-review sheet. Adapt the evidence to the product rather than adding sections that repeat the same sales message.
How should identifiers and images support the choice?
WooCommerce can inherit the parent product SKU when a variation SKU is blank. If the operational process needs distinct variation identifiers, make that requirement explicit and inspect the configured records. A visible size label and an internal identifier answer different questions; both may matter when investigating a mistaken selection later.
Use an image that corresponds to the selected option and a description that explains the relevant detail. Review the initial state and the changed state on a smaller screen. Keep the selector, result and buying action understandable as the page moves, so the customer can confirm the decision without reconstructing it from a long description.
For the hypothetical bag, ask the reviewer to select the larger size and identify the evidence that the page now represents it. Record the selected label, visible image and relevant dimensions. If the image is shared between sizes, the surrounding information should still make the chosen option clear. The desired behaviour belongs in the design requirement and can be assessed in the configured store.
What should structured product data add?
Google recommends product structured data on product pages. Google’s product-data guidance explains how it can help the search engine understand the page. Include the structured representation in the technical review alongside the information a person sees.
Google says structured data is not required for ordinary Search appearance. Google says product structured data increases eligibility for Product rich results. Keep those statements distinct when discussing the purpose of the work. The page’s immediate job is to help a buyer make an informed choice, while structured data supplies another representation for supported search uses.
Compare the product identity and option information across the visible page and the generated structured data. Record discrepancies for investigation before expanding the catalogue. The relevant check is whether both representations describe the intended product accurately; the worksheet does not supply evidence of a particular search appearance or ranking.
Original two-size product decision walkthrough
Prepare the sample bag in a separate test store with two explicitly defined sizes and approved fictional specifications. Record the intended variations, image mapping, default selection and availability state. Use the same sample sheet to brief the designer and the person configuring product data so they can review one shared set of expectations.
Begin with a fresh visit to the product page. Ask the reviewer to identify the item, explain what is included and state which option is currently selected. Record their answer before guiding them. Then ask them to choose the other size and explain what changed. Retain the actual interface state with the product configuration used for the exercise.
Next, introduce a controlled unavailable-option case in the test copy and inspect the message and remaining choices. Check the selected product data against the page rather than assuming every unavailable option should be hidden. The intended response should follow the agreed catalogue behaviour and the relevant platform configuration.
Finally, compare the visible product with the generated structured data and review the page on the intended smaller viewport. List unresolved information, mapping and layout issues separately so the right owner can address each. For discoverability beyond the page, see SEO. To discuss a representative product and the decisions its page needs to support, get started with the review sheet.
By Spout Team. AI-assisted drafting by Codex using the linked primary documentation.