Canvas Docs

Product Images

Displays the WooCommerce product featured image and optional gallery thumbnails. It is shown in the block inserter as Canvas Product Images and registered as canvas-core/woo-product-images.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Product Images settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Gallery StyleDefaultSlider with Thumbnails

    Stacked prints every gallery image full width down the column instead of one slide at a time: the layout a sticky summary column is designed around, since the column scrolls past a tall gallery. Masonry lays them out as a lightbox grid. Carousel is the owl carousel a thumbnail linker or a colour swatch row can drive.

    ChoicesSlider with ThumbnailsCarousel (one slide at a time)Stacked (all imagesone under another)Masonry grid (lightbox)

  • Masonry ColumnsDefault2

    How many photographs sit side by side in the grid.

    Shown when Gallery Style is "Masonry grid (lightbox)"

  • Show Gallery ImagesDefaultOn

    Off shows only the featured image.

  • Show Sale BadgeDefaultOn

    The "Sale!" badge over the gallery, for products with a sale price.

  • Image LinkDefaultOpen the full image in the lightbox

    Choose no link when something else drives the gallery, such as a colour swatch row.

    ChoicesOpen the full image in the lightboxNo link - the image is only a slideShown when Gallery Style is "Carousel (one slide at a time)"

  • Carousel Type ClassDefaultEmpty

    The carousel family class, which controls how the slides are sized.

    ChoicesNone (empty)Image carousel (image-carousel)Shown when Gallery Style is "Carousel (one slide at a time)"

  • Initialised ElsewhereDefaultOff

    Adds the customjs class so the theme leaves this carousel alone and another component starts it: what a colour swatch row needs, because it supplies its own dot container.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Gallery Wrapper StyleDefaultEmpty

    Inline style on the gallery wrapper, for a carousel whose slides must be allowed to spill outside it.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (base)Default1

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (XS)Default0

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (SM)Default0

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (MD)Default0

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (LG)Default0

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Items (XL)Default0

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Item Gap (px)Default0

    Space between one slide and the next, in pixels.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Show DotsDefaultOff

    Show the row of dots below the slides, one per page.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Gallery Style is "Carousel (one slide at a time)"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Gallery Style is "Carousel (one slide at a time)"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in WooCommerce: Add to Cart, Cart Table, Cart Totals, Checkout Billing, Checkout Order Review, Conference Tickets.

Was this page helpful?