The Add To Cart element of the Bricks builder is adding the Add To Cart button. It has lots of control options and you can directly edit it from the builder editor and see the preview.
Minimum requirements:
- WooCommerce
- Bricks Builder
1. Activate Element
At first, you will activate this element from the Bricks -> BricksUltimate -> Woo tab page.
2. How To Use
You can use this element inside the Query Loop builder and on the single product page. After activating the element, you will open the bricks builder editor and add the “Add To Cart” element on the canvas. Adjust the settings as per your site requirements and publish the changes when it would be ready.
Options
Using inside the query loop builder?: You will activate this option when you are adding the element inside the query loop container. Turn off it if you are using this element as the single add-to-cart button.
AJAX Add To Cart action: You can add the AJAX action to the single add to cart button on the single product page. This option will be enabled when you disable the “Using inside the query loop builder?”.
Redirect URL: It will redirect to a specific link after adding the product to the cart.
Wrapper: Customizing the outer wrapper size, spacing, layout, etc.
Quantity: Adds the quantity input field and customize the color, size, fonts, etc.
Add To Cart Button: From this section, you can change the button text and manage the color, size, fonts, etc.
View Cart Button: Managing the View Cart button style.
Quick Add – Variable Products: You can add the variable products directly to the cart from the product listing section, shop page, archive pages, home page, etc. It will add the AJAX based add to cart form and the product will be added via AJAX.
3. Uses Inside the Query Loop
You can use this element inside the product query loop. Drag and Drop the (BU) Add To Cart element inside the query loop wrapper element and enable the Using inside the query loop builder? option.
4. Uses as a Single Add To Cart button
You can use this same element on the Single product template and create the Single Add To Cart button. Make sure that you turn off the Using inside the query loop builder? option. You also get some extra features like
AJAX Add To Cart action: You can add the AJAX action to the single add to cart button on the single product page. Therefore, the user can add the product to the cart without refreshing the single product page.
Redirect URL: You can also set the redirect URL. So user will be redirected to the selected URL when the AJAX action is completed.
5. How do you connect the variable product’s attributes/swatches with it?
You can easily connect the variable product’s variations with the Add To Cart element and the user can add the variable product to the cart from the shop, home, and archive pages (without going to the single product page). Two methods are available now for it:
- Swatches For Loop element
- Quick Add feature in the Add To Cart element
5.1. Method 1: Connects with Swatches for Loop element
Go to Bricks->BricksUltimate->Woo Element and activate the Swatches for Loop element. Make sure that you created the product listing(home, shop, archive page) with the Bricks native loop builder.
- Add the Swatches for Loop element inside the loop wrapper
- Turn on the “Enable Syncing” option
- Select the “Add To Cart” option from the Button element dropdown
- Enter the button text like “Add To Cart”
5.2. Method 2: Quick Add Option
This option is available in the Bricks native Add To Cart and our Add To Cart element. Make sure that you added the Add To Cart element inside the loop builder wrapper.
- Enable the Using inside the query loop builder? option if you are using our element
- Go to the Quick Add section
- Turn on the “Enable quick add action” option
- Add the other settings as per your need
- Select the query loop builder container and set the position “relative” in the Style tab
- Adjust the other settings as per your need
When a user clicks on the “Select Options” button, AJAX will call and load the variations selection form on the fly. The user will select the variations and click on the Add To Cart button to add the product. Therefore we are reducing the one step.
Preview
6. Can I hide the Quantity Field?
Yes. You can enable/disable the quantity field when you are using it in the product list. In the same way, you can also hide the “+/-“ buttons and keep only the quantity input field.
7. Customize the Swatches/Attributes of the Variable Product
You can easily design the native WooCommerce attributes. There is a variations section in the element. All attributes dropdown, price, label, description, etc item’s color, fonts, and size will be controlled from there.
BricksUltimate also added the custom swatches feature for the variable products. So you can also customize the size, colors, fonts, etc with the help of this element.
