Canvas Docs

Product Gallery Linker

A thumbnail strip that moves a product gallery carousel to the image you click. It is shown in the block inserter as Canvas Product Gallery Linker and registered as canvas-core/woo-product-gallery-linker.

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

The Product Gallery Linker 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

  • LayoutDefaultGrid of thumbnails

    Whether the thumbnails sit in a fixed grid or in a strip the shopper can slide, which suits a product with many photographs.

    ChoicesGrid of thumbnailsCarousel of thumbnails

  • Grid ColumnsDefault6

    How many thumbnails sit side by side in the grid.

    Shown when Layout is "Grid of thumbnails"

  • Gallery Element IDDefaultoc-images

    The id of the product gallery carousel this strip drives. Set the same value as the gallery block's HTML anchor.

  • Strip Element IDDefaultoc-images-linker

    A name of your own for this thumbnail strip. Give a second strip on the same page a different name so the two stay independent.

    Shown when Layout is "Carousel of thumbnails"

  • Carousel Type ClassDefaultImage carousel (image-carousel)

    Which design family the strip takes its styling from. Choose None when your own styling supplies it.

    ChoicesNone (empty)Image carousel (image-carousel)Shown when Layout is "Carousel of thumbnails"

  • Jump Speed (ms)Default0

    How long the gallery takes to move to the clicked image. 0 uses the carousel's own speed.

  • Thumbnail SizeDefaultwoocommerce_gallery_thumbnail

    Registered image size used for each thumbnail.

Style

  • Strip Wrapper ClassesDefaultEmpty

    Overrides the classes the chosen layout would build. Empty keeps them.

  • Strip Wrapper StyleDefaultEmpty

    Styling set on the thumbnail strip itself, most often to set the gap between it and the gallery above.

  • Thumbnail ClassesDefaultEmpty

    Classes on each thumbnail link. Empty uses the layout's own.

  • Items (base)Default4

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

    Shown when Layout is "Carousel of thumbnails"

  • Items (XS)Default0

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

    Shown when Layout is "Carousel of thumbnails"

  • Items (SM)Default0

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

    Shown when Layout is "Carousel of thumbnails"

  • Items (MD)Default0

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

    Shown when Layout is "Carousel of thumbnails"

  • Items (LG)Default0

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

    Shown when Layout is "Carousel of thumbnails"

  • Items (XL)Default0

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

    Shown when Layout is "Carousel of thumbnails"

  • Item Gap (px)Default4

    Space between one slide and the next, in pixels.

    Shown when Layout is "Carousel of thumbnails"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Layout is "Carousel of thumbnails"

  • Arrows Always VisibleDefaultOff

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

    Shown when Layout is "Carousel of thumbnails"

  • Show DotsDefaultOff

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

    Shown when Layout is "Carousel of thumbnails"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Layout is "Carousel of thumbnails"

  • LoopDefaultOn

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

    Shown when Layout is "Carousel of thumbnails"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Layout is "Carousel of thumbnails"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Layout is "Carousel of thumbnails"

  • Stage PaddingDefault0

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

    Shown when Layout is "Carousel of thumbnails"

  • Animate InDefaultEmpty

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

    Shown when Layout is "Carousel of thumbnails"

  • Animate OutDefaultEmpty

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

    Shown when Layout is "Carousel of thumbnails"

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?