Product Page
Last updated
Last updated
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.
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.
Inverts the layout by moving the image to the right and content to the left.
Keeps the description area visible and sticky while scrolling through the gallery.
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.
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.
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.
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:
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.
Set the height of the sidebar to Full Height if you want it to have a 100% height within the container of the product.
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.
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.
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.
Display product details in a tabbed format:
Style: Choose between Underline or Pills.
Orientation: Select Horizontal or Vertical layout.
Show product details in expandable sections:
Show in Summary: Toggle to display accordions within the summary or below it.
Collapse All: Set all accordions to be collapsed by default.
Displays tabs in a vertical stack without additional styling options.
Control the visibility of meta information on the product page:
SKU: Show or hide the product SKU.
Categories: Toggle the display of product categories.
Tags: Enable or disable the display of product tags.
Allow visitors to share your product on various social networks directly from the product page. These are the options for social sharing:
Labels: Displays text labels for sharing buttons.
Icons: Displays only icons for sharing buttons.
Add or remove sharing networks from the following options:
X (Twitter)
Tumblr
VKontakte
Telegram
Customize the display of product reviews:
Rating Style: Choose between Circles or Stars for the rating display.
Rating Color: Select the color for the rating display.
Manage the display of related and upsell products within the product page:
Toggle to show or hide upsell products.
Show or hide related products in the product page, when toggled it will become a clickable section with the following options:
Products Count: Set the number of related products to display.
Product Columns: Adjust the number of columns for related products.
Customize the appearance of related products:
Background: Choose a background color for the related products section.
Padding: Adjust the top and bottom padding around related products.
