Add-to-Cart Alpha

overview

A dynamic add-to-cart button for your products.

Add to Cart Alpha
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

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

No related HTML5 elements.

Accessibility Notes

The button has a role of button because Bricks doesn’t allow us to properly set the HTML tag to button.

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.