Pricing Switcher

Toggle switch that controls monthly/yearly (or any two-state) pricing display across paired Pricing Table blocks. It is shown in the block inserter as Canvas Pricing Switcher and registered as canvas-core/pricing-switcher.

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

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:

Labels

• Left LabelDefaultMonthly

  Wording beside the toggle when it is off, which is the billing period the prices start on.

• Right LabelDefaultYearly

  Wording beside the toggle when it is on, which is the billing period the prices switch to.

Behaviour

• Target Container SelectorDefault#pricing-switch

  Names the section of pricing tables this switch controls, so flipping it swaps their prices. Point it at the container the tables sit in.

• Toggle IDDefaultswitch-toggle-pricing-tenure

  HTML id attribute applied to the checkbox input driving the toggle.

Appearance

• Inactive Label ClassesDefaulttext-muted op-05

  Classes on whichever label is not currently selected, usually a muted colour so the chosen period stands out.

• Active Label ClassesDefaultfw-bold

  Classes on whichever label is currently selected, usually a heavier weight so the chosen period reads first.

• AlignmentDefaultCenter

  Where the switch and its two labels sit across the width available. None leaves the placing to the section around it.

  ChoicesLeftCenterRightNone (inherit)

• Bottom Spacing ClassDefaultmb-4

  Bootstrap margin/padding utility class applied to the wrapper element.

• Wrapper DisplayDefaultGrid Row

  How the labels and the switch are laid out. Grid Row spreads them across the page width; Flex keeps them packed together as one group.

  ChoicesGrid RowFlex (d-flex)

• Switch ClassesDefaultEmpty

  Extra classes on the .switch element that holds the toggle.

Badge

• Discount Badge TextDefaultEmpty

  Text shown in a badge beside the toggle. Leave empty for an image-only badge driven by its classes.

• Discount Badge ClassesDefaultEmpty

  Classes for the badge element. The badge renders when this or the badge text is set.

Related

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

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.