Skip to main content

​
Code

​
Props

Props should be passed as attributes to the component element.
​
string
Who the product is available to. One of all or subscribers.Defaults to all
​
string
The message to display on the button.Defaults to Add to cart
​
object
The options for the product.
​
boolean
Whether the product is out of stock. Setting this to true will disable the add to cart button and show an out of stock message.Defaults to false
​
string
required
The UUID of the product to add to the cart.
​
string
required
The product type of the product being added to the cart.One of physical, bundle, event, subscription.Defaults to physical
​
number
The quantity of the product to add to the cart.Defaults to 1
​
boolean
Whether to redirect to the cart page after adding the product to the cart.Defaults to false
​
boolean
Whether to show the quantity of the product in the cart.Defaults to false
​
string
The message to display on the “view cart” link.Defaults to View cart
​
string
The path to the cart page.Defaults to /cart
​
string
The path to the login page.Defaults to /login
​
string
CSS classes to apply to the button.Defaults to w-28
​
object
Items for pick and mix subscriptions.
​
string|number
Billing frequency for subscription products.
​
boolean
Whether to disable the button without showing out of stock message.Defaults to false
​
object
Related products to add with the main product.

​
Styling

The following parts are available to style the add to cart component:
​
The “add to cart” button element.
​
The loading spinner displayed instead of the button text when the add to cart action is being performed.
​
The containing <div> around the add to cart button.
​
The <div> that contains the out of stock message.
​
The quantity input field.
​
The “view cart” button element
​
The “Members only” message container when product is subscriber-only