Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/docs/building-a-woo-store/block-references.md

47 KiB
Raw Blame History

post_title menu_title
Blocks reference 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