BricksUltimate

Add To Cart

The Add To Cart element of the BricksUltimate adds some advanced settings and features which are not available in the Bricks' Add To Cart element.

Options

Using inside the query loop builder?: Turn on this option when you are using the element inside the query loop. Turn off, if you are using it as the single add-to-cart button.

AJAX Add To Cart: Enable this option to allow customers to add products to their cart via AJAX on the single product page without reloading. Disable this if you're using the query loop builder.".

Redirect URL: Set a custom URL to redirect users after adding a product to the cart. Works only when AJAX Add to Cart is enabled.

Wrapper: Customizing the outer wrapper size, spacing, layout, etc.

Quantity: Add a quantity selector and fully customize its appearance—modify colors, sizing, fonts, and more for a cohesive look.

Add To Cart Button: Personalize the button text, colors, size, and typography to match your brand’s style and enhance user experience.

View Cart Button: Fine-tune the View Cart button’s design to ensure consistency with your store’s aesthetic.

Buy Now Button: You can add the Buy Now button on the single product page. Read the full details here.

Swatches: You can display the swatches on the single product page or archive page. Read Swatches and Swatches for loop pages.

Quick Add – Variable Products: Enable AJAX-based quick-add functionality for variable products, allowing customers to add them to cart directly from:

1. Product listing pages
2. Shop & archive pages
3. Homepage

Important note: Select the active loop div/block wrapper and set the position "relative".

FAQ

Yes! With the Quick Add feature or Swatches for Loop element, customers can seamlessly select variations (like size or color) and add variable products to their cart — without leaving the page.

Method 1: (BU)Add To Cart + (BU)Swtaches For Loop elements

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" from the Button Element dropdown.
• Add the button text (e.g., "Add to Cart" or "Buy Now").

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

Method 2: With Quick Add Feature of the Add to Cart Element

This method allows customers to purchase products directly from product grids (Shop, Archive, or Homepage) using either:

✔ Bricks’ native Add to Cart element
✔ BricksUltimate’s enhanced Add to Cart element

1. Add the Element to Your Loop
   • Insert the Add to Cart element inside your Loop Builder wrapper.
   • (For BricksUltimate’s element): Enable “Using inside the query loop builder?” in the element settings.
2. Activate Quick Add
   • Navigate to the Quick Add section in the element settings.
   • Toggle “Enable quick add action” to ON.
3. Configure Quick Add Behavior
   • Adjust additional settings (e.g., button text, AJAX behavior, success messages) as needed.
4. Ensure Proper Positioning
   • Select the Query Loop Builder container in the Style tab.
   • Set its position to “relative” to prevent layout issues.
5. Fine-Tune Appearance
   • Customize colors, typography, and spacing to match your design.

Preview