Kalium Documentation
HomeAccountPricingChangelog
  • Getting Started
    • Introduction
      • Before Getting Started
        • Hosting and Domain
        • WordPress Installation
        • Server Requirements
      • How To Purchase Kalium
    • Installation
      • Installing theme via WordPress
      • Installing theme via FTP
      • License Activation
      • Importing a Starter Site
      • Installing Required Plugins
      • Child Theme
      • Updating Kalium
    • License
      • Managing Licenses
      • Activation Scope
      • Prorating Plan Updates
    • Dashboard
    • Customizer
    • Migrating from Kalium 3 to 4
      • Migrating Automatically
      • Migrating Manually
  • General
    • Header
      • Layouts
      • Custom Header
        • Elements
      • Styling
      • Top Bar
      • Sticky Header
      • Mobile Menu
      • Other Options
      • In Page Options
    • Footer
      • Adding/Editing Content
      • Styling
    • Sidebars
      • Troubleshooting Sidebar
  • Post Types
    • Blog
      • Blog Page
      • Post Page
      • Creating a Blog Page
      • Creating a Blog Post
    • Portfolio
      • Portfolio Page
      • Project Page
      • Creating a Portfolio Page
      • Creating a Portfolio Item
        • Side Portfolio
        • Columned
        • Carousel
        • Zig Zag
        • Fullscreen
        • Lightbox
        • Design Your Own
    • WooCommerce
      • General Settings
        • Mini Cart
        • Free Shipping Bar
        • Product Badges
      • Product Catalog
        • Product Card
      • Product Page
      • Product Images
      • Cart & Checkout
      • My Account
      • Store Notice
    • Search Results
  • Typography
    • Fonts
      • How to Add a Font
        • Adding Adobe Fonts
        • Adding Self-Hosted Fonts
        • Adding External Fonts
      • Custom Selectors
      • Advanced Settings
    • Font Sizes
    • Typography Settings
  • Styling
    • Brand and Logo
    • Colors
    • Buttons
    • Forms
    • Layout
    • Link Styles
    • Site Frame
  • Translation
    • Translation introduction
    • Translating with WPML
    • Translating with Loco Translate
    • Translating with Poedit
    • Adding a Language Switcher
    • RTL Languages
  • Other
    • Social Icons
    • Image Placeholder
    • Breadcrumbs
    • Scroll to Top
    • Maintenance Mode
    • Lightbox
    • Custom CSS
  • Troubleshooting
    • Manage Options in Customizer
    • Bad Hosting Environment
Powered by GitBook
On this page
  • Product Image Width
  • Gallery
  • Sidebar
  • Breadcrumb
  • Tabs
  • Product Meta
  • Reviews
  • Related Products & Upsells
  1. Post Types
  2. WooCommerce

Product Page

PreviousProduct CardNextProduct Images

Last updated 8 months ago

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.

Breadcrumb

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.

Tabs

Display product details in a tabbed format:

  • Style: Choose between Underline or Pills.

  • Orientation: Select Horizontal or Vertical layout.

Accordions

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.

Stacked

Displays tabs in a vertical stack without additional styling options.

Product Meta

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.

Social Sharing

Allow visitors to share your product on various social networks directly from the product page. These are the options for social sharing:

Style

  • Labels: Displays text labels for sharing buttons.

  • Icons: Displays only icons for sharing buttons.

Share Networks

Add or remove sharing networks from the following options:

  • Facebook

  • X (Twitter)

  • Pinterest

  • Email

  • LinkedIn

  • Tumblr

  • VKontakte

  • WhatsApp

  • Telegram

  • Print

Reviews

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.

Related Products & Upsells

Manage the display of related and upsell products within the product page:

Upsell Products

Toggle to show or hide upsell products.

Related 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.

If you’re looking for more detailed instructions on adding widgets to your sidebar, or if you encounter any issues, please check the . 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
adding widgets to the sidebar guide
Small
Medium
Large
Container Width
Full Width
Thumbnails Bottom
Thumbnails Left
Thumbnails Right
Grid 1
Grid 2
Grid 3
Grid 4
Simple
Carousel
Above Title
Below Header
Underline Style
Pill Style
Horizontal Orientation
Vertical Orientation
Accordions
Show in Summary
Stacked
Star Rating
Circle Rating
General Tab
Style Tab