--- title: The product page description: Gallery, product details, the purchase panel, size guides, sale countdowns and the mobile purchase bar. url: "https://wpruby.com/knowledgebase/cartavera-product-page/" updated: "2026-11-04" category: WPRuby Themes / Cartavera --- # The product page 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. [![A product page: gallery, details with the sale countdown, and the purchase panel](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082759/cartavera-docs-product-page.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082759/cartavera-docs-product-page.jpg) 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. Table of Contents [Toggle](#) - [Gallery](#Gallery) - [Product details (middle column)](#Product_details_middle_column) - [Purchase panel (right column)](#Purchase_panel_right_column) - [Purchase notes](#Purchase_notes) - [Sale countdown](#Sale_countdown) - [Size guides](#Size_guides) - [Tabs](#Tabs) - [Related products and recently viewed](#Related_products_and_recently_viewed) - [Mobile purchase bar](#Mobile_purchase_bar) - [Product types](#Product_types) ## 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](https://wpruby.com/knowledgebase/cartavera-catalog-and-filters/#new-and-best-seller-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](https://wpruby.com/knowledgebase/cartavera-catalog-and-filters/#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`](https://wpruby.com/knowledgebase/cartavera-hooks/#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`](https://wpruby.com/knowledgebase/cartavera-hooks/#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. 1. Go to **Appearance → Editor → Patterns** and create a **synced pattern** (for example "Women's clothing sizes"). Add your size table and any notes. 2. Pick it for a whole category: **Products → Categories → *edit a category* → Size guide**. 3. 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. [![A size guide open on a product page](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082800/cartavera-docs-size-guide.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082800/cartavera-docs-size-guide.jpg) ## 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.