WooCommerce’s default single-product template renders your image gallery, price, stock status, and add-to-cart button as one fused block of markup. Restyle the price and you risk breaking the layout around it. Nexter Blocks splits that same page into 8 independent blocks, each stylable on its own. Here’s the build, block by block — plus the research on what actually moves conversion on a product page, and the structured-data step most builds skip.
Before You Start
You’ll need WooCommerce active and the Nexter Blocks WooCommerce block set enabled (Nexter Blocks → Blocks). Build this as a single product template inside the Nexter Theme Builder, not as a one-off edit on an individual product — that way it applies to your whole catalog at once, since every block below pulls live data from whichever product is currently being viewed.
The 8 Single Product Blocks, in Build Order
- Single Product Image — the main image, gallery thumbnails, zoom, and image swaps per variation. Place this first; everything else builds around it.
- Single Product Pricing — regular price, sale price, a price label, and a discount badge, updating dynamically for variable products.
- Single Product Rating — star rating and review count, typically placed just under the title.
- Single Product Stock — in stock, out of stock, or backorder status.
- Single Product Meta — SKU, categories, and tags.
- Product Add to Cart — the add-to-cart button, quantity selector, variation swatches, and AJAX add-to-cart.
- Single Product Tabs — Description, Additional Information, and Reviews tabs.
- Single Product Review — the reviews list plus the review submission form, usually placed inside the Reviews tab.
What Actually Moves Conversion on a Product Page
Baymard Institute’s product-page UX benchmark, built from 30,000+ manually-reviewed product pages, found that 82% of ecommerce sites have severe usability issues somewhere in the buy section, specs, shipping/returns, or reviews — which means most of the conversion opportunity on a product page is fixing real gaps, not chasing marginal polish. Two findings from that research are worth designing around specifically while placing these 8 blocks: product photography (multiple angles plus a lifestyle shot) is consistently the single highest-impact investment for most product categories, which argues for giving the Single Product Image block real prominence rather than shrinking it to make room for other elements; and products with 5 or more reviews convert measurably better than products with none (for higher-priced items specifically, that gap widens further), which is the argument for placing the Single Product Rating block prominently near the title rather than burying review count only inside the Reviews tab.
Add the Conversion Blocks Now, Not After Launch
Variation swatches replace the default WooCommerce dropdown with color, image, or button swatches, and they change the layout footprint of the Add to Cart block. Add swatches, Quick View, Compare, and Wishlist while you’re building the template, not after you’ve already finalized spacing — retrofitting them later usually means re-checking every product’s layout again.
Also Read: How to Build a WooCommerce Store with the Nexter Theme (Step by Step) — the wider build order for the rest of the store, cart through checkout.
The Structured Data Step Most Builds Skip
A visually solid product page and one that actually earns a star-rating rich snippet in Google search results are two different things, and the gap between them is Product structured data (schema.org markup). Google’s own documentation is specific about the requirement: for a basic product snippet, the page needs a name plus at least one of an offer, a review, or an aggregate rating; without aggregateRating or review markup specifically, Google will not show star ratings in search results, no matter how good the on-page reviews actually look to a human visitor. For a full merchant listing (the richer shopping-style result), the hard requirements tighten further to name, image, and a nested offer carrying price and currency. WooCommerce and Nexter’s own blocks handle the visible reviews and pricing display; whether that data is also exposed as valid Product schema is a separate check worth running (Google’s Rich Results Test is the standard tool) rather than assuming a nice-looking page automatically emits the markup search engines need.
Reducing Shipping-Cost Surprise on the Product Page Itself
Because unexpected shipping cost is Baymard’s single most-cited abandonment cause, it’s worth treating as a product-page design decision, not purely a checkout-flow one. Where feasible, surfacing an estimated shipping cost or a “free shipping over $X” threshold near the Add to Cart block — rather than making a visitor add to cart and reach checkout before finding out — removes a specific, well-documented source of last-minute abandonment. This isn’t one of the 8 core WooCommerce blocks, but a simple text or Infobox element carrying that information, placed near Product Add to Cart, addresses a real, measured conversion leak rather than a cosmetic concern.
Styling Each Block
Every block gets its own Layout and Style inspector tabs, so you’re adjusting spacing, colors, and typography per block rather than fighting a single monolithic template. Because the blocks are theme-native, they also inherit your Nexter Global Styles brand colors and typography by default, so a new product page matches your site without extra setup.
Also Read: Nexter Theme Global Styles: How to Set Up Brand Colors, Fonts and Spacing Sitewide — set this up first so your product page inherits the right defaults from day one.
Common Mistakes When Assembling the 8 Blocks
- Building the layout on one specific product, not the template: a template built and styled against a single, simple product often breaks visually on a variable product with many variations or a long title — test against the least-simple product in the catalog, not just a clean example.
- Placing Stock status somewhere a visitor has to hunt for it: the Single Product Stock block is a small element that’s easy to tuck away, but stock status is exactly the kind of information a hesitant buyer looks for right before deciding — keep it visible near the Add to Cart button, not buried below the fold.
- Skipping a mobile-specific pass: an 8-block layout that reads cleanly on a wide desktop screen frequently needs a different stacking order on mobile (image first, then price and add-to-cart immediately visible, tabs and reviews further down) — check the template at phone width specifically rather than assuming the desktop order translates.
- Forgetting the Meta block entirely: SKU, categories, and tags feel like backend detail, but SKU visibility matters for customers cross-referencing a printed catalog or a support conversation, and category/tag links double as extra internal navigation and interlinking for SEO.
A Worked Example: Assembling a Variable Product Page
Take a real case: a t-shirt with 4 colors and 5 sizes, so 20 total variations. Single Product Image goes first, with variation-triggered image swaps enabled so selecting a color updates the gallery to that color’s photos. Single Product Pricing sits directly below, showing the price range across variations by default and narrowing to a specific price once size and color are both selected. Single Product Rating goes just under the title, not lower on the page, so the review count registers before a visitor scrolls further. Variation swatches (a Pro feature) replace the default two dropdowns with visual color swatches and a size-selector row, changing the Add to Cart block’s footprint — which is exactly why swatches need to be added during this initial build pass rather than retrofitted after the surrounding spacing is finalized. Stock status is checked per-variation, not just for the product overall, so a specific out-of-stock color/size combination is communicated clearly rather than showing a generic “in stock” that turns out to be wrong for the exact combination a visitor wants.
A Build Checklist Beyond the 8 Blocks
- Shipping cost visible before checkout: unexpected shipping costs at checkout are the single most-cited reason for cart abandonment in Baymard’s research — if shipping isn’t shown or estimable from the product page itself, that’s worth fixing before worrying about smaller layout details.
- At least one lifestyle or in-context photo, not just studio shots: the Single Product Image gallery is the highest-leverage conversion investment on the page; a product shown only against a white background loses the context-setting value a lifestyle image provides.
- Reviews visible near the top, not buried in a tab: the Single Product Rating block placed near the title lets a skimming visitor register social proof immediately, rather than requiring a click into the Reviews tab to find it.
- Structured data validated, not assumed: run the page through Google’s Rich Results Test after building the template, since a visually complete page can still be missing the
aggregateRating/reviewmarkup search engines require for star snippets.
FAQ
Do these blocks work with the default WooCommerce theme templates?
They’re designed to replace the default template entirely once built inside the Nexter Theme Builder as your single product template, rather than being inserted alongside the default WooCommerce markup.
Can I build a different product page layout for a specific product category?
Yes, using the Theme Builder’s display conditions, you can assign different single-product templates to different categories, not just one sitewide template.
Is variation swatches part of the free plan?
No, variation swatches and the other conversion features (Wishlist, Compare, Quick View) are part of Nexter Blocks Pro; the 8 core single-product blocks are available free.
Why doesn’t my product show a star rating in Google search results?
Star ratings in search results require valid aggregateRating or review structured data on the page, separate from the visible reviews display — a page can show reviews to human visitors while still missing the schema markup Google needs to render the rich snippet. Validate with Google’s Rich Results Test.
How many reviews does a product actually need to move the needle?
Baymard’s research found products with 5 or more reviews convert meaningfully better than products with zero; for higher-priced items, that effect is even larger. It’s a reasonable early target for a newly launched product rather than an arbitrary number.
Should shipping cost be shown on the product page instead of only at checkout?
It’s worth considering, since unexpected shipping cost is the most commonly cited reason for cart abandonment in Baymard’s research. Surfacing an estimate or a free-shipping threshold near the Add to Cart block removes that surprise earlier in the journey rather than at the point a visitor is about to complete checkout.
Does variation swatches change how the other blocks need to be laid out?
Yes. Swatches replace the default dropdown selectors with a visually larger element, which changes the Add to Cart block’s footprint. Add swatches during the initial template build rather than after finalizing spacing, so the surrounding layout doesn’t need to be redone.
Conclusion
Building this template once inside the Theme Builder, rather than editing individual products, is the entire point — get that part right and every product in your catalog inherits the same polished layout automatically. Add the conversion blocks during this initial pass, not after launch, prioritize the image gallery and review visibility since those are the two elements the research most consistently ties to conversion, and validate Product structured data separately from the visual build so a well-designed page doesn’t quietly miss out on search rich snippets.
Suggested Reading
- How to Build a WooCommerce Store with the Nexter Theme (Step by Step)
- 27 New WooCommerce Blocks And Nexter SEO Are Live
- Nexter Theme Global Styles: How to Set Up Brand Colors, Fonts and Spacing Sitewide
