This documentation provides a step-by-step guide to creating a custom Menu Cart element that works with SureCart and is styled/placed using Bricks Builder. The cart counter dynamically updates as users add or remove products from the SureCart shopping cart.

🧩 Overview

The Cart Counter element includes:

• A cart icon

• A live-updating counter of cart items

• A clickable interaction that opens the off-canvas of the Bricks builder and display the SureCart items.

🔧 Requirements

• WordPress site with Bricks Builder installed and active.

• SureCart plugin installed and set up with products.

 

Make sure that you installed and activated the SureBricks add-on. Open the Header template of the Bricks builder on the editor and add the Menu Cart element there. It has a lot of options. So you can directly design the button style from the bricks editor. You can also connect this element with the Bricks’ Off Canvas element with the Interactions and create the custom Off Canvas Cart for the SureCart store sites.

Settings

1. Icon: You can upload the custom icon
2. Icon Size & Colour: You can adjust the icon size and colour
3. Background: You can add the background colour
4. Padding: You can add the spaces around the icon
5. Position: You can change the position of the counter bubble.