Add To Cart Icon element is adding the cart icon instead of the Add To Cart text. You can add the fancy floating add to cart button to the product card layout. The button will add the product to the cart via AJAX when a user clicks on it.

Go to the Bricks -> BricksUltimate -> Woo Elements tab and enable the Add To Cart Icon element. Now open the bricks editor and put this element inside the Bricks product loop builder container.

Inside the element, there are three nested elements: one for the simple product, one for the variable product, and the last one is the spinner icon which will show when the AJAX is called. You can upload the custom icons and set the size, colors, etc.

Extra Options

1. Tooltip: You can show the tooltip when a user enters the mouse on the icon.
2. Added: It will display the tick icon which represents that the product has already been added to the cart.
3. View Cart: It adds the View Cart button.

Connects with Swatches for Loop element

You can sync the attributes of the variable products with this button. So a user can add the variable products to the cart via AJAX on the home, shop, and archive pages.

Go to Bricks->BricksUltimate->Woo Element and activate the Swatches for Loop element. Make sure that you created the product listing (on the home, shop, archive, etc pages) with the Bricks native product loop builder.

1. Add the Swatches for Loop element inside the loop wrapper
2. Turn on the “Enable Syncing” option
3. Select the “Add To Cart Icon” option from the Button element dropdown