WooCommerce › Product Page (Theme Settings)

Estimated reading time: 3 min

The Product Page group inside the WooCommerce area of Theme Settings controls the single product page: its overall layout, the image gallery, what sits in the summary next to the gallery, what sits below it, and the tabs.

Open it from Rey → Settings → WooCommerce. See also Catalog and Cart, Checkout & Store.

Layout

Product Page Skin is the decision everything else follows. Rey ships several: the standard Default layout, a Fullscreen one where the gallery fills the screen, and others. Changing the skin changes which options appear below it.

Default skin

Choose Sidebar and Sidebar Size add a sidebar to the product page, with Hide sidebar on tablet/mobile to drop it on small screens.

Fullscreen skin

Stretch Gallery (Cascade), a Gallery Background Color, Summary vertical alignment, a Custom Summary Height with a minimum, Force “Absolute” header position so the header floats over the gallery, and a Top Spacing control.

Product Summary

  • Flip Gallery & Summary: put the text on the left and the images on the right.
  • Summary Size and Summary Padding: how wide the text column is and how much air it has.
  • Background Color and Text Color for that column.
  • Fixed Summary: the summary stays in place while the gallery scrolls past it, with a top distance and offset. Sticky Gallery does the reverse.

Apply a Demo Layout at the bottom copies a full product-page configuration from one of Rey’s demos.

Applying a demo layout overwrites the product-page options you have already set. Take a snapshot from the Save history button first.

The Layout section with the Product Page Skin selector open.

How product photos are presented. The most consequential options are the first two.

  • Gallery layout: a slider, a vertical cascade, or one of the grid patterns. Grid layouts also offer Stretch uneven items and a Grid Pattern choice.
  • Main Image Container height: a fixed Height or an Images Ratio, so every product’s first image occupies the same space regardless of its proportions.

Then the details: Enable Hover Zoom, Lazy-load Images, a Counter, Auto-height transition, Arrows Navigation, Bullets Navigation and Corner Radius.

Thumbnails

Max. visible thumbs, a Thumbs nav. style, the Thumbs trigger (click or hover), Flip thumbs position, and Keep original thumb proportions to stop them being cropped square.

Its own Navigation Style and arrows, an auto-height transition, Scroll top on variation change, and Show side edge of the next image, a small peek that tells visitors the gallery is swipeable.

Enable Lightbox, a “White” Skin, and an Open Button with its own icon and optional text.

Related features are separate modules that add their own options here once enabled: Extra Variation Images, product video, 360° galleries and before/after images. Enable them under Rey → Modules.

The Image Gallery section beside a product gallery in the live preview.

Summary Components

Everything in the column next to the gallery: the title, price, add-to-cart block and what surrounds them.

Around the Add to cart block

Before Add to cart (Content) and After Add to cart (Content) each accept a global section or free text, the place for trust badges, delivery promises or size-guide links.

Quantity and button

  • Quantity Box Style and Show plus/minus buttons.
  • Button text and colours in both states, a separate Backorders – Button Text, Full-Stretch Button, and Hide Add to Cart button for catalog-only products.

Behaviour

Ajax Add to Cart adds to the cart without reloading, and After “Added To Cart” Behaviour decides what happens next: open the cart panel, show a popup, or stay put. See Products Popup, after “Added To Cart”.

The rest of the summary

  • Breadcrumbs: display and style. To change their output entirely, see Override Breadcrumbs output.
  • Short Description: whether to show it, whether to move it after the add-to-cart block, and an optional toggle with its own label.
  • Product Rating, Product Title and Product Navigation (previous / next product).
  • Social Sharing: which icons, and whether they are coloured.

Several summary elements come from modules and appear here only when enabled: Product Subtitle, Price features, Product Benefits list, Estimated delivery, Buy now button and Size Guides.

A product summary on the front end with each component labelled.

Page Components

What appears below the gallery and summary, across the full width of the page: related products, upsells, recently viewed items, and any global sections you want on every product page.

Each component can be reordered and switched off. Related products have their own article: Select custom Related products.

Tabs & Blocks

The description, specifications and reviews area. Rey lets you rename the tabs, reorder them, add your own, and render them as tabs or as stacked accordions.

This is covered in depth in Customize the Product Page Tabs & Blocks. See also Add Accordions to the Product summary and Customize the attributes inside Specifications.

Designing the product page with Elementor

For full control over the arrangement, build the product page as a custom template. See Editing product pages & archives with Elementor. A custom template replaces the layout, so most options above stop applying.

Was this article helpful?