Back to Woocommerce

Blocks reference

docs/block-development/reference/block-references.md

10.8.0-dev65.5 KB
Original Source

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
  • Supports: color (background, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize)
  • 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
  • Supports: align (full, wide), color (background, text, link), email, interactivity, spacing (margin, padding), 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: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: dimensions (aspectRatio), email, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize), html
  • 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/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: color (background, text, link), email, interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

Display a product's images.

  • Name: woocommerce/product-image-gallery
  • Category: woocommerce-product-elements
  • Supports: align, interactivity (clientNavigation), multiple

Product Meta - woocommerce/product-meta

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

  • Name: woocommerce/product-meta
  • Category: woocommerce-product-elements
  • Supports: align, interactivity (clientNavigation), reusable

Product Rating - woocommerce/product-rating

Display the average rating of a product.

  • Name: woocommerce/product-rating
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: color (text, background, link), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize)
  • 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
  • Supports: color (link, background, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize), inserter
  • 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
  • Supports: color (text, background, link), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize), inserter
  • Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

Display related products.

  • Name: woocommerce/related-products
  • Category: woocommerce
  • Supports: align, interactivity (clientNavigation), inserter, reusable

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: woocommerce/single-product, woocommerce/product-template, core/post-template, woocommerce/product-gallery
  • Supports: align, color (background, gradients, text, link), email, interactivity (clientNavigation), spacing (margin), typography (fontSize, lineHeight), html
  • Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId

Product SKU - woocommerce/product-sku

Displays the SKU of a product.

  • Name: woocommerce/product-sku
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/product-meta, woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: color (background, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isDescendantOfAllProducts, prefix, productId, showProductSelector, suffix

Product Stock Indicator - woocommerce/product-stock-indicator

Let shoppers know when products are out of stock or on backorder. This block is hidden when products are in stock.

  • Name: woocommerce/product-stock-indicator
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: color (background, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isDescendantOfAllProducts

Product Summary - woocommerce/product-summary

Display a short description about a product.

  • Name: woocommerce/product-summary
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign)
  • Attributes: isDescendantOfAllProducts, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, linkText, productId, showDescriptionIfEmpty, showLink, summaryLength

Product Title - woocommerce/product-title

Display the title of a product.

  • Name: woocommerce/product-title
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products
  • Supports: color (background, gradients, text, link), interactivity (clientNavigation), spacing (margin), typography (fontSize, lineHeight), html
  • Attributes: align, headingLevel, linkTarget, productId, showProductLink

Accordion Group - woocommerce/accordion-group

A group of headers and associated expandable content.

  • Name: woocommerce/accordion-group
  • Category: woocommerce
  • 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
  • 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
  • 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
  • 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
  • Supports: color (text, background), interactivity (clientNavigation), html, inserter, lock, multiple
  • Attributes: displayStyle, headingLevel

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

Display a button that lets customers add a product to their cart. Use the added options to optimize for different product types.

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

Add to Cart + Options (Beta) - woocommerce/add-to-cart-with-options

Use blocks to create an "Add to cart" area that's customized for different product types, such as variable and grouped.

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

Grouped Product Selector (Beta) - 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
  • Supports: interactivity

Grouped Product: Template (Beta) - woocommerce/add-to-cart-with-options-grouped-product-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-item
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-grouped-product-selector
  • Supports: interactivity, inserter

Grouped Product: Item Label (Beta) - woocommerce/add-to-cart-with-options-grouped-product-item-label

Display the product title as a label or paragraph.

  • Name: woocommerce/add-to-cart-with-options-grouped-product-item-label
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-grouped-product-item
  • Supports: color (background, gradients, text), layout (selfStretch), spacing (blockGap, margin, padding), typography (fontSize, lineHeight, textAlign), html

Grouped Product: Item Selector (Beta) - woocommerce/add-to-cart-with-options-grouped-product-item-selector

Add a way of selecting a child product within the Grouped Product block. Depending on the type of product and its properties, this might be a button, a checkbox, or a link.

  • Name: woocommerce/add-to-cart-with-options-grouped-product-item-selector
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-grouped-product-item
  • Supports: interactivity, inserter

Product Quantity (Beta) - woocommerce/add-to-cart-with-options-quantity-selector

Display an input field customers can use to select the number of products to add to their cart.

  • Name: woocommerce/add-to-cart-with-options-quantity-selector
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options
  • Supports: interactivity

Variation Description (Beta) - woocommerce/add-to-cart-with-options-variation-description

Displays the description of the selected variation.

  • Name: woocommerce/add-to-cart-with-options-variation-description
  • Category: woocommerce
  • Ancestor: woocommerce/add-to-cart-with-options
  • Supports: color (background, gradients, link, text), dimensions (minHeight), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html

Variation Selector: Template (Beta) - woocommerce/add-to-cart-with-options-variation-selector-attribute

A template for attribute name and options that will be applied to all variable products with attributes.

  • Name: woocommerce/add-to-cart-with-options-variation-selector-attribute
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-variation-selector
  • Supports: interactivity, inserter

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

Format the name of an attribute associated with a variable product.

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

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

Display the attribute options associated with a variable product.

  • Name: woocommerce/add-to-cart-with-options-variation-selector-attribute-options
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-variation-selector-attribute
  • Supports: interactivity, inserter
  • Attributes: autoselect, disabledAttributesAction, optionStyle

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

Display any product variations available to select from and add to cart.

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

Filter by Attribute Controls - woocommerce/attribute-filter

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

  • Name: woocommerce/attribute-filter
  • Category: woocommerce
  • Supports: color (text, background), html, inserter, interactivity, 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
  • Supports: align (full, wide), color (link, text, background), interactivity (clientNavigation), 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
  • Parent: woocommerce/cart-totals-block
  • Supports: inserter, align, html, multiple, reusable

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

Shows the Cross-Sells block.

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

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

Shows the Cross-Sells products.

  • Name: woocommerce/cart-cross-sells-products-block
  • Category: woocommerce
  • Parent: woocommerce/cart-cross-sells-block
  • Supports: email, 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Parent: woocommerce/cart-totals-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

Display a link to the cart.

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

Catalog Sorting - woocommerce/catalog-sorting

Enable customers to change the sorting order of the products.

  • Name: woocommerce/catalog-sorting
  • Category: woocommerce
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize)
  • Attributes: fontSize, useLabel

Product Category Description - woocommerce/category-description

Displays the current category description.

  • Name: woocommerce/category-description
  • Category: woocommerce
  • Supports: color (background, text), spacing (margin, padding), typography, align, html
  • Attributes: textAlign

Product Category Title - woocommerce/category-title

Displays the current category title and lets permitted users edit it.

  • Name: woocommerce/category-title
  • Category: woocommerce
  • Supports: color (background, text), spacing (margin, padding), typography, align, html
  • Attributes: isLink, level, linkTarget, rel, textAlign

Checkout - woocommerce/checkout

Display a checkout form so your customers can submit orders.

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

Actions - woocommerce/checkout-actions-block

Allow customers to place their order.

  • Name: woocommerce/checkout-actions-block
  • Category: woocommerce
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Supports: align, inserter, interactivity (clientNavigation), html, multiple, reusable
  • Attributes: align, shortcode

Coming Soon - woocommerce/coming-soon

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

Coupon Code - woocommerce/coupon-code

Include a coupon code to entice customers to make a purchase.

  • Name: woocommerce/coupon-code
  • Category: woocommerce
  • Supports: align, color (background, text), email, spacing (margin, padding), typography (fontSize), html
  • Attributes: couponCode

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
  • Supports: align, color (background, text), interactivity, spacing (margin, padding), typography (fontSize)
  • Attributes: displayStyle, hasDropdownNavigation, iconClass, iconStyle

Email Content - woocommerce/email-content

A placeholder block for email content.

  • Name: woocommerce/email-content
  • Category: woocommerce
  • Supports: email, inserter
  • Attributes: emailType, postId

Visually highlight a product category and encourage prompt action.

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

Highlight a product or variation.

  • Name: woocommerce/featured-product
  • Category: woocommerce
  • Supports: align (full, wide), ariaLabel, color (background, text), filter (duotone), interactivity (clientNavigation), multiple, spacing (padding), html
  • Attributes: alt, contentAlign, dimRatio, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewProduct, productId

Filter Block - woocommerce/filter-wrapper

  • Name: woocommerce/filter-wrapper
  • Category: woocommerce
  • Supports: interactivity (clientNavigation), inserter
  • Attributes: filterType, heading

Hand-picked Products - woocommerce/handpicked-products

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

  • Name: woocommerce/handpicked-products
  • Category: woocommerce
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: spacing (margin, padding), typography (fontSize), html, multiple
  • Attributes: addToCartBehaviour, cartAndCheckoutRenderStyle, hasHiddenPrice, iconColor, iconColorValue, miniCartIcon, onCartClickBehaviour, priceColor, priceColorValue, productCountColor, productCountColorValue, productCountVisibility

Mini-Cart Contents - woocommerce/mini-cart-contents

Display a Mini-Cart widget.

  • Name: woocommerce/mini-cart-contents
  • Category: woocommerce
  • Supports: color (background, link, text), align, html, inserter, lock, multiple, reusable
  • Attributes: lock, width

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
  • Parent: woocommerce/mini-cart-contents
  • Supports: interactivity, 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
  • Parent: woocommerce/mini-cart-contents
  • Supports: interactivity, 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
  • Parent: woocommerce/mini-cart-footer-block
  • Supports: color (background, text), inserter, interactivity (clientNavigation), align, html, multiple, reusable
  • Attributes: cartButtonLabel, 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
  • Parent: woocommerce/mini-cart-footer-block
  • Supports: color (background, text), inserter, interactivity (clientNavigation), align, html, multiple, reusable
  • Attributes: checkoutButtonLabel, lock

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

  • Name: woocommerce/mini-cart-footer-block
  • Category: woocommerce
  • Parent: woocommerce/filled-mini-cart-contents-block
  • Supports: interactivity, 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
  • Parent: woocommerce/filled-mini-cart-contents-block
  • Supports: interactivity (clientNavigation), 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
  • Parent: woocommerce/mini-cart-items-block
  • Supports: interactivity, 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
  • Parent: woocommerce/empty-mini-cart-contents-block
  • Supports: color (background, text), inserter, interactivity (clientNavigation), align, html, multiple, reusable
  • Attributes: lock, startShoppingButtonLabel

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
  • Parent: woocommerce/filled-mini-cart-contents-block
  • Supports: color (text, background), interactivity (clientNavigation), 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
  • Parent: woocommerce/mini-cart-title-block
  • Supports: color (background, text), interactivity, spacing (padding), typography (fontSize), align, html, inserter, lock, multiple, reusable

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
  • Parent: woocommerce/mini-cart-title-block
  • Supports: color (background, text), interactivity (clientNavigation), spacing (padding), typography (fontSize), align, html, inserter, lock, multiple, reusable
  • Attributes: label

Display next and previous buttons.

  • Name: woocommerce/product-gallery-large-image-next-previous
  • Category: woocommerce
  • Ancestor: woocommerce/product-gallery-large-image, woocommerce/product-collection
  • Supports: align, color (background, text), interactivity, layout (allowVerticalAlignment, default, allowJustification, allowOrientation), shadow, spacing (margin)

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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Supports: html, inserter, multiple
  • Attributes: page

Payment Method Icons - woocommerce/payment-method-icons

Display icons for available payment methods.

  • Name: woocommerce/payment-method-icons
  • Category: woocommerce
  • Supports: spacing (margin, padding)
  • Attributes: numberOfIcons

Filter by Price Controls - woocommerce/price-filter

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

  • Name: woocommerce/price-filter
  • Category: woocommerce
  • Supports: color (text, background), interactivity (clientNavigation), 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
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter
  • Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

Product Categories List - woocommerce/product-categories

Show all product categories as a list or dropdown.

  • Name: woocommerce/product-categories
  • Category: woocommerce
  • Supports: align (full, wide), color (link, text, background), interactivity (clientNavigation), 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
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: align (full, wide), anchor, email, 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
  • Supports: align, color (background, gradients, link, text), email, interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable

Product Description - woocommerce/product-description

Displays the description of the product.

  • Name: woocommerce/product-description
  • Category: woocommerce
  • Ancestor: woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html

Product Details - woocommerce/product-details

Display a product's description, attributes, and reviews

  • Name: woocommerce/product-details
  • Category: woocommerce
  • Supports: align (full, wide), interactivity (clientNavigation)
  • Attributes: align, hideTabTitle

Product Filters - woocommerce/product-filters

Let shoppers filter products displayed on the page.

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

Active Filters - woocommerce/product-filter-active

Display the currently active filters.

  • Name: woocommerce/product-filter-active
  • Category: woocommerce
  • Ancestor: woocommerce/product-filters
  • Supports: interactivity, spacing (margin, padding, blockGap)

Attribute Filter - woocommerce/product-filter-attribute

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
  • Supports: color (text, background), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
  • Attributes: attributeId, displayStyle, hideEmpty, isPreview, queryType, selectType, showCounts, sortOrder

List - woocommerce/product-filter-checkbox-list

Display a list of filter options.

  • Name: woocommerce/product-filter-checkbox-list
  • Category: woocommerce
  • Ancestor: woocommerce/product-filter-attribute, woocommerce/product-filter-status, woocommerce/product-filter-taxonomy, woocommerce/product-filter-rating
  • Supports: interactivity
  • Attributes: customLabelElement, customOptionElement, customOptionElementBorder, customOptionElementSelected, labelElement, optionElement, optionElementBorder, optionElementSelected

Chips - woocommerce/product-filter-chips

Display filter options as chips.

  • Name: woocommerce/product-filter-chips
  • Category: woocommerce
  • Ancestor: woocommerce/product-filter-attribute, woocommerce/product-filter-taxonomy, woocommerce/product-filter-status
  • Supports: interactivity
  • Attributes: chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText, customSelectedChipBackground, customSelectedChipBorder, customSelectedChipText, selectedChipBackground, selectedChipBorder, selectedChipText

Clear filters - woocommerce/product-filter-clear-button

Allows shoppers to clear active filters.

  • Name: woocommerce/product-filter-clear-button
  • Category: woocommerce
  • Ancestor: woocommerce/product-filter-active
  • Supports: inserter, interactivity

Price Filter - woocommerce/product-filter-price

Let shoppers filter products by choosing a price range.

  • Name: woocommerce/product-filter-price
  • Category: woocommerce
  • Ancestor: woocommerce/product-filters
  • Supports: interactivity, html

Price Slider - woocommerce/product-filter-price-slider

A slider helps shopper choose a price range.

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

Rating Filter - woocommerce/product-filter-rating

Enable customers to filter the product collection by rating.

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

Chips - woocommerce/product-filter-removable-chips

Display removable active filters as chips.

  • Name: woocommerce/product-filter-removable-chips
  • Category: woocommerce
  • Ancestor: woocommerce/product-filter-active
  • Supports: interactivity, layout (default, allowInheriting, allowSwitching, allowVerticalAlignment)
  • Attributes: chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText

Status Filter - woocommerce/product-filter-status

Let shoppers filter products by choosing stock status.

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

Taxonomy Filter - woocommerce/product-filter-taxonomy

Enable customers to filter the product collection by selecting one or more taxonomy terms, such as categories, brands, or tags.

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

Showcase your products relevant images and media.

  • Name: woocommerce/product-gallery
  • Category: woocommerce
  • Ancestor: woocommerce/single-product
  • Supports: align, email, interactivity, layout (allowEditing, allowOrientation, default, allowJustification)
  • Attributes: fullScreenOnClick, hoverZoom

Container for the current gallery image, navigation buttons, zoom functionality and more.

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

Display the Thumbnails of a product.

  • Name: woocommerce/product-gallery-thumbnails
  • Category: woocommerce
  • Ancestor: woocommerce/product-gallery
  • Supports: interactivity, spacing (margin)
  • Attributes: activeThumbnailStyle, aspectRatio, thumbnailSize

Newest Products - woocommerce/product-new

Display a grid of your newest products.

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

On Sale Products - woocommerce/product-on-sale

Display a grid of products currently on sale.

  • Name: woocommerce/product-on-sale
  • Category: woocommerce
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter
  • Attributes: alignButtons, catOperator, categories, columns, contentVisibility, 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
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize)

Product Reviews - woocommerce/product-reviews

Display a product's reviews

  • Name: woocommerce/product-reviews
  • Category: woocommerce
  • Supports: align (full, wide), color (background, gradients, heading, link, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: tagName

Review Author Name - woocommerce/product-review-author-name

Displays the name of the author of the review.

  • Name: woocommerce/product-review-author-name
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: isLink, linkTarget, textAlign

Review Content - woocommerce/product-review-content

Displays the contents of a product review.

  • Name: woocommerce/product-review-content
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: color (background, gradients, link, text), spacing (padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Review Date - woocommerce/product-review-date

Displays the date on which the review was posted.

  • Name: woocommerce/product-review-date
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: format, isLink

Reviews Form - woocommerce/product-review-form

Display a product's reviews form.

  • Name: woocommerce/product-review-form
  • Category: woocommerce
  • Supports: color (background, gradients, heading, link, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: textAlign

Review Rating - woocommerce/product-review-rating

Displays the rating of a product review.

  • Name: woocommerce/product-review-rating
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: color (background, gradients, text), interactivity (clientNavigation)
  • Attributes: textAlign

Reviews Template - woocommerce/product-review-template

Contains the block elements used to display product reviews, like the title, author, date, rating and more.

  • Name: woocommerce/product-review-template
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), html, reusable

Reviews Pagination - woocommerce/product-reviews-pagination

Displays a paginated navigation to next/previous set of product reviews, when applicable.

  • Name: woocommerce/product-reviews-pagination
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, allowInheriting, allowSwitching), typography (fontSize, lineHeight), html, reusable
  • Attributes: paginationArrow

Reviews Next Page - woocommerce/product-reviews-pagination-next

Displays the next product review's page link.

  • Name: woocommerce/product-reviews-pagination-next
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews-pagination
  • Supports: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Reviews Page Numbers - woocommerce/product-reviews-pagination-numbers

Displays a list of page numbers for product reviews pagination.

  • Name: woocommerce/product-reviews-pagination-numbers
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews-pagination
  • Supports: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable

Reviews Previous Page - woocommerce/product-reviews-pagination-previous

Displays the previous product review's page link.

  • Name: woocommerce/product-reviews-pagination-previous
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews-pagination
  • Supports: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • Attributes: label

Reviews Title - woocommerce/product-reviews-title

Displays a title with the number of reviews.

  • Name: woocommerce/product-reviews-title
  • Category: woocommerce
  • Ancestor: woocommerce/product-reviews
  • Supports: align, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), anchor, html
  • Attributes: level, levelOptions, showProductTitle, showReviewsCount, textAlign

Product Specifications - woocommerce/product-specifications

Display product weight, dimensions, and attributes.

  • Name: woocommerce/product-specifications
  • Category: woocommerce
  • Ancestor: woocommerce/single-product, woocommerce/product-template, core/post-template
  • Supports: align (full, wide), spacing (margin, padding), typography (fontSize, lineHeight), html
  • Attributes: showAttributes, showDimensions, showWeight

Products by Tag - woocommerce/product-tag

Display a grid of products with selected tags.

  • Name: woocommerce/product-tag
  • Category: woocommerce
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: align (full, wide), anchor, color (background, gradients, link, text), email, interactivity, layout (allowEditing, allowInheriting, allowSizingOnChildren, allowSwitching, allowVerticalAlignment), typography (fontSize, lineHeight), html, inserter, reusable

Top Rated Products - woocommerce/product-top-rated

Display a grid of your top rated products.

  • Name: woocommerce/product-top-rated
  • Category: woocommerce
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: align (full, wide), interactivity (clientNavigation), 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
  • Supports: color (background, button, text), interactivity (clientNavigation), html, inserter, lock, multiple
  • Attributes: className, displayStyle, isPreview, selectType, showCounts, showFilterButton

All Reviews - woocommerce/all-reviews

Show a list of all product reviews.

  • Name: woocommerce/all-reviews
  • Category: woocommerce
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize), html

Reviews by Category - woocommerce/reviews-by-category

Show product reviews from specific categories.

  • Name: woocommerce/reviews-by-category
  • Category: woocommerce
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize), html

Reviews by Product - woocommerce/reviews-by-product

Display reviews for your products.

  • Name: woocommerce/reviews-by-product
  • Category: woocommerce
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize), html

Product - woocommerce/single-product

Display a single product of your choice with full control over its presentation.

  • Name: woocommerce/single-product
  • Category: woocommerce
  • Supports: align (full, wide), interactivity
  • 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
  • Supports: color (background, button, text), interactivity (clientNavigation), 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
  • Supports: align (full, wide), interactivity (clientNavigation), multiple
  • Attributes: align