BricksUltimate

Home Woo Elements Cart Content

Cart Content

The Cart Content element of the BricksUltimate is a powerful tool designed to enhance the functionality and customization of the shopping cart in your Bricks Builder-based WooCommerce store. It is fully customizable and you can make your own mini cart with it. It shows real-time cart contents, including products, quantities, prices, etc.

You can use this element on the Off-Canvas, Cart Counter, Bricks Popup elements and the checkout page.

This element is ideal for WooCommerce stores using Bricks Builder, offering more control than the default cart shortcode.

Cart Content Element

Step-by-step User Guide

Make sure that you activate this element from the Bricks -> BricksUltimate -> Woo tab.

  1. Add the some products to the cart
  2. Open desired page or template on the Bricks editor
  3. Add the Cart Content element(put it inside the off-canvas, cart counter, popup or checkout template.)
  4. Get the live preview on the builder editor
  5. Lot of controls are there for the style & design
  6. Adjust those controls as per your brand
  7. Put the (BU)Coupon Form and (BU)Applied Coupon elements, if you need
  8. Show the cart subtotal price with the dynamic tag {cart_contents_subtotal} or (BU)Price element
  9. Add two button elements and create the View Cart and Checkout buttons
  10. Save the changes

Your mini cart is ready for the site.

Cart Contents
Preview on builder editor
Cart Contents Structure
Elements Structure

Note: The discount value from coupons will not be automatically applied to the WooCommerce cart subtotal. Instead, the discounted price will be calculated and displayed through the Cart Total value from the (BU)Price element in your system.

Displaying custom empty cart message

You can overwrite the default WooCommerce empty cart message with the bricks. Here is the steps:

  1. Go to Bricks -> Templates
  2. Click on Add New Template button
  3. Enter the title
  4. Select "Section" from the Template type dropdown
  5. Click on "EDIT WITH BRICKS" yellow button
  6. Create a layout
  7. Publish the template
Now go to the Bricks -> BricksUltimate -> MISC tab and scroll down the page. You find the "Cart Content Element" section there. Select your empty cart message template(which you built with the bricks) from the dropdown.

Empty Cart Message

Cart Item's Image Size

You can change the default featured image size. Go to Bricks -> BricksUltimate -> Misc tab and scroll down the page. You find the "Cart Content Element" section there. Select the image size from the Image Size dropdown. Save the changes. Afterthat go to frontend, refresh the site and add a new product to the cart. New image size will be applied.

Preview