Canvas Docs

Variation Swatches

Colour dots or button pills that choose a variable product's variation. It is shown in the block inserter as Canvas Variation Swatches and registered as canvas-core/woo-variation-swatches.

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

The Variation Swatches 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

  • AttributeDefaultEmpty

    Which variation attribute this control chooses, by its name (pa_color) or its label (Color). Empty uses the product's first variation attribute.

  • HeadingDefaultEmpty

    Text above the control. Empty renders no heading.

  • Show Chosen ValueDefaultOff

    Prints the selected term's name beside the heading, updated as the visitor chooses.

  • Move the GalleryDefaultOn

    Moves the product gallery carousel to the chosen variation's image.

  • Gallery Element IDDefaultoc-shop

    The name of the gallery this swatch row moves. It has to match the name set on the product gallery block on the same page.

    Shown when Move the Gallery is on

  • Use as the Carousel's DotsDefaultOff

    Hands this row to the gallery carousel as its pagination, so each dot IS a slide. The gallery must be set to be initialised elsewhere.

    Shown when Move the Gallery is on

  • Control StyleDefaultColour dots

    Dots read each term's swatch colour, set on the attribute term itself.

    ChoicesColour dotsButton pills

Style

  • Heading ClassesDefaultfw-medium mb-3

    Class names on the attribute heading above the swatches, setting its weight and the space under it.

  • Chosen Value ClassesDefaultproduct-color-value ms-1 fw-semibold

    Class names on the chosen value beside the heading. Keep the first one, which is how the swatches find the text to update.

    Shown when Show Chosen Value is on

  • Control ClassesDefaultEmpty

    Classes on the row holding the swatches. Empty uses the style's own.

  • Swatch ClassesDefaultEmpty

    Classes on each swatch. Empty uses the style's own.

  • Strike Out UnavailableDefaultOn

    A term with no purchasable variation is disabled and its label struck through.

    Shown when Control Style is "Button pills"

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?