Max Addons WooCommerce Add to Cart element allows you to add a fully customizable Add to Cart button to any page of your Bricks Builder website. You can display an add-to-cart button on individual product pages or use it within a single product page template to include the button on all WooCommerce product pages.
In this guide, we will explore all the options and features available in the Max Addons Add to Cart element for Bricks Builder.
Getting Started#
Before using the Add to Cart element, ensure that the following tools are installed and activated:
Steps to Get Started#
- Create or edit a page: Start by creating a new page, editing an existing page, or opening the WooCommerce single product page template in the Bricks Builder editor.
- Search for the Add to Cart element: In the element search bar, type "add to cart".
- Add the Element: Add the Add to Cart element onto your page. Check the "Max" tag in the top-right corner of the element to ensure you're using the Max Addons Add to Cart element.
Tip: You can combine the Add to Cart element with other design elements, such as Product Image, Product Gallery, and Product Title.
Customization Options in the Content Tab#
When you add the Add to Cart element, the customization options appear in the left sidebar.
PRODUCT#
This section includes the following settings:
- Dynamic Product: Enable this option to use the Add to Cart button in a product loop or on a single product page.
- Select Product: Choose the product page where you want to display the Add to Cart button.
- Show Quantity: Enable this to display a quantity selector for the product.
- Auto Redirect: Enable this option to automatically redirect users to the cart page after a product is added.
Note: If you enable the Dynamic Product option, additional customization options for VARIATIONS will appear, including:
- Typography
- Background Color
- Border
- Margin
- Padding
QUANTITY#
This section provides customization options for the quantity field:
- Width: Set the width of the quantity input field.
- Background: Customize the background color of the quantity field.
- Border: Define the border style, width, and color.
BUTTON#
Customize the appearance and functionality of the Add to Cart button:
- Text: Change the button text.
- Style: Choose from predefined styles such as Primary, Secondary, Light, Dark, Muted, and more.
- Outline: Enable this to create an outlined button style.
- Padding: Adjust the inner spacing of the button.
- Width: Set the button width.
- Background Color: Define the button's background color.
- Border: Customize the border style, width, and color.
- Typography: Adjust the font size, weight, and style of the button text.
Additional customization options include:
- Button Icon: Add an icon to the button.
- Border Radius: Define rounded corners for the button.
VIEW CART#
The View Cart button, which appears after a product is added to the cart, has its own set of customization options:
- Background Color: Define the background color of the View Cart button.
- Border: Customize the border style, width, and color.
- Typography: Adjust the font size, weight, and style of the button text.
This was the complete overview of the Max Addons Add to Cart element. We Hope this element helps you create a seamless shopping experience for your customers!