Canvas Docs

Blocks with no design named in code

These blocks ship with one design, but the design is not named anywhere the reference can read. They are listed here so nothing is lost, until the product can say which design owns them.

Blocks this design adds

Fashion Cart Part

canvas-core/fashion-cart

One part of the Fashion Store bag page (items, shipping estimate or order summary), read from the visitor's cart. In the block inserter it is named Canvas Fashion Cart Part.

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

The Fashion Cart Part settings in the block editor sidebar

Content

  • PartDefaultItem table

    Which part of the bag this block shows.

    ChoicesItem tableShipping estimateOrder summary

  • Column headingsDefaultProduct,,Price,Qty,Total,

    Comma-separated headings of the six item columns: photo, name, price, quantity, line total, remove. Leave a heading empty for an unlabelled column.

    Shown when Part is "Item table"

  • Sale labelDefaultSale

    Shown under an item bought at its sale price. Empty hides it.

    Shown when Part is "Item table"

  • One size labelDefaultOne Size

    Shown for an item that comes in one size, before its colour.

    Shown when Part is "Item table"

  • Empty bag messageDefaultYour bag is empty. Start with the new collection.

    Shown in place of the table when the bag is empty.

    Shown when Part is "Item table"

  • TitleDefaultEmpty

    Heading of the shipping estimate.

    Shown when Part is "Shipping estimate"

  • Button wordingDefaultEmpty

    The calculate button of the shipping estimate, or the checkout button under the summary. Empty hides the checkout button.

    Shown when Part is "Shipping estimate" or "Order summary"

  • Button classesDefaultEmpty

    Classes on that button.

    Shown when Part is "Shipping estimate" or "Order summary"

  • Button inline styleDefaultEmpty

    Inline CSS on that button.

    Shown when Part is "Shipping estimate" or "Order summary"

  • Field inline styleDefaultEmpty

    Inline CSS on the country menu and the two address fields of the shipping estimate.

    Shown when Part is "Shipping estimate"

  • Rate inline styleDefaultEmpty

    Inline CSS on each delivery option.

    Shown when Part is "Shipping estimate"

  • Radio inline styleDefaultEmpty

    Inline CSS on each delivery option's radio button.

    Shown when Part is "Shipping estimate"

  • Summary wordingDefaultSubtotal (%s items) Discount Shipping Estimated Tax Order Total Free Subtotal (%s item)

    One per line: subtotal (%s is the item count), discount, shipping, tax, total, the word shown for free shipping, and the subtotal for a single item. The tax row only appears when the store charges tax.

    Shown when Part is "Order summary"

  • Discount inline styleDefaultEmpty

    Inline CSS on the discount amount of the summary.

    Shown when Part is "Order summary"

Fashion Product Part

canvas-core/fashion-product

One part of the Fashion Store product page (gallery, breadcrumb, name, rating, price, options, add to bag, save, details, reviews or the review form), read from the product being viewed. In the block inserter it is named Canvas Fashion Product Part.

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

The Fashion Product Part settings in the block editor sidebar

Content

  • PartDefaultProduct name

    Which part of the product page this block shows. Every part reads the product being viewed.

    ChoicesPhoto galleryBreadcrumbProduct nameRatingPriceColour and size optionsQuantity and add to bagSave buttonDetail accordionReview summaryReview listReview form

  • Photo hintDefaultHover to zoom

    Small label over the large photo. Empty hides it.

    Shown when Part is "Photo gallery"

  • Thumbnail namesDefaultMain view Collar detail Sleeve detail Back view

    One per line, in gallery order. Read aloud for each thumbnail button; photos past the list use the photo's own alt text.

    Shown when Part is "Photo gallery"

  • Shop pageDefaultEmpty

    Where the Shop crumb and the category crumb lead. The category crumb adds its department to the address.

    Shown when Part is "Breadcrumb"

  • Shop crumbDefaultShop

    Wording of the Shop crumb.

    Shown when Part is "Breadcrumb"

  • Price decimalsDefault0

    How many decimal places the large price shows.

    Shown when Part is "Price"

  • Price noteDefaultEmpty

    Small print beside the price. Empty hides it.

    Shown when Part is "Price"

  • Colour labelDefaultColor

    Label over the colour swatches.

    Shown when Part is "Colour and size options"

  • Swatch coloursDefaultEmpty

    One per line: a colour name as the product lists it, an equals sign, and the colour the swatch paints.

    Shown when Part is "Colour and size options"

  • Size labelDefaultSize

    Label over the size buttons.

    Shown when Part is "Colour and size options"

  • Size guide pageDefaultEmpty

    Where the size guide link beside the size label leads. Empty hides the link.

    Shown when Part is "Colour and size options"

  • Size guide linkDefaultSize guide

    Wording of the size guide link.

    Shown when Part is "Colour and size options"

  • Size guide link styleDefaultEmpty

    Inline CSS on the size guide link.

    Shown when Part is "Colour and size options"

  • Button wordingDefaultAdd to Bag

    Wording of the add-to-bag button, or of the save button.

    Shown when Part is "Quantity and add to bag" or "Save button"

  • Detail sectionsDefaultCare Sizing & Fit Sustainability

    One product attribute name per line, each shown as an accordion section after the description. An attribute with several values becomes a list.

    Shown when Part is "Detail accordion"

  • Description headingDefaultDescription

    Heading of the first accordion section, which holds the product description.

    Shown when Part is "Detail accordion"

  • Reviewer initial coloursDefaultvar(--loom-camel), var(--loom-black), #C4A882

    Comma-separated colours the reviewer initials cycle through.

    Shown when Part is "Review list"

  • Verified buyer labelDefaultVerified Buyer

    Shown beside the name of a reviewer who bought the product.

    Shown when Part is "Review list"

  • More reviews wordingDefaultLoad More Reviews

    Wording of the button under the list, shown only when there are more reviews than the list holds.

    Shown when Part is "Review list"

  • Reviews shownDefault3

    How many reviews the list shows before the more button.

    Shown when Part is "Review list"

  • Review count wordingDefaultBased on %s reviews

    %s is the number of reviews.

    Shown when Part is "Review summary"

Fashion Products

canvas-core/fashion-products

A WooCommerce product grid in the Fashion Store card shape, plus the result count and page buttons of a paginated grid. In the block inserter it is named Canvas Fashion Products.

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

The Fashion Products settings in the block editor sidebar

Query

  • ShowDefaultProduct grid

    The count and the page buttons read the same query settings as the grid they describe, so give all three the same Query settings.

    ChoicesProduct gridResult countPage buttonsSort menu

  • ProductsDefaultAll products

    Which products the grid pulls in. Upsells are set per product under Linked Products; a product without any shows related products from its categories.

    ChoicesAll productsFeatured productsA product categoryA product tagUpsells of the product being viewedelse related productsThe visitor's saved products

  • Category slugDefaultEmpty

    Comma-separated product category slugs. Products in child categories are included. Slugs travel between sites, so the grid keeps working after an import.

  • Tag slugDefaultEmpty

    Comma-separated product tag slugs, used when Products is set to a product tag.

    Shown when Products is "A product tag"

  • Products per pageDefault4

    How many products to show at once.

  • Order byDefaultStore order

    What to sort the products by.

    ChoicesStore orderDateTitlePrice

  • OrderDefaultAscending

    Read the sort order forwards or backwards.

    ChoicesAscendingDescending

  • PaginateDefaultOff

    Show the next products on further pages instead of stopping at the per-page number.

  • Follow the page filtersDefaultOff

    Narrow and sort the products by the filter settings in the page address (cat, sort, max, color, size, stock), which the shop page's filter controls write.

  • Empty MessageDefaultEmpty

    Shown when the query finds no products, for example an empty saved list. Empty shows nothing.

  • Empty Message ClassesDefaultEmpty

    Classes on the paragraph holding the empty message.

Layout

  • Grid classesDefaultrow row-cols-2 row-cols-md-4 g-3

    Classes on the element wrapping the product cards.

  • Column wrapperDefaultOn

    Wrap each card in a column element. Turn off for a grid whose cards are its direct children.

  • Column classesDefaultcol

    Classes on each column.

    Shown when Column wrapper is on

  • Column category keyDefaultOff

    Write the product's department (the category under the top level) on each column as data-cat, which the category filter buttons read.

    Shown when Column wrapper is on

  • Record classesDefaultOn

    Add WordPress's per-product classes to each card (post id, terms), which the saved-products and quick add buttons read.

  • Card elementDefaultBox (the name links to the product)

    Whether the whole card is the link to the product or only its name.

    ChoicesBox (the name links to the product)Link (the whole card links to the product)

  • Card inline styleDefaultEmpty

    Inline CSS on each card, e.g. text-decoration:none; on a linked card.

  • Image sizeDefaultLarge

    Which stored size of the product photo to load.

    ChoicesMediumLargeFull

  • Image inline styleDefaultaspect-ratio: 3/4

    Inline CSS on each product photo. Empty writes no style attribute.

  • Image ratio attributeDefaultEmpty

    Writes the value as an aspect-ratio attribute on each photo, for layouts that read it from there. Empty writes none.

Card

  • Badge positionDefaultBefore the photo

    Where the New or Sale badge sits in the photo box. The badge is positioned by the stylesheet either way.

    ChoicesBefore the photoAfter the photoNo badge

  • New badge tagDefaultnew

    Product tag slug that earns the New badge. A product on sale shows the Sale badge instead.

  • New badge labelDefaultNew

    Wording on the New badge.

  • Sale badge labelDefaultSale

    Wording on the Sale badge.

  • Hover actionsDefaultSave and view

    The buttons that slide in over the photo on hover.

    ChoicesSave and viewQuick add and saveNone

  • Actions onDefaultEvery card

    Which cards carry the hover actions.

    ChoicesEvery cardThe first card onlyShown when Hover actions is "Save and view" or "Quick add and save"

  • Action tooltipsDefaultOn

    Give each action button a title tooltip naming what it does.

    Shown when Hover actions is "Save and view" or "Quick add and save"

  • Category lineDefaultDepartment / Category

    How the category line above the name reads.

    ChoicesDepartment / CategoryCategory onlyHidden

  • Price layoutDefaultSeparate price elements

    How a price, and the two amounts of a sale price, are written.

    ChoicesSeparate price elementsOne price box holding both amounts

Count & Pages

  • Count wordingDefaultShowing %1$s-%2$s of %3$s products

    %1$s is the first product on the page, %2$s the last and %3$s the total, which is written in bold.

    Shown when Show is "Result count"

  • Count classesDefaultloom-shop-count

    Classes on the result count.

    Shown when Show is "Result count"

  • Sort menu wordingDefaultSort: Featured Price: Low to High Price: High to Low Newest First Best Selling Rating

    One line each, in this order: store order, price rising, price falling, newest, best selling, rating.

    Shown when Show is "Sort menu"

  • Sort menu classesDefaultloom-sort-select

    Classes on the sort menu.

    Shown when Show is "Sort menu"

  • Sort menu labelDefaultSort products

    The name a screen reader announces for the sort menu.

    Shown when Show is "Sort menu"

  • Page row classesDefaultd-flex justify-content-center align-items-center gap-2 mt-5 pt-3 border-top

    Classes on the row holding the page buttons.

    Shown when Show is "Page buttons"

  • Page row inline styleDefaultEmpty

    Inline CSS on the row holding the page buttons.

    Shown when Show is "Page buttons"

  • Page button classesDefaultloom-page-btn

    Classes on each page button. The current page also gets active.

    Shown when Show is "Page buttons"

  • Next page iconDefaultbi-arrow-right

    Icon on the button that moves to the next page. Empty hides that button.

    Shown when Show is "Page buttons"

  • Next button inline styleDefaultEmpty

    Inline CSS on the next page button.

    Shown when Show is "Page buttons"

Was this page helpful?