Ecommerce

Import the Ecommerce design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Ecommerce and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Blocks this design adds

eCommerce Products

canvas-core/ecommerce-products

WooCommerce products as the eCommerce design draws them: portfolio-style cards with a photo slider, cart and quick-view buttons and a star rating, or a compact list. In the block inserter it is named Canvas eCommerce Products.

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

Query

• ProductsDefaultLatest products

  Which products appear. "The shop or category being viewed" lists the products of the archive page the block sits on.

  ChoicesLatest productsChosen productsProduct categoriesProduct tagsProduct brandsProducts on saleFeatured productsRelated to the product being viewedRecently viewed by the visitorThe shop or category being viewed

• Chosen ProductsDefaultEmpty

  Comma-separated product ids, shown in this order. For recently viewed products, these show until the visitor has viewed any.

• Category SlugsDefaultEmpty

  Comma-separated product category slugs. Slugs travel between sites, so the list keeps working after an import.

• Tag SlugsDefaultEmpty

  Comma-separated product tag slugs.

  Shown when Products is "Product tags"

• Brand SlugsDefaultEmpty

  Comma-separated product brand slugs.

  Shown when Products is "Product brands"

• Number of ProductsDefault4

  How many products to show, or how many per page when the list is paged.

• Order ByDefaultStore order

  What the products are sorted by. Chosen and recently viewed products keep their own order.

  ChoicesStore orderDateNamePriceSalesRating

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

• Page Through the ProductsDefaultOff

  Show page links under the list when there are more products than fit on one page.

Layout

• LayoutDefaultProduct cards

  Cards with a photo slider, or small rows with a thumbnail, name, price and rating.

  ChoicesProduct cardsCompact list

• Grid Row and ColumnsDefaultOn

  Wrap the products in a row with one column each. Turn off to place a single card straight into its container.

• Row ClassesDefaultrow

  Classes on the row around the products.

  Shown when Grid Row and Columns is on

• Column ClassesDefaultcol-lg-3 col-md-6

  Classes on each product column, which is where the number of products per row is set.

  Shown when Grid Row and Columns is on

• Row Breaks AfterDefaultEmpty

  Comma-separated positions after which an empty full-width break is placed, to space stacked cards on small screens.

  Shown when Grid Row and Columns is on

• Row Break ClassesDefaultw-100 mb-5 d-block d-md-none

  Classes on each row break.

  Shown when Grid Row and Columns is on

• Record ClassesDefaultOn

  Add each product's own classes (its id, categories and stock state) to its column, the way WordPress marks a listed record.

• Image SizeDefaultwoocommerce_thumbnail

  Which stored size of the product photos to load.

• No Products MessageDefaultNo products were found.

  Shown when the list has nothing to show, for example an empty category.

Card

• Card ClassesDefaultportfolio-item

  Classes on the box around one product.

  Shown when Layout is "Product cards"

• Photo SliderDefaultOn

  Slide through the product's gallery photos inside the card. A product with one photo shows it on its own.

  Shown when Layout is "Product cards"

• Photos per CardDefault3

  Most photos in one card's slider, starting with the product image.

  Shown when Photo Slider is on

• Slider AnimationDefaultFade

  How one photo gives way to the next.

  ChoicesFadeSlideShown when Photo Slider is on

• Slider AutoplayDefaultOff

  Move through the photos on their own.

  Shown when Photo Slider is on

• Slider DotsDefaultOff

  Show a dot per photo under the slider.

  Shown when Photo Slider is on

• Sale FlashDefaultOn

  Mark products on sale with a round flash over the photo.

  Shown when Layout is "Product cards"

• Sale Flash ClassesDefaultsale-flash badge bg-danger p-2

  Classes on the sale flash.

  Shown when Sale Flash is on

• Sale Flash TextDefaultSale!

  Wording inside the sale flash.

  Shown when Sale Flash is on

• Cart ButtonDefaultOn

  A round button over the photo that adds the product to the cart, or opens it when options must be chosen first.

  Shown when Layout is "Product cards"

• Cart Button IconDefaultbi-cart

  Icon on the cart button.

  Shown when Cart Button is on

• Details ButtonDefaultOn

  A round button beside the cart button that opens the product and shows a tip, such as its sizes, on hover.

  Shown when Layout is "Product cards"

• Details Button IconDefaultbi-info-circle

  Icon on the details button.

  Shown when Details Button is on

• Tip AttributeDefaultSize

  Name of the product attribute whose values the tip lists. A product without it shows its name instead.

  Shown when Details Button is on

• Tip PrefixDefaultAvailable Sizes:

  Text before the attribute values in the tip, followed by a space.

  Shown when Details Button is on

• Tip SeparatorDefault|

  Placed between the attribute values in the tip, with a space either side (after it for a comma).

  Shown when Details Button is on

• Details Area ClassesDefaultportfolio-desc pb-0-content-between

  Classes on the area under the photo holding the name, style line, rating and price.

  Shown when Layout is "Product cards"

• Style LineDefaultA product attribute

  The short line under the product name.

  ChoicesA product attributeThe product categoryNone (empty)Shown when Layout is "Product cards"

• Style Line AttributeDefaultStyle

  Name of the product attribute shown as the style line. A product without it shows its first category.

  Shown when Style Line is "A product attribute"

• Star RatingDefaultOn

  Show the average review rating as five stars once the product has reviews.

• Price ClassesDefaultitem-price pt-1

  Classes on the price box.

  Shown when Layout is "Product cards"

• Old Price ClassesDefaultd-md-none d-lg-block

  Classes on the struck-through regular price of a product on sale.

  Shown when Layout is "Product cards"