Cart (WooCommerce)

The cart page is a special WooCommerce page, created by default during WooCommerce installation. It contains a WooCommerce shortcode [woocommerce_cart] which renders the cart output.

To customize the cart experience using Bricks you don’t need to change the shortcode or the content of the Cart page. Instead, Bricks offers two different template types (in this context, they are like template parts) to customize the cart:

  • WooCommerce – Cart: Rendered when the cart contains products.
  • WooCommerceEmpty Cart: Rendered when the cart is empty.

The “Cart” and “Empty Cart” template types are only visible if you have the WooCommerce plugin installed and active. These templates are used inside the WooCommerce Cart shortcode logic and they do not support template conditions (they are automatically rendered on the correct page).

By default, the cart in the Bricks theme will be shown as in the image below. You’ll notice there are typically two different zones: the cart items table & the cart totals:

If you want to customize this screen, you’ll need to create a WooCommerce – Cart template type.

Template Type: WooCommerce – Cart

You would set the WooCommerce – Cart template type to customize the Cart page (used when the cart contains products).

When opening this template with Bricks you’ll see three new elements (specific for this template type):

The specific Bricks elements to be used inside the “WooCommerce – Cart” template type

Cart items

Render the cart contents table. With this element, you’ll be able to hide different parts of the table, style the table elements and the buttons, and hide the coupon input (so you could set it separately using the Cart Coupon element).

Cart totals

Renders the cart totals zone. With this element, you could hide the cart cross-sells, style the totals table, and style the button.

Cart Coupon

Render the coupon input. Use this element if you don’t want to have the coupon input attached to the cart items table. With this element, you could style the input and the apply coupon button

Template Type: WooCommerce – Empty Cart

You would set the WooCommerce – Empty Cart template type to customize how the cart page renders when the cart is empty.

By default, the empty cart shows a message and a button to return to the shop page.

To customize this screen you need to create a WooCommerce – Empty Cart template type where you could place the required content.

Cart contents loop

Bricks 1.4. introduces a new query loop type, the Cart Contents. This query loops through all the products in the cart.

Thus enabling the usage of the Dynamic Data tags to get the product name (post title), the product image (featured image), and the product-related tags like the product price, description, SKU and so on.

This will allow you to build your own cart items widget, and place it anywhere of your site.