BricksUltimate

Home Woo Elements Cart Counter

Cart Counter

The BricksUltimate Cart Counter is a UI element commonly used in e-commerce websites to display the number of items currently in the user's shopping cart. Here's a detailed breakdown of its typical features and functionality:

Key Elements:

  1. Counter Badge/Numeric Display
    • A small, often circular or pill-shaped badge that shows the total number of items in the cart.
    • Usually positioned near the cart icon in the header or navigation bar.
    • Updates dynamically as items are added/removed.
  2. Visual Styling
    • Color: Often uses a contrasting color (e.g., red, orange) to stand out.
    • Icon: Add the cart icon and adjust the size, color, etc.
    • Hover Effects: Might expand or highlight when hovered over.
  3. Interactive Behavior
    • Clicking it typically opens the cart dropdown or redirects to the cart page.
    • Connect with the (BU)Off Canvas element and create the off-canvas cart panel on your site.

Element controls:

  1. Hide when cart is empty: If you enable this option, the cart counter button will not show on the site when the cart bag is empty.
  2. Count based on: The cart total shows in two distinct ways.
    1. Count by Number of Items
      • Displays the total unique products in the cart.
      • Example: If a cart has *2 shirts + 1 pair of shoes*, the counter shows 3 (3 separate items).
    2. Count by Total Quantities
      • Sums up all individual quantities of items.
      • Example: If a cart has *3 shirts (Qty: 2 each) + 1 pair of shoes (Qty: 1)*, the counter shows 7 (2+2+2+1).
  3. Call to action: There are 3 call to actions.
    • None
      1. If you just want to display the cart total value, you would choose it.
      2. If you want to connect the cart counter button with the Off-Canvas, you should select it.
    • Show dropdown(on hover/click) - Users can view the mini-cart by hovering or clicking the icon. Read step-by-step guide.

      Cart Contents
    • Link to URL - You can link it with the cart/checkout page.
  4. Icon/Text: The cart counter shows icon or text or both alongside the item count, positioned either on the left or right side. You can type the custom text or upload your own SVG file for the basket icon.
  5. Counter: Adjust the style like colors, size, fonts, bubble, etc.
  6. Price: The cart counter shows the cart total price alongside the item count, positioned either on the left or right side for flexible integration. You can also adjust the color, size, font, elc.
Cart Contents
Preview on builder editor
  1. Select Show dropdown(on hover/click) from the Call Action dropdown.
  2. Select Hover or Click event from the Trigger On dropdown.
  3. It displays the modal box on the builder editor.
  4. You get the DROPDOWN element controls on the Builder editor. You can style the dropdown background color, size, position, animation effects, etc. from there.
  5. Now add some nested elements and build your cart like attached image.

    Cart Contents Structure

    *Note: You can use the Mini Cart Builder element also.

Tip: In the DROPDOWN settings, turn on "Enable reveal effect" to make the mini-cart appear instantly when a customer adds a product to the cart.

Trigger The Off Canvas

Ensure that you activate the (BU) Off Canvas element in the Bricks -> BricksUltimate -> General tab. Now follow the steps below:

  1. Open your Header Template (or desired page) in the Bricks editor.
  2. Drag and drop the Cart Counter element.
  3. Under Call to action, select None.
  4. Copy the Element ID or assign a unique CSS class to the Cart Counter (e.g., mini-cart-trigger).
  5. Add the (BU)Off Canvas element to your template.
  6. In the Selector input field, paste your Element ID or CSS class (e.g., #brxe-ed23bf or .mini-cart-trigger).
  7. Save the changes and check that the mini-cart opens when clicking the Cart Counter.