Skip to content
Bricks Academy
Get Bricks

Product gallery

Displays the WooCommerce product gallery with main product image and thumbnail navigation.

Settings

Section titled “Settings”
  • Product image size (select) - Image size for the main product image. Default: woocommerce_single.
  • Thumbnail image size (select) - Image size for thumbnail images. Default: woocommerce_gallery_thumbnail.
  • Lightbox image size (select) - Image size for lightbox/fullscreen view. Default: woocommerce_single.
  • Thumbnail position (select) - Position of thumbnail navigation relative to main image. Options: bottom, top, left, right. Default: bottom.
  • Thumbnail width (number) - Width of thumbnail images in pixels.
  • Thumbnail height (number) - Height of thumbnail images in pixels.
  • Thumbnail border (border) - Border styling for thumbnail images.
  • Thumbnail border (Active) (border) - Border styling for active/selected thumbnail image.
  • Slider (checkbox) - Enable thumbnail slider functionality.
  • Slider: Height (px) (number) - Maximum height of thumbnail slider when positioned left/right.
  • Slider: Gap (px) (number) - Gap between thumbnail images in slider. Default: 30.
  • Max. items (number) - Maximum number of thumbnail items shown in horizontal slider. Default: 4.
  • Prev arrow (icon) - Icon for previous arrow navigation. Default: ti-angle-left.
  • Next arrow (icon) - Icon for next arrow navigation. Default: ti-angle-right.
  • Background (color) - Background color for navigation arrows.
  • Border (border) - Border styling for navigation arrows.
  • Color (color) - Icon color for navigation arrows.
  • Size (number) - Font size for navigation arrow icons.
  • Height (number) - Height of navigation arrow buttons.
  • Width (number) - Width of navigation arrow buttons.