--- post_title: Blocks reference menu_title: 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). ## 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:** - **Attributes:** isDescendentOfSingleProductBlock ## 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 ## Related Products - woocommerce/related-products Display related products. - **Name:** woocommerce/related-products - **Category:** woocommerce - **Ancestor:** - **Parent:** - **Supports:** align, ~~reusable~~ - **Attributes:** ## 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:** lock ## 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 ## 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, requireApartmentField, requireCompanyField, requirePhoneField, showApartmentField, showCompanyField, showFormStepNumbers, showPhoneField ## 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:** lock ## 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:** className, lock ## 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 ## Featured Product - woocommerce/featured-product Highlight a product or variation. - **Name:** woocommerce/featured-product - **Category:** woocommerce - **Ancestor:** - **Parent:** - **Supports:** align (full, wide), color (background, text), multiple, spacing (padding), ~~html~~ - **Attributes:** alt, contentAlign, dimRatio, editMode, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewProduct, productId, showDesc, showPrice ## 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~~ - **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, 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 ## 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~~ - **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~~ - **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, 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:** ## 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, text), interactivity, layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowInheriting~~), spacing (blockGap), typography (fontSize, textAlign), ~~inserter~~, ~~multiple~~ - **Attributes:** overlay, overlayButtonStyle, overlayIcon, overlayIconSize ## Filter Options - woocommerce/product-filter-active Display the currently active filters. - **Name:** woocommerce/product-filter-active - **Category:** woocommerce - **Ancestor:** woocommerce/product-filter - **Parent:** - **Supports:** color (text, ~~background~~), interactivity, ~~inserter~~ - **Attributes:** displayStyle ## Filter Options - 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-filter - **Parent:** - **Supports:** color (text, ~~background~~), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~inserter~~ - **Attributes:** attributeId, clearButton, displayStyle, hideEmpty, isPreview, queryType, selectType, showCounts, sortOrder ## 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), layout (default, ~~allowEditing~~), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~inserter~~ - **Attributes:** align, buttonStyle, iconSize, navigationStyle, overlayMode, style, triggerType ## Filter Options - woocommerce/product-filter-price Enable customers to filter the product collection by choosing a price range. - **Name:** woocommerce/product-filter-price - **Category:** woocommerce - **Ancestor:** woocommerce/product-filter - **Parent:** - **Supports:** interactivity, ~~inserter~~ - **Attributes:** inlineInput, showInputFields ## Product Filter (Experimental) - woocommerce/product-filter A block that adds product filters to the product collection. - **Name:** woocommerce/product-filter - **Category:** woocommerce - **Ancestor:** woocommerce/product-filters - **Parent:** - **Supports:** inserter, ~~html~~, ~~reusable~~ - **Attributes:** attributeId, filterType, heading, isPreview ## Filter Options - woocommerce/product-filter-rating Enable customers to filter the product collection by rating. - **Name:** woocommerce/product-filter-rating - **Category:** woocommerce - **Ancestor:** woocommerce/product-filter - **Parent:** - **Supports:** color (text, ~~background~~), interactivity, ~~inserter~~ - **Attributes:** className, displayStyle, isPreview, selectType, showCounts ## Filter Options - woocommerce/product-filter-stock-status Enable customers to filter the product collection by stock status. - **Name:** woocommerce/product-filter-stock-status - **Category:** woocommerce - **Ancestor:** woocommerce/product-filter - **Parent:** - **Supports:** color (text, ~~background~~), interactivity, ~~html~~, ~~inserter~~ - **Attributes:** className, displayStyle, isPreview, selectType, 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~~ - **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~~ - **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~~ - **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~~, ~~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~~ - **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