Product Page

Located under Appearance -> Customize -> WooCommerce -> Product Page, this section allows you to design various aspects of your product page to meet your specific needs. From image dimensions to gallery layouts and additional features, you have control over how your products are presented.

Product Image Width

Determine how wide the product image should be displayed on the product page:

Small: A compact image size that conserves space.
Medium: A balanced option that provides moderate visibility.
Large: Enlarges the image to highlight products more prominently.
Container Width: Expands the image to fill the width of its container.
Full Width: Stretches the image across the entire width of the page for a full-screen effect.

Flip Horizontally

Inverts the layout by moving the image to the right and content to the left.

Sticky Description

Keeps the description area visible and sticky while scrolling through the gallery.

Gallery / Summary Gap

Sets the gap between the gallery and summary containers, with responsive controls for different device sizes. Note: This option does not apply to Container Width and Full Width types.

Gallery

Customize the layout and behavior of your product image gallery:

Thumbnails Bottom: Displays thumbnail images below the main product image.
Thumbnails Right: Places thumbnails vertically on the right side of the main image.
Thumbnails Left: Aligns thumbnails vertically on the left side.
Grid 1: Organizes gallery images in a single-column grid.
Grid 2: Arranges images in a two-column grid, below the featured image.
Grid 3: Shows images in a mixed column grid (1/2/1).
Grid 4: Formats images in a two-column grid.
Simple: Presents images without additional thumbnails.
Carousel: Features a rotating carousel of product images.

Gallery Options

Enlarge Icon: Toggle to show or hide the icon that allows users to enlarge images.
Mouse/Touch Behaviour: Choose the action triggered by clicking or touching an image:
- Zoom/Lightbox: Decide between zooming into the image or opening it in a lightbox.
: Set the space between gallery images. This option has responsive controls for various device sizes and applies to all gallery types except Simple.
Max Items: Limit the number of images shown in the gallery or select "All" to display every image.
: Enter the interval (in seconds) for automatic image rotation.
: Choose between Arrows, Dots, or both for navigation controls.
: Select Slide or Fade for image transitions.
: Enable carousel view for thumbnails.
- Auto Thumbnails per View: Automatically adjusts the number of thumbnails shown per view.
- Thumbnails per View: Manually set the number of thumbnails displayed per view.
Max Items: Limit the number of thumbnail items shown or select "All" to display all thumbnails.

Sidebar

Configure the visibility and placement of the sidebar on your product page. You can choose to display or hide the sidebar, or adjust its position to fit your design needs. To turn on the sidebar simply switch the toggle to on and then it will become a section which you can click:

Sidebar Alignment

Choose the alignment of the sidebar:

Left: Position the sidebar on the left side of the Shop Page.
Right: Position the sidebar on the right side of the Shop Page.

Full Height

Set the height of the sidebar to Full Height if you want it to have a 100% height within the container of the product.

Sidebar Widgets

The easiest and fastest way to manage your sidebar widgets is by clicking the "Sidebar Widgets" link within the customization options. This link will redirect you directly to the widget management area, where you can add, remove, or rearrange widgets with ease.

If you’re looking for more detailed instructions on adding widgets to your sidebar, or if you encounter any issues, please check the adding widgets to the sidebar guide. This guide provides step-by-step instructions and troubleshooting tips to ensure your sidebar is set up exactly as you need.

For additional styling and customization of the sidebar, you can adjust the global sidebar settings located under Appearance -> Customize -> Sidebars. This area allows you to manage the overall look and feel of sidebars across your site, check the sidebar styling article.

Manage the breadcrumb navigation on the product page, toggle to enable or disable the breadcrumb navigation.

Position

Choose the position of the breadcrumbs within the product page, it has two options:

Below Header: Place the breadcrumb navigation under the header.
Above Title: Position the breadcrumb navigation above the product title.

Tabs

Configure the layout and styling of product tabs, which is a crucial WooCommerce feature for products, there are three types of tab styles:

Tabs
Accordions
Stacked

And each of them have the option to show the tab Titles, which when toggled will show. Below we'll explain each of the tab styles and their options.