Quantity Input

A .quantity stepper: a number input flanked by minus/plus buttons. Static and product-agnostic, pair with a button for an "Add to Cart" row. It is shown in the block inserter as Canvas Quantity Input and registered as canvas-core/quantity-input.

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:

Settings

• MinimumDefault1

  The lowest quantity a shopper can choose.

• StepDefault1

  How much the quantity changes each time the plus or minus button is pressed. Raise it for something sold in packs.

• Default ValueDefault1

  The quantity shown before the shopper changes it.

• ControlDefaultStepper

  Choose between a plus and minus stepper and a plain quantity dropdown.

  ChoicesStepperDropdown

• Highest QuantityDefault5

  The largest quantity the dropdown offers.

  Shown when Control is "Dropdown"

• Dropdown ClassesDefaultEmpty

  Extra class names on the dropdown, for a design that styles the picker its own way.

  Shown when Control is "Dropdown"

• Zero-pad to DigitsDefault0

  Show 01 instead of 1. The stepper re-applies the padding after every change. 0 disables it.

  Shown when Control is "Stepper"

Cart Form

• Add-to-cart FormDefaultOff

  Wrap the control in the product .cart form with an add-to-cart submit beside it.

• Form ClassesDefaultEmpty

  Design layer on the form: cart-border, cart-border-2, cart-bg-circle.

  Shown when Add-to-cart Form is on

• Button LabelDefaultEmpty

  Wording on the submit button beside the stepper. Leave empty to use "Add to cart".

  Shown when Add-to-cart Form is on

• Button ClassesDefaultEmpty

  Class names that set the look of the submit button, such as its colour and corner rounding.

  Shown when Add-to-cart Form is on

Sizing

• Control WidthDefaultEmpty

  Width of each button and of the number box. Leave empty for the size the theme sets.

• Control HeightDefaultEmpty

  Height of the stepper. Leave empty for the size the theme sets.

• Control Font SizeDefaultEmpty

  Text size of the quantity and of the plus and minus glyphs.

• Control BackgroundDefaultEmpty

  Background colour of the plus and minus buttons.

• Control Background (hover)DefaultEmpty

  Background colour the plus and minus buttons take when the pointer is over them.

• Control BorderDefaultEmpty

  Border around the stepper. Set 0 for a borderless control.

• Control Border ColourDefaultEmpty

  Colour of the line around the stepper, for a control that sits on a coloured or dark band. Empty keeps the theme colour.

Style

• Wrapper Extra ClassesDefaultEmpty

  Extra classes appended to the base "quantity" wrapper.

• Input Extra ClassesDefaultEmpty

  Extra classes appended to the base "qty" input.

• Minus Button Extra ClassesDefaultEmpty

  Extra classes appended to the base "minus" button.

• Plus Button Extra ClassesDefaultEmpty

  Extra classes appended to the base "plus" button.

• Minus IconDefaultuil uil-minus

  e.g. uil uil-minus or fa-solid fa-angle-down.

• Plus IconDefaultuil uil-plus

  e.g. uil uil-plus or fa-solid fa-angle-up.

Accessibility

• Minus Button aria-labelDefaultDecrease quantity

  What a screen reader announces for the minus button, which shows no text of its own. Translate it to match the rest of your page.

• Plus Button aria-labelDefaultIncrease quantity

  What a screen reader announces for the plus button, which shows no text of its own.

• Input aria-labelDefaultQuantity

  What a screen reader announces for the number box, which carries no visible label.

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 Layout: Column, Container, Copyrights, Footer About, Footer Contacts, Footer Instagram.