The Shop Blocks
The Canvas WooCommerce category in the block inserter holds the store's building material: product listings for any page, the parts a cart and checkout are assembled from, and the pieces of a single product page. Every block reads live from the store, so a price change on a product is a price change everywhere the product appears. Read this page to learn which group of blocks solves which job, and open each block's own reference page for its full settings.
The Listing Blocks
These put products on pages you compose:
- Canvas Products is the workhorse grid: its own query, or the store's main query when it renders the catalog, which is how the shop templates use it. When a design writes its product card differently, reshape the card in the Card Classes and Card Composition panels rather than building a custom template: they wrap the picture, move the category, and put an element such as a
smallinside a struck sale price, so the design's own styling still reaches it. - Canvas Product Carousel scrolls a product selection, the usual choice for a featured strip on a front page.
- Canvas Product Categories lists the category tiles a store front leads with.
- Canvas Related Products and Canvas Cross-Sells are the query-driven suggestion rows, related items on a product page and cross-sells in the cart.
The Cart And Checkout Blocks
The cart and checkout pages are compositions of parts, so each part is its own block: Canvas WooCommerce Notices for the store's messages, Canvas Cart Table and Canvas Cart Totals for the cart, and Canvas Checkout Billing and Canvas Checkout Order Review for the checkout's two halves. The templates Canvas ships arrange exactly these blocks, so rearranging a cart page means moving blocks, not editing templates by hand. See Cart, Checkout And Account Pages.
The Single Product Blocks
The remaining blocks are the anatomy of one product: its images and gallery, price, rating, short description, add to cart, meta, tabs, share row and variation swatches. They exist so a custom product layout can be assembled in a template, putting each piece where your design wants it rather than where the default layout puts it.
How To Build A Featured Products Section
Starting screenthe block editor, on the page you are building.
Insert Canvas Products, and in its settings choose how many products and columns the section shows and which products it queries, a category, a selection, or the newest. Add a heading above it, and the section is done, because the block owns its markup and card design. When the row should scroll instead of wrap, reach for Canvas Product Carousel with the same query thinking.
Pitfalls
A block renders nothing on the front end. The category's blocks require WooCommerce active, and they render products that are published and visible in the catalog. An empty result is usually a query filter, a draft product, or catalog visibility.
Cart parts on an ordinary page look inert. The cart table and totals render the live cart, so on a page that is not the assigned cart page they still show the visitor's cart, but store redirects and notices behave according to which page WooCommerce believes is the cart. Compose cart parts on the assigned cart page.
What To Read Next
- The Canvas WooCommerce category in the Blocks reference, one page per block with every setting, starting with Canvas Products
- Cart, Checkout And Account Pages, where the cart and checkout parts live by default
