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

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

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
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

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, 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 (text, background), inserter
Attributes: color, 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), color (background, text), spacing (padding), html
Attributes: alt, categoryId, contentAlign, dimRatio, editMode, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewCategory, showDesc

Filter Block – woocommerce/filter-wrapper

Name: woocommerce/filter-wrapper
Category: woocommerce
Ancestor:
Parent:
Supports:
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
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

Block that displays the footer of the Mini-Cart 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. Configure this feature in your store settings.

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

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
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

Product Categories List – woocommerce/product-categories

Show all product categories as a list or dropdown.

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:

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: isDescendentOfSingleProductBlock, quantitySelectorStyle

Product Filters (Experimental) – woocommerce/product-filters

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, multiple, typography (fontSize)
Attributes: overlayButtonType, overlayIcon, overlayIconSize

Active (Experimental) – woocommerce/product-filter-active

Display the currently active filters.

Name: woocommerce/product-filter-active
Category: woocommerce
Ancestor: woocommerce/product-filters
Parent:
Supports: color (text, background), interactivity
Attributes: displayStyle

Attribute (Experimental) – 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
Parent:
Supports: color (text, background), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
Attributes: attributeId, clearButton, 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
Parent:
Supports: color (background, text, enableContrastChecker)
Attributes: customOptionElement, customOptionElementBorder, customOptionElementSelected, 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-status
Parent:
Supports:
Attributes: chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText, customSelectedChipBackground, customSelectedChipBorder, customSelectedChipText, selectedChipBackground, selectedChipBorder, selectedChipText

Clear (Experimental) – woocommerce/product-filter-clear-button

Allows shoppers to reset this filter.

Name: woocommerce/product-filter-clear-button
Category: woocommerce
Ancestor: woocommerce/product-filter
Parent:
Supports: interactivity, inserter
Attributes:

Product Filters Overlay (Experimental) – woocommerce/product-filters-overlay

Display product filters in an overlay on top of a page.

Name: woocommerce/product-filters-overlay
Category: woocommerce
Ancestor:
Parent:
Supports: align, color (background, text), dimensions (), layout (allowCustomContentAndWideSize), spacing (blockGap, padding), typography (), inserter, multiple
Attributes: overlayPosition, overlayStyle, style

Overlay Navigation (Experimental) – woocommerce/product-filters-overlay-navigation

Display overlay navigation controls.

Name: woocommerce/product-filters-overlay-navigation
Category: woocommerce
Ancestor: woocommerce/product-filters-overlay,woocommerce/product-filters
Parent:
Supports: align (center, left, right), color (background, text), inserter, interactivity, layout (default, allowEditing), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
Attributes: align, buttonStyle, iconSize, navigationStyle, overlayIcon, overlayMode, style, triggerType

Price (Experimental) – woocommerce/product-filter-price

Let shoppers filter products by choosing a price range.

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

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
Parent:
Supports: html
Attributes: inlineInput, showInputFields

Rating (Experimental) – woocommerce/product-filter-rating

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

Status (Experimental) – woocommerce/product-filter-status

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: clearButton, displayStyle, hideEmpty, isPreview, showCounts

Product Gallery (Beta) – woocommerce/product-gallery

Showcase your products relevant images and media.

Name: woocommerce/product-gallery
Category: woocommerce
Ancestor:
Parent:
Supports: align, interactivity, multiple
Attributes: cropImages, fullScreenOnClick, hoverZoom, mode, nextPreviousButtonsPosition, pagerDisplayMode, productGalleryClientId, thumbnailsNumberOfThumbnails, thumbnailsPosition

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:

Pager – woocommerce/product-gallery-pager

Display the gallery pager.

Name: woocommerce/product-gallery-pager
Category: woocommerce
Ancestor: woocommerce/product-gallery
Parent:
Supports:
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:

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, 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, 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: December 05, 2024