On a desktop the product page has three columns: the gallery, the product details and a purchase panel that stays in view as the shopper scrolls. Below them are the tabs, related products and recently viewed products. On tablets and phones the columns stack in a reading order that puts the title, price and add-to-cart button first.
To edit the layout, go to Appearance → Editor → Templates → Single Product.
Everything on the page comes from the product’s own data in WooCommerce. If a product has no reviews, no sale or no brand, that part simply isn’t shown.
Gallery
WooCommerce’s product gallery: thumbnails, zoom on hover, a full-screen lightbox and variation images. Zoom is off on touch screens, so phones don’t download the full-size image just to start the gallery.
Product details (middle column)
From top to bottom:
| Part | Comes from |
|---|---|
| New and Best seller badges | Publish date and sales. See Badges |
| Brand | The product’s brand (Products → Brands, when your WooCommerce has brands) |
| Title | |
| Rating summary | Average rating and number of reviews, linking to the reviews tab |
| Savings | “Sale · Save 25%” (“Save up to 25%” when variations differ), and “Sale ends date” when the sale has an end date. The price below shows the regular price struck through |
| Sale countdown | Time left in the sale. See below |
| Price | |
| About this item | The product’s short description. Use a bulleted list for quick-to-scan highlights |
| SKU, categories and tags |
Purchase panel (right column)
| Part | Comes from |
|---|---|
| Price and stock | WooCommerce’s price and stock status |
| Size guide | See below |
| Add to cart | WooCommerce’s own add-to-cart form, with variations, quantities and any fields other plugins add |
| Wishlist button | Your wishlist plugin. See Wishlist button |
| Purchase notes | See below |
Purchase notes
Short notes under the add-to-cart button. Each one is shown only when it’s true for this product and your settings:
| Note | Shown when |
|---|---|
| Shipping options and costs are shown at checkout. | The product needs shipping and shipping is enabled |
| Digital download: files are available in your account once payment is complete. | The product is downloadable |
| No shipping required. | The product is virtual |
| Sold and delivered by another retailer. The button takes you to their store. | The product is an external/affiliate product |
| Sold by your store name | Always, except for external products |
| Returns: see our returns page | WooCommerce’s Refund and Returns Policy page is published (see below) |
| Checkout is encrypted over HTTPS. | Your site uses HTTPS |
Select the Purchase Notes block in the template to hide the seller, returns or HTTPS lines.
The returns line. When WooCommerce is installed it creates a draft page called Refund and Returns Policy. Cartavera links to that page once it’s published: go to Pages, open it, replace WooCommerce’s sample text with your own policy, and publish. The trust and FAQ patterns link to the same page. (WooCommerce has no setting to choose a different page; developers can change the link in the trust and FAQ patterns with the cartavera_store_facts filter.)
Cartavera doesn’t show delivery dates or estimates, because WooCommerce doesn’t know them. If a shipping or delivery plugin provides real estimates, a developer can add them here with the cartavera_purchase_notes filter.
Sale countdown
When a product’s sale has an end date (Product data → General → Sale price → Schedule), the page shows how long is left. The countdown uses your server’s clock, so a shopper’s wrong device clock doesn’t change it, and it disappears when the sale ends. Variable products show it when every variation is on sale and they all end at the same time.
No end date, no countdown. Cartavera never makes one up.
Size guides
A size guide adds a Size guide button above the add-to-cart form that opens the guide in a pop-up. You write the guide once and use it on many products.
- Go to Appearance → Editor → Patterns and create a synced pattern (for example “Women’s clothing sizes”). Add your size table and any notes.
- Pick it for a whole category: Products → Categories → edit a category → Size guide.
- Or for one product: Product data → Advanced → Size guide. Choose the guide, Use the category’s guide, or None to hide it for that product.
A product set to use its category’s guide takes the first guide it finds on its own categories, then on their parent categories.
Tabs
WooCommerce’s tabs: Description, Additional information (the product’s attributes, weight and dimensions) and Reviews.
Related products and recently viewed
- You may also like shows the product’s upsells and Related products shows WooCommerce’s related products. Set upsells under Product data → Linked Products.
- Recently viewed lists the products this shopper looked at on this device. The list is kept in the shopper’s browser only (not in cookies or on your server), so it works with page caching and doesn’t follow the shopper to another device.
Mobile purchase bar
On phones, once the add-to-cart form scrolls out of view, a bar with the product picture, name, price and a button sticks to the bottom of the screen:
- Simple and external products: the button has the product’s own add-to-cart label and presses the real add-to-cart button.
- Products with options (variable, grouped): Choose options takes the shopper back to the option selectors.
- Out of stock: See availability takes the shopper back to the purchase panel.
Product types
The page has been tested with simple, variable, grouped, external, virtual and downloadable products, and with out-of-stock, low-stock and backorder stock states.