Canvas Docs

Cart Totals

Display the WooCommerce cart totals panel including subtotal, shipping, and checkout button. It is shown in the block inserter as Canvas Cart Totals and registered as canvas-core/woo-cart-totals.

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

The Cart Totals 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:

Layout

  • LayoutDefaultTwo Columns (shipping beside totals)

    Whether the shipping calculator sits beside the totals or everything stacks into one narrow panel.

    ChoicesTwo Columns (shipping beside totals)Stacked (sidebar panel)

  • Column ClassesDefaultEmpty

    Class names on each of the two columns, which is what decides how the width is shared between them.

Content

  • Show Shipping CalculatorDefaultOn

    Let the shopper estimate delivery from the cart by entering a country and postcode.

  • Shipping Calculator PlacementDefaultOwn Column

    Whether the calculator has a column of its own or folds away behind a link inside the totals.

    ChoicesOwn ColumnToggle Inside TotalsShown when Show Shipping Calculator is on

  • Shipping HeadingDefaultCalculate Shipping

    Heading above the shipping calculator.

    Shown when Show Shipping Calculator is on

  • Shipping State PlaceholderDefaultState / Country

    Grey prompt inside the state box before the shopper chooses.

    Shown when Show Shipping Calculator is on

  • Shipping Postcode PlaceholderDefaultPostCode / Zip

    Grey prompt inside the postcode box before the shopper types.

    Shown when Show Shipping Calculator is on

  • Searchable Country DropdownDefaultOn

    WooCommerce's select2 enhancement on the country and state fields. Off renders the theme's own select, which is what the shipping panel is designed around.

    Shown when Show Shipping Calculator is on

  • Update Totals LabelDefaultUpdate Totals

    Wording on the button that works out delivery for the address entered.

    Shown when Show Shipping Calculator is on

  • Totals HeadingDefaultCart Totals

    Heading above the totals panel.

  • Subtotal Row LabelDefaultCart Subtotal

    Wording of the row giving the goods total before delivery.

  • Shipping Row LabelDefaultShipping

    Wording of the delivery row.

  • Order Total Row LabelDefaultTotal

    Wording of the final row, the amount the shopper will pay.

  • Show Proceed to Checkout ButtonDefaultOff

    Put a checkout button at the foot of the totals panel. Turn it on when the cart table beside it does not carry one.

  • Proceed to Checkout LabelDefaultProceed to Checkout

    Wording on that button.

    Shown when Show Proceed to Checkout Button is on

Style

  • Row Label TagDefaultStrong

    How each row label is marked up. Strong or Span keeps the totals out of the page outline; a heading level puts them in it.

    ChoicesStrongHeading 5Heading 6Span

  • Row Label ClassesDefaultEmpty

    Class names on every row label, setting its size, weight or colour.

  • Value Cell ClassesDefaultEmpty

    Class names on the figure in every row except the final total.

  • Order Total Value ClassesDefaultamount color lead

    Class names on the final amount, which the design sets larger and in the theme colour so it stands out from the rows above.

  • Totals Table ClassesDefaulttable cart cart-totals

    Class names on the totals table itself.

  • Shipping Form ClassesDefaultrow

    Class names on the shipping calculator form, which is what sets its fields side by side or stacked.

    Shown when Show Shipping Calculator is on

  • Update Totals Button ClassesDefaultbutton button-3d m-0 button-black

    Class names that set the look of the shipping calculator button.

    Shown when Show Shipping Calculator is on

  • Row Wrapper ClassesDefaultrow col-mb-30

    Class names on the row holding the two columns, setting the space between them when they stack.

  • Proceed Button ClassesDefaultbutton button-3d button-black d-block text-center m-0

    Class names that set the look of the checkout button, including whether it stretches the full width of the panel.

    Shown when Show Proceed to Checkout Button is on

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, Checkout Billing, Checkout Order Review, Conference Tickets, Cross-Sells.

Was this page helpful?