BricksUltimate

Home Woo Elements Add To Cart Icon

Add to Cart Icon Element

The Add to Cart Icon element in BricksUltimate is a floating action button designed for faster product addition to the shopping cart. It enables users to quickly add an item to their bag without navigating to the full product page, enhancing the shopping experience and conversion rates.

Key Features

  • Floating Position – The icon button floats over the product display for quick access.
  • One-Click Add to Cart – Instantly adds the selected product to the user’s cart.
  • Customizable Icon – Choose from different cart icons to match your store’s style.
  • Mobile-Friendly – Optimized for smaller screens to ensure seamless use.
  • Lightweight & Fast – Minimal performance impact for smooth browsing.

Use Cases

  • Quick add-to-cart for product listings, grids, or sliders.
  • Mobile-first eCommerce stores that need faster checkout interactions.

How to Use

  1. Go to Bricks -> BricksUltimate -> Woo and activate the element.
  2. In Bricks Builder, open the page or template where you want the button.
  3. Search for “Add to Cart Icon” in the BricksUltimate elements list.
  4. Drag and drop the element onto your desired section.
  5. Choose your preferred cart icon.
  6. Adjust floating position (bottom-right, bottom-left, etc.).
  7. Customize colors, size, and hover effects.
  8. Adjust visibility for desktop, tablet, and mobile.
  9. Save your page and test the button to ensure it works as expected.

Example

On a product grid, each item displays a small floating cart icon in the bottom-right corner. When clicked, the product is instantly added to the cart.

Syncing with Swatches on Home, Shop and Archive Pages

Make sure that you enabled the Swatches feature here (Bricks -> BricksUltimate -> MISC -> Swatches).

Step 1: Activate the Swatches for Loop Element

  • Navigate to: Bricks → BricksUltimate → Woo Elements
  • Enable the "Swatches for Loop" element.

Step 2: Ensure your product listings (Home, Shop, Archive pages) are built using Bricks’ native Loop Builder. Now add the both (BU)Add To Cart & (BU)Swtaches For Loop elements inside your product card layout and setup the settings like this way:

  • Select the Swatches for Loop element.
  • Turn ON "Sync with Add To Cart Button" option.
  • Select "Add to Cart Icon" from the Button Element dropdown.

Result: Customers can now select variations (color, size, etc.) and add products to cart directly from product grids — no extra page loads!