woocommerce/plugins/woocommerce-blocks/docs/extensibility/available-slot-fills.md

5.5 KiB

Available Slots

This document presents the list of available Slots that you can use for adding your custom content (Fill):


If you want to add a new SlotFill component, check the Checkout - Slot Fill document. To read more about Slot and Fill, check the Slot and Fill document.

Note About Naming: Slots that are prefixed with Experimental are experimental and subject to change or remove. Once they graduate from the experimental stage, the naming would change and the Experimental prefix would be dropped. Check the Feature Gating document from more information.

ExperimentalOrderMeta

This Slot renders below the Checkout summary section and above the "Proceed to Checkout" button in the Cart.

Cart:

Example of ExperimentalOrderMeta in the Cart block

Checkout:

Example of ExperimentalOrderMeta in the Checkout block

Passed parameters

  • cart: wc/store/cart data but in camelCase instead of snake_case. Object breakdown.
  • extensions: external data registered by third-party developers using ExtendSchema. If you used ExtendSchema on wc/store/cart you would find your data under your namespace here.
  • context, equal to the name of the Block in which the fill is rendered: woocommerce/cart or woocommerce/checkout

ExperimentalOrderShippingPackages

This slot renders inside the shipping step of Checkout and inside the shipping options in Cart.

Cart:

Example of ExperimentalOrderShippingPackages in the Cart block

Checkout:

Example of ExperimentalOrderShippingPackages in the Checkout block

Passed parameters

  • collapsible: Boolean If a shipping package panel should be collapsible or not, this is false in Checkout and true in Cart.
  • collapse: Boolean If a panel should be collapsed by default, this is true if there's more than 1 fill registered (Core Shipping options are registered as a fill and they're counted).
  • showItems: Boolean If we should show the content of each package, this is true if there's more than 1 fill registered (Core Shipping options are registered as a fill and they're counted).
  • noResultsMessage: A React element that you can render if there are no shipping options.
  • renderOption: a render function that takes a rate object and returns a render option.
  • cart: wc/store/cart data but in camelCase instead of snake_case. Object breakdown.
  • extensions: external data registered by third-party developers using ExtendSchema, if you used ExtendSchema on wc/store/cart you would find your data under your namespace here.
  • components: an object containing components you can use to render your own shipping rates, it contains ShippingRatesControlPackage.
  • context, equal to the name of the Block in which the fill is rendered: woocommerce/cart or woocommerce/checkout

ExperimentalDiscountsMeta

This slot renders below the CouponCode input.

Cart: Cart showing ExperimentalDiscountsMeta location

Checkout: Checkout showing ExperimentalDiscountsMeta location

Passed paramters

  • cart: wc/store/cart data but in camelCase instead of snake_case. Object breakdown.
  • extensions: external data registered by third-party developers using ExtendSchema, if you used ExtendSchema on wc/store/cart you would find your data under your namespace here.
  • context, equal to the name of the Block in which the fill is rendered: woocommerce/cart or woocommerce/checkout

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.