Skip to main content

Coupons

This family applies, lists, and removes Woo cart coupons.

When To Use This Family​

Use this family on cart pages and mini-carts where customers can apply or remove coupon codes.

Quick Start​

Coupon form and applied coupon rows
<OmeWooCouponForm />

<OmeWooCouponAppliedList>
{#slot default}
<OmeWooCouponRemoveButton />
{/slot}
</OmeWooCouponAppliedList>

Components​

Component keyRole
OmeWooCouponFormApplies a coupon code through Store API.
OmeWooCouponAppliedListRenders active cart coupons.
OmeWooCouponRemoveButtonRemoves the current coupon row.

Authoring Structure​

CouponForm
CouponAppliedList
CouponRemoveButton

CouponRemoveButton belongs inside CouponAppliedList because the runtime injects the coupon code into each row and button.

CouponForm Props​

PropMeaning
Input hint copyText shown inside the coupon code field before entry.
content.button_labelSubmit button text.
accessibility.input_aria_labelInput accessible label.
accessibility.button_aria_labelButton accessible label.

If the submitted code is empty, the form moves to error without calling Store API.

CouponAppliedList Props​

PropMeaning
content.show_empty_messageShows an empty message when no coupons are applied.
content.empty_messageEmpty message text.
preview.rowsNumber of coupon rows in builder preview.
preview.empty_stateShows empty state in builder preview.

Runtime state is has-coupons or empty.

CouponRemoveButton Props​

PropMeaning
content.labelButton text.
accessibility.aria_labelButton accessible label.

The runtime reads data-ome-woo-coupon-remove-code or data-ome-woo-coupon-code from the hydrated row.

Runtime Behavior​

Applying or removing a coupon calls Store API and refreshes the cart store. Woo Store API coupon mutations can omit totals, so WooCartStore refreshes the cart after coupon responses when totals are missing.