Add-to-Cart Alpha
overview
A dynamic add-to-cart button for your products.
Available for:
Figma
Bricks
Gutenberg
Overview
Add to Cart Alpha is a customizable, dynamic, add-to-cart button. It can be dropped into any WooCommerce product card and will respond to the features of that product.
- When the product is a single product with no variations, the button will display, “Add {product name} to cart”
- When the product has variations, the button will display, “Select options for {product name}”
- When the product is not available, the button will display, “Read more about {product name}”
A “view cart” link will display next to the button when a product is added to the cart.
Query Loop Compatible
Variables
This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.
--button-color
Background color of the button
--button-color-hover
Background color of the button on hover
--button-text
Text color of the button
--button-text-hover
Text color on hover
--cart-gap
The gap between the button and the dynamic "View cart" link
HTML5 Tags & Attributes
Accessibility Notes
The button has a role of button because Bricks doesn’t allow us to properly set the HTML tag to button.
Related Frames
FAQs
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.