Blocks reference

Woo Blocks Reference

This page lists the Woo blocks included in the package. (Incomplete as there are still blocks that are not using block.json definition).

Product Average Rating (Beta) – woocommerce/product-average-rating

Display the average rating of a product

Name: woocommerce/product-average-rating
Category: woocommerce-product-elements
Ancestor: woocommerce/single-product
Parent:
Supports:
Attributes: textAlign

Add to Cart Button – woocommerce/product-button

Display a call to action button which either adds the product to the cart, or links to the product page.

Name: woocommerce/product-button
Category: woocommerce-product-elements
Ancestor: woocommerce/all-products,woocommerce/single-product,core/post-template,woocommerce/product-template
Parent:
Supports: align (full, wide), color (link, text, background), interactivity, typography (fontSize, lineHeight), html
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, textAlign, width

Product Image – woocommerce/product-image

Display the main product image.

Name: woocommerce/product-image
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports:
Attributes: aspectRatio, height, imageSizing, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, saleBadgeAlign, scale, showProductLink, showSaleBadge, width

Product Price – woocommerce/product-price

Display the price of a product.

Name: woocommerce/product-price
Category: woocommerce-product-elements
Ancestor: woocommerce/all-products,woocommerce/single-product,woocommerce/product-template,core/post-template
Parent:
Supports: html
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

Product Details – woocommerce/product-details

Display a product’s description, attributes, and reviews.

Name: woocommerce/product-details
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports: align, spacing (margin)
Attributes: hideTabTitle

Product Image Gallery – woocommerce/product-image-gallery

Display a product’s images.

Name: woocommerce/product-image-gallery
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports: align, multiple
Attributes:

Product Meta – woocommerce/product-meta

Display a productâs SKU, categories, tags, and more.

Name: woocommerce/product-meta
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports: align, reusable
Attributes:

Product Reviews – woocommerce/product-reviews

A block that shows the reviews for a product.

Name: woocommerce/product-reviews
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports:
Attributes:

Product Rating – woocommerce/product-rating

Display the average rating of a product.

Name: woocommerce/product-rating
Category:
Ancestor:
Parent:
Supports: align
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

Product Rating Counter – woocommerce/product-rating-counter

Display the review count of a product

Name: woocommerce/product-rating-counter
Category: woocommerce-product-elements
Ancestor: woocommerce/single-product
Parent:
Supports: align
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

Product Rating Stars – woocommerce/product-rating-stars

Display the average rating of a product with stars

Name: woocommerce/product-rating-stars
Category: woocommerce-product-elements
Ancestor: woocommerce/single-product
Parent:
Supports: align
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

On-Sale Badge – woocommerce/product-sale-badge

Displays an on-sale badge if the product is on-sale.

Name: woocommerce/product-sale-badge
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports:
Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductTemplate, productId

Product Summary – woocommerce/product-summary

Display a short description about a product.

Name: woocommerce/product-summary
Category:
Ancestor:
Parent:
Supports:
Attributes: isDescendantOfAllProducts, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, linkText, productId, showDescriptionIfEmpty, showLink, summaryLength

Accordion Group – woocommerce/accordion-group

A group of headers and associated expandable content.

Name: woocommerce/accordion-group
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), background (backgroundImage, backgroundSize), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), html
Attributes: allowedBlocks, autoclose, iconPosition

Accordion Header – woocommerce/accordion-header

Accordion header.

Name: woocommerce/accordion-header
Category: woocommerce
Ancestor:
Parent: woocommerce/accordion-item
Supports: anchor, border, color (background, gradient, text), interactivity, layout, shadow, spacing (margin, padding), typography (fontSize, textAlign), align
Attributes: icon, iconPosition, level, levelOptions, openByDefault, textAlignment, title

Accordion – woocommerce/accordion-item

A single accordion that displays a header and expandable content.

Name: woocommerce/accordion-item
Category: woocommerce
Ancestor:
Parent: woocommerce/accordion-group
Supports: align (full, wide), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
Attributes: openByDefault

Accordion Panel – woocommerce/accordion-panel

Accordion Panel

Name: woocommerce/accordion-panel
Category: woocommerce
Ancestor:
Parent: woocommerce/accordion-item
Supports: border, color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
Attributes: allowedBlocks, isSelected, openByDefault, templateLock

Active Filters Controls – woocommerce/active-filters

Display the currently active filters.

Name: woocommerce/active-filters
Category: woocommerce
Ancestor:
Parent:
Supports: color (text, background), html, inserter, lock, multiple
Attributes: displayStyle, headingLevel

Add to Cart with Options (Experimental) – woocommerce/add-to-cart-with-options

Create an “Add To Cart” composition by using blocks

Name: woocommerce/add-to-cart-with-options
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports: interactivity
Attributes:

Grouped Product Selector (Experimental) – woocommerce/add-to-cart-with-options-grouped-product-selector

Display a group of products that can be added to the cart.

Name: woocommerce/add-to-cart-with-options-grouped-product-selector
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options
Parent:
Supports:
Attributes:

Grouped Product Selector Item Template (Experimental) – woocommerce/add-to-cart-with-options-grouped-product-selector-item

A list item template that represents a child product within the Grouped Product Selector block.

Name: woocommerce/add-to-cart-with-options-grouped-product-selector-item
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options-grouped-product-selector
Parent:
Supports: inserter
Attributes:

Quantity Selector (Experimental) – woocommerce/add-to-cart-with-options-quantity-selector

Display an input field to select the number of products to add to cart.

Name: woocommerce/add-to-cart-with-options-quantity-selector
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options
Parent:
Supports:
Attributes: quantitySelectorStyle

Variation Selector Item Template (Experimental) – woocommerce/add-to-cart-with-options-variation-selector-item

A list item template that represents an attribute within the Variation Selector block.

Name: woocommerce/add-to-cart-with-options-variation-selector-item
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options-variation-selector
Parent:
Supports: inserter
Attributes:

Variation Selector Attribute Name (Experimental) – woocommerce/add-to-cart-with-options-variation-selector-attribute-name

The name of a given variable product attribute.

Name: woocommerce/add-to-cart-with-options-variation-selector-attribute-name
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options-variation-selector-item
Parent:
Supports: color (background, gradients, text), spacing (padding), typography (fontSize, lineHeight), alignWide, align, inserter
Attributes:

Variation Selector Attribute Options (Experimental) – woocommerce/add-to-cart-with-options-variation-selector-attribute-options

The attribute options of a given variable product attribute.

Name: woocommerce/add-to-cart-with-options-variation-selector-attribute-options
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options-variation-selector-item
Parent:
Supports: inserter
Attributes: style

Variation Selector (Experimental) – woocommerce/add-to-cart-with-options-variation-selector

Name: woocommerce/add-to-cart-with-options-variation-selector
Category: woocommerce-product-elements
Ancestor: woocommerce/add-to-cart-with-options
Parent:
Supports:
Attributes:

Enable customers to filter the product grid by selecting one or more attributes, such as color.

Name: woocommerce/attribute-filter
Category: woocommerce
Ancestor:
Parent:
Supports: color (text, background), html, inserter, lock
Attributes: attributeId, className, displayStyle, headingLevel, isPreview, queryType, selectType, showCounts, showFilterButton

Store Breadcrumbs – woocommerce/breadcrumbs

Enable customers to keep track of their location within the store and navigate back to parent pages.

Name: woocommerce/breadcrumbs
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (link, text, background), typography (fontSize, lineHeight), html
Attributes: align, contentJustification, fontSize

Accepted Payment Methods – woocommerce/cart-accepted-payment-methods-block

Display accepted payment methods.

Name: woocommerce/cart-accepted-payment-methods-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-totals-block
Supports: inserter, align, html, multiple, reusable
Attributes:

Cart Cross-Sells – woocommerce/cart-cross-sells-block

Shows the Cross-Sells block.

Name: woocommerce/cart-cross-sells-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-items-block
Supports: inserter, align, html, multiple, reusable
Attributes:

Cart Cross-Sells Products – woocommerce/cart-cross-sells-products-block

Shows the Cross-Sells products.

Name: woocommerce/cart-cross-sells-products-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-cross-sells-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: columns, lock

Express Checkout – woocommerce/cart-express-payment-block

Allow customers to breeze through with quick payment options.

Name: woocommerce/cart-express-payment-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-totals-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: buttonBorderRadius, buttonHeight, lock, showButtonStyles

Cart Items – woocommerce/cart-items-block

Column containing cart items.

Name: woocommerce/cart-items-block
Category: woocommerce
Ancestor:
Parent: woocommerce/filled-cart-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Cart Line Items – woocommerce/cart-line-items-block

Block containing current line items in Cart.

Name: woocommerce/cart-line-items-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-items-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Order Summary – woocommerce/cart-order-summary-block

Show customers a summary of their order.

Name: woocommerce/cart-order-summary-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-totals-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Coupon Form – woocommerce/cart-order-summary-coupon-form-block

Shows the apply coupon form.

Name: woocommerce/cart-order-summary-coupon-form-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-block
Supports: align, html, multiple, reusable
Attributes: className, lock

Discount – woocommerce/cart-order-summary-discount-block

Shows the cart discount row.

Name: woocommerce/cart-order-summary-discount-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Fees – woocommerce/cart-order-summary-fee-block

Shows the cart fee row.

Name: woocommerce/cart-order-summary-fee-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Heading – woocommerce/cart-order-summary-heading-block

Shows the heading row.

Name: woocommerce/cart-order-summary-heading-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-block
Supports: align, html, multiple, reusable
Attributes: className, content, lock

Shipping – woocommerce/cart-order-summary-shipping-block

Shows the cart shipping row.

Name: woocommerce/cart-order-summary-shipping-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: lock

Subtotal – woocommerce/cart-order-summary-subtotal-block

Shows the cart subtotal row.

Name: woocommerce/cart-order-summary-subtotal-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Taxes – woocommerce/cart-order-summary-taxes-block

Shows the cart taxes row.

Name: woocommerce/cart-order-summary-taxes-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Totals – woocommerce/cart-order-summary-totals-block

Shows the subtotal, fees, discounts, shipping and taxes.

Name: woocommerce/cart-order-summary-totals-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-order-summary-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Cart Totals – woocommerce/cart-totals-block

Column containing the cart totals.

Name: woocommerce/cart-totals-block
Category: woocommerce
Ancestor:
Parent: woocommerce/filled-cart-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: checkbox, lock, text

Empty Cart – woocommerce/empty-cart-block

Contains blocks that are displayed when the cart is empty.

Name: woocommerce/empty-cart-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart
Supports: align (wide), html, inserter, lock, multiple, reusable
Attributes: lock

Filled Cart – woocommerce/filled-cart-block

Contains blocks that are displayed when the cart contains products.

Name: woocommerce/filled-cart-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart
Supports: align (wide), html, inserter, lock, multiple, reusable
Attributes: lock

Proceed to Checkout – woocommerce/proceed-to-checkout-block

Allow customers proceed to Checkout.

Name: woocommerce/proceed-to-checkout-block
Category: woocommerce
Ancestor:
Parent: woocommerce/cart-totals-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Cart Link – woocommerce/cart-link

Display a link to the cart.

Name: woocommerce/cart-link
Category: woocommerce
Ancestor:
Parent:
Supports: color (background, link, text), spacing (padding), typography (fontSize), html, multiple
Attributes: cartIcon, content, isPreview

Catalog Sorting – woocommerce/catalog-sorting

Enable customers to change the sorting order of the products.

Name: woocommerce/catalog-sorting
Category: woocommerce
Ancestor:
Parent:
Supports: color (text, background), typography (fontSize)
Attributes: fontSize, useLabel

Checkout – woocommerce/checkout

Display a checkout form so your customers can submit orders.

Name: woocommerce/checkout
Category: woocommerce
Ancestor:
Parent:
Supports: align (wide), html, multiple
Attributes: align, isPreview, showFormStepNumbers

Actions – woocommerce/checkout-actions-block

Allow customers to place their order.

Name: woocommerce/checkout-actions-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: cartPageId, className, lock, priceSeparator, showReturnToCart

Additional information – woocommerce/checkout-additional-information-block

Render additional fields in the ‘Additional information’ location.

Name: woocommerce/checkout-additional-information-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, multiple, reusable
Attributes: className, lock

Billing Address – woocommerce/checkout-billing-address-block

Collect your customer’s billing address.

Name: woocommerce/checkout-billing-address-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Contact Information – woocommerce/checkout-contact-information-block

Collect your customer’s contact information.

Name: woocommerce/checkout-contact-information-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Express Checkout – woocommerce/checkout-express-payment-block

Allow customers to breeze through with quick payment options.

Name: woocommerce/checkout-express-payment-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: buttonBorderRadius, buttonHeight, className, lock, showButtonStyles

Checkout Fields – woocommerce/checkout-fields-block

Column containing checkout address fields.

Name: woocommerce/checkout-fields-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout
Supports: align, html, inserter, lock, multiple, reusable
Attributes: className, lock

Order Note – woocommerce/checkout-order-note-block

Allow customers to add a note to their order.

Name: woocommerce/checkout-order-note-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, multiple, reusable
Attributes: className, lock

Order Summary – woocommerce/checkout-order-summary-block

Show customers a summary of their order.

Name: woocommerce/checkout-order-summary-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-totals-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Cart Items – woocommerce/checkout-order-summary-cart-items-block

Shows cart items.

Name: woocommerce/checkout-order-summary-cart-items-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-block
Supports: align, html, lock, multiple, reusable
Attributes: className, disableProductDescriptions, lock

Coupon Form – woocommerce/checkout-order-summary-coupon-form-block

Shows the apply coupon form.

Name: woocommerce/checkout-order-summary-coupon-form-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-block
Supports: align, html, multiple, reusable
Attributes: className, lock

Discount – woocommerce/checkout-order-summary-discount-block

Shows the cart discount row.

Name: woocommerce/checkout-order-summary-discount-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Fees – woocommerce/checkout-order-summary-fee-block

Shows the cart fee row.

Name: woocommerce/checkout-order-summary-fee-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Shipping – woocommerce/checkout-order-summary-shipping-block

Shows the cart shipping row.

Name: woocommerce/checkout-order-summary-shipping-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: lock

Subtotal – woocommerce/checkout-order-summary-subtotal-block

Shows the cart subtotal row.

Name: woocommerce/checkout-order-summary-subtotal-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Taxes – woocommerce/checkout-order-summary-taxes-block

Shows the cart taxes row.

Name: woocommerce/checkout-order-summary-taxes-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-totals-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Totals – woocommerce/checkout-order-summary-totals-block

Shows the subtotal, fees, discounts, shipping and taxes.

Name: woocommerce/checkout-order-summary-totals-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-order-summary-block
Supports: align, html, lock, multiple, reusable
Attributes: className, lock

Payment Options – woocommerce/checkout-payment-block

Payment options for your store.

Name: woocommerce/checkout-payment-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Pickup Method – woocommerce/checkout-pickup-options-block

Shows local pickup locations.

Name: woocommerce/checkout-pickup-options-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Shipping Address – woocommerce/checkout-shipping-address-block

Collect your customer’s shipping address.

Name: woocommerce/checkout-shipping-address-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Delivery – woocommerce/checkout-shipping-method-block

Select between shipping or local pickup.

Name: woocommerce/checkout-shipping-method-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Shipping Options – woocommerce/checkout-shipping-methods-block

Display shipping options and rates for your store.

Name: woocommerce/checkout-shipping-methods-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Terms and Conditions – woocommerce/checkout-terms-block

Ensure that customers agree to your Terms & Conditions and Privacy Policy.

Name: woocommerce/checkout-terms-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout-fields-block
Supports: align, html, multiple, reusable
Attributes: checkbox, className, showSeparator, text

Checkout Totals – woocommerce/checkout-totals-block

Column containing the checkout totals.

Name: woocommerce/checkout-totals-block
Category: woocommerce
Ancestor:
Parent: woocommerce/checkout
Supports: align, html, inserter, lock, multiple, reusable
Attributes: checkbox, className, text

Classic Shortcode – woocommerce/classic-shortcode

Renders classic WooCommerce shortcodes.

Name: woocommerce/classic-shortcode
Category: woocommerce
Ancestor:
Parent:
Supports: align, inserter, html, multiple, reusable
Attributes: align, shortcode

Coming Soon – woocommerce/coming-soon

Name: woocommerce/coming-soon
Category: woocommerce
Ancestor:
Parent:
Supports: color (background, text), inserter
Attributes: color, comingSoonPatternId, storeOnly

Customer account – woocommerce/customer-account

A block that allows your customers to log in and out of their accounts in your store.

Name: woocommerce/customer-account
Category: woocommerce
Ancestor:
Parent:
Supports: align, color (background, text), spacing (margin, padding), typography (fontSize)
Attributes: displayStyle, iconClass, iconStyle

Featured Category – woocommerce/featured-category

Visually highlight a product category and encourage prompt action.

Name: woocommerce/featured-category
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), ariaLabel, color (background, text), spacing (padding), html
Attributes: alt, categoryId, contentAlign, dimRatio, editMode, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewCategory, showDesc

Hand-picked Products – woocommerce/handpicked-products

Display a selection of hand-picked products in a grid.

Name: woocommerce/handpicked-products
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: align, alignButtons, columns, contentVisibility, isPreview, orderby, products

Mini-Cart – woocommerce/mini-cart

Display a button for shoppers to quickly view their cart.

Name: woocommerce/mini-cart
Category: woocommerce
Ancestor:
Parent:
Supports: typography (fontSize), html, multiple
Attributes: addToCartBehaviour, cartAndCheckoutRenderStyle, hasHiddenPrice, iconColor, iconColorValue, isPreview, miniCartIcon, onCartClickBehaviour, priceColor, priceColorValue, productCountColor, productCountColorValue, productCountVisibility

Empty Mini-Cart view – woocommerce/empty-mini-cart-contents-block

Blocks that are displayed when the Mini-Cart is empty.

Name: woocommerce/empty-mini-cart-contents-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-contents
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Filled Mini-Cart view – woocommerce/filled-mini-cart-contents-block

Contains blocks that display the content of the Mini-Cart.

Name: woocommerce/filled-mini-cart-contents-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-contents
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Mini-Cart View Cart Button – woocommerce/mini-cart-cart-button-block

Block that displays the cart button when the Mini-Cart has products.

Name: woocommerce/mini-cart-cart-button-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-footer-block
Supports: color (background, text), inserter, align, html, multiple, reusable
Attributes: lock

Mini-Cart Proceed to Checkout Button – woocommerce/mini-cart-checkout-button-block

Block that displays the checkout button when the Mini-Cart has products.

Name: woocommerce/mini-cart-checkout-button-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-footer-block
Supports: color (background, text), inserter, align, html, multiple, reusable
Attributes: lock

Mini-Cart Footer – woocommerce/mini-cart-footer-block

Name: woocommerce/mini-cart-footer-block
Category: woocommerce
Ancestor:
Parent: woocommerce/filled-mini-cart-contents-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Mini-Cart Items – woocommerce/mini-cart-items-block

Contains the products table and other custom blocks of filled mini-cart.

Name: woocommerce/mini-cart-items-block
Category: woocommerce
Ancestor:
Parent: woocommerce/filled-mini-cart-contents-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Mini-Cart Products Table – woocommerce/mini-cart-products-table-block

Block that displays the products table of the Mini-Cart block.

Name: woocommerce/mini-cart-products-table-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-items-block
Supports: align, html, inserter, lock, multiple, reusable
Attributes: lock

Mini-Cart Shopping Button – woocommerce/mini-cart-shopping-button-block

Block that displays the shopping button when the Mini-Cart is empty.

Name: woocommerce/mini-cart-shopping-button-block
Category: woocommerce
Ancestor:
Parent: woocommerce/empty-mini-cart-contents-block
Supports: color (background, text), inserter, align, html, multiple, reusable
Attributes: lock

Mini-Cart Title – woocommerce/mini-cart-title-block

Block that displays the title of the Mini-Cart block.

Name: woocommerce/mini-cart-title-block
Category: woocommerce
Ancestor:
Parent: woocommerce/filled-mini-cart-contents-block
Supports: color (text, background), typography (fontSize), align, html, inserter, lock, multiple, reusable
Attributes: lock

Mini-Cart Title Items Counter – woocommerce/mini-cart-title-items-counter-block

Block that displays the items counter part of the Mini-Cart Title block.

Name: woocommerce/mini-cart-title-items-counter-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-title-block
Supports: color (background, text), spacing (padding), typography (fontSize), align, html, inserter, lock, multiple, reusable
Attributes:

Mini-Cart Title Label – woocommerce/mini-cart-title-label-block

Block that displays the ‘Your cart’ part of the Mini-Cart Title block.

Name: woocommerce/mini-cart-title-label-block
Category: woocommerce
Ancestor:
Parent: woocommerce/mini-cart-title-block
Supports: color (background, text), spacing (padding), typography (fontSize), align, html, inserter, lock, multiple, reusable
Attributes: label

Additional Field List – woocommerce/order-confirmation-additional-fields

Display the list of additional field values from the current order.

Name: woocommerce/order-confirmation-additional-fields
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: align, className

Additional Fields – woocommerce/order-confirmation-additional-fields-wrapper

Display additional checkout fields from the ‘contact’ and ‘order’ locations.

Name: woocommerce/order-confirmation-additional-fields-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: heading

Additional Information – woocommerce/order-confirmation-additional-information

Displays additional information provided by third-party extensions for the current order.

Name: woocommerce/order-confirmation-additional-information
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: align, className

Billing Address – woocommerce/order-confirmation-billing-address

Display the order confirmation billing address.

Name: woocommerce/order-confirmation-billing-address
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, text), spacing (margin, padding), typography (fontSize, lineHeight), html, inserter, multiple
Attributes: align

Billing Address Section – woocommerce/order-confirmation-billing-wrapper

Display the order confirmation billing section.

Name: woocommerce/order-confirmation-billing-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: heading

Account Creation – woocommerce/order-confirmation-create-account

Allow customers to create an account after their purchase.

Name: woocommerce/order-confirmation-create-account
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, button, text), spacing (margin, padding), html, inserter, lock, multiple
Attributes: align, className, customerEmail, hasDarkControls, lock, nonceToken

Order Downloads – woocommerce/order-confirmation-downloads

Display links to purchased downloads.

Name: woocommerce/order-confirmation-downloads
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
Attributes: align, className

Downloads Section – woocommerce/order-confirmation-downloads-wrapper

Display the downloadable products section.

Name: woocommerce/order-confirmation-downloads-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: heading

Shipping Address – woocommerce/order-confirmation-shipping-address

Display the order confirmation shipping address.

Name: woocommerce/order-confirmation-shipping-address
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, text), spacing (margin, padding), typography (fontSize, lineHeight), html, inserter, multiple
Attributes: align

Shipping Address Section – woocommerce/order-confirmation-shipping-wrapper

Display the order confirmation shipping section.

Name: woocommerce/order-confirmation-shipping-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: heading

Order Status – woocommerce/order-confirmation-status

Display a “thank you” message, or a sentence regarding the current order status.

Name: woocommerce/order-confirmation-status
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
Attributes: align, className

Order Summary – woocommerce/order-confirmation-summary

Display the order summary on the order confirmation page.

Name: woocommerce/order-confirmation-summary
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
Attributes: align, className

Order Totals – woocommerce/order-confirmation-totals

Display the items purchased and order totals.

Name: woocommerce/order-confirmation-totals
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
Attributes: align, className

Order Totals Section – woocommerce/order-confirmation-totals-wrapper

Display the order details section.

Name: woocommerce/order-confirmation-totals-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), spacing (margin, padding), html, multiple
Attributes: heading

WooCommerce Page – woocommerce/page-content-wrapper

Displays WooCommerce page content.

Name: woocommerce/page-content-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports: html, inserter, multiple
Attributes: page

Enable customers to filter the product grid by choosing a price range.

Name: woocommerce/price-filter
Category: woocommerce
Ancestor:
Parent:
Supports: color (text, background), html, inserter, lock, multiple
Attributes: className, headingLevel, inlineInput, showFilterButton, showInputFields

Best Selling Products – woocommerce/product-best-sellers

Display a grid of your all-time best selling products.

Name: woocommerce/product-best-sellers
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

Name: woocommerce/product-categories
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), color (link, text, background), typography (fontSize, lineHeight), html
Attributes: align, hasCount, hasEmpty, hasImage, isDropdown, isHierarchical, showChildrenOnly

Products by Category – woocommerce/product-category

Display a grid of products from your selected categories.

Name: woocommerce/product-category
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

Product Collection – woocommerce/product-collection

Display a collection of products from your store.

Name: woocommerce/product-collection
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), anchor, interactivity, html
Attributes: __privatePreviewState, collection, convertedFromProducts, dimensions, displayLayout, forcePageReload, hideControls, query, queryContextIncludes, queryId, tagName

No results – woocommerce/product-collection-no-results

The contents of this block will display when there are no products found.

Name: woocommerce/product-collection-no-results
Category: woocommerce
Ancestor: woocommerce/product-collection
Parent:
Supports: align, color (background, gradients, link, text), typography (fontSize, lineHeight), html, reusable
Attributes:

Blockified Product Details – woocommerce/blockified-product-details

Display a product’s description, attributes, and reviews

Name: woocommerce/blockified-product-details
Category: woocommerce
Ancestor:
Parent:
Supports:
Attributes:

Add to Cart with Options – woocommerce/add-to-cart-form

Display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation.

Name: woocommerce/add-to-cart-form
Category: woocommerce-product-elements
Ancestor:
Parent:
Supports: interactivity
Attributes: quantitySelectorStyle

Let shoppers filter products displayed on the page.

Name: woocommerce/product-filters
Category: woocommerce
Ancestor:
Parent:
Supports: align, color (background, button, heading, text, enableContrastChecker), inserter, interactivity, layout (default, allowEditing), multiple, spacing (blockGap), typography (fontSize)
Attributes: isPreview

Display the currently active filters.

Enable customers to filter the product grid by selecting one or more attributes, such as color.

Name: woocommerce/product-filter-attribute
Category: woocommerce
Ancestor: woocommerce/product-filters
Parent:
Supports: color (text, background), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
Attributes: attributeId, displayStyle, hideEmpty, isPreview, queryType, selectType, showCounts, sortOrder

Allows shoppers to clear active filters.

Let shoppers filter products by choosing a price range.

A slider helps shopper choose a price range.

Name: woocommerce/product-filter-price-slider
Category: woocommerce
Ancestor: woocommerce/product-filter-price
Parent:
Supports: color (background, enableContrastChecker, text), interactivity, html
Attributes: customSlider, customSliderHandle, customSliderHandleBorder, inlineInput, showInputFields, slider, sliderHandle, sliderHandleBorder

Enable customers to filter the product collection by rating.

Name: woocommerce/product-filter-rating
Category: woocommerce
Ancestor: woocommerce/product-filters
Parent:
Supports: color (text, background), interactivity
Attributes: className, isPreview, minRating, showCounts

Display removable active filters as chips.

Let shoppers filter products by choosing stock status.

Name: woocommerce/product-filter-status
Category: woocommerce
Ancestor: woocommerce/product-filters
Parent:
Supports: color (text, background), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html
Attributes: displayStyle, hideEmpty, isPreview, showCounts

Product Gallery (Beta) – woocommerce/product-gallery

Showcase your products relevant images and media.

Name: woocommerce/product-gallery
Category: woocommerce
Ancestor: woocommerce/single-product
Parent:
Supports: align, interactivity
Attributes: cropImages, fullScreenOnClick, hoverZoom

Large Image – woocommerce/product-gallery-large-image

Display the Large Image of a product.

Name: woocommerce/product-gallery-large-image
Category: woocommerce
Ancestor: woocommerce/product-gallery
Parent:
Supports: interactivity
Attributes:

Next/Previous Buttons – woocommerce/product-gallery-large-image-next-previous

Display next and previous buttons.

Name: woocommerce/product-gallery-large-image-next-previous
Category: woocommerce
Ancestor: woocommerce/product-gallery-large-image
Parent:
Supports: layout (allowVerticalAlignment, default, allowInheriting, allowJustification, allowOrientation)
Attributes:

Thumbnails – woocommerce/product-gallery-thumbnails

Display the Thumbnails of a product.

Name: woocommerce/product-gallery-thumbnails
Category: woocommerce
Ancestor: woocommerce/product-gallery
Parent:
Supports: spacing (margin)
Attributes: numberOfThumbnails

Newest Products – woocommerce/product-new

Display a grid of your newest products.

Name: woocommerce/product-new
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

Product Results Count – woocommerce/product-results-count

Display the number of products on the archive page or search result page.

Name: woocommerce/product-results-count
Category: woocommerce
Ancestor:
Parent:
Supports: color (text, background), typography (fontSize)
Attributes:

Products by Tag – woocommerce/product-tag

Display a grid of products with selected tags.

Name: woocommerce/product-tag
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, columns, contentVisibility, isPreview, orderby, rows, stockStatus, tagOperator, tags

Product Template – woocommerce/product-template

Contains the block elements used to render a product.

Name: woocommerce/product-template
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), html, inserter, reusable
Attributes:

Top Rated Products – woocommerce/product-top-rated

Display a grid of your top rated products.

Name: woocommerce/product-top-rated
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

All Products – woocommerce/all-products

Display products from your store in a grid layout.

Name: woocommerce/all-products
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter, multiple
Attributes: alignButtons, columns, contentVisibility, isPreview, layoutConfig, orderby, rows

Products by Attribute – woocommerce/products-by-attribute

Display a grid of products with selected attributes.

Name: woocommerce/products-by-attribute
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), html, inserter
Attributes: alignButtons, attrOperator, attributes, columns, contentVisibility, isPreview, orderby, rows, stockStatus

Filter by Rating Controls – woocommerce/rating-filter

Enable customers to filter the product grid by rating.

Name: woocommerce/rating-filter
Category: woocommerce
Ancestor:
Parent:
Supports: color (background, button, text), html, inserter, lock, multiple
Attributes: className, displayStyle, isPreview, selectType, showCounts, showFilterButton

Single Product – woocommerce/single-product

Display a single product.

Name: woocommerce/single-product
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide)
Attributes: isPreview, productId

Filter by Stock Controls – woocommerce/stock-filter

Enable customers to filter the product grid by stock status.

Name: woocommerce/stock-filter
Category: woocommerce
Ancestor:
Parent:
Supports: color (background, button, text), html, inserter, lock, multiple
Attributes: className, displayStyle, headingLevel, isPreview, selectType, showCounts, showFilterButton

Store Notices – woocommerce/store-notices

Display shopper-facing notifications generated by WooCommerce or extensions.

Name: woocommerce/store-notices
Category: woocommerce
Ancestor:
Parent:
Supports: align (full, wide), multiple
Attributes: align

Last updated: March 11, 2025