Customize the Cart button

Fully customize and style your Cart and Cart button.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Once you’ve added a Cart to your page, you can fully customize and style the Cart button as well as the cart itself.

In this lesson

In this lesson, we customize the Cart button. To customize the cart itself, check out Customize the shopping Cart.

  1. Style the default Cart elements
  2. Add and remove elements to and from the Cart button
  3. Customize the Cart quantity settings
  4. Show the subtotal in a Cart

Style the default Cart elements

By default, the Cart button has an icon, a text block “cart,” and the Cart quantity element.

Cart icon [Icon]

You can change change the color of the Cart icon by applying a font color.

“Cart” [Text block]

You can edit the button text or double-click and connect it to the quantity or subtotal of your cart. You can style it like you would any typography element.

Connect any text block in a cart button to the total quantity of products in the cart or the subtotal amount of the cart items.
“Cart quantity” [Text block]

This text block is connected to the Cart quantity field which you cannot edit. You can style this element like you would any typography element.

Add and remove elements to and from the Cart button

You can add other elements to the Cart, such as a different image or text blocks and style the Cart button as you please. You can delete the Cart icon and text block, but not the Cart quantity element. That you can hide using the Cart settings. Read more below.

Customize the Cart quantity settings

By default, the Cart button shows the Cart quantity — the total items in the cart.

To hide the Cart quantity element:

  1. Double-click the Cart button
  2. Toggle the Cart quantity button (from the Element settings panel that opens up on the right)

To hide the cart quantity when the cart is empty:

  1. Double-click Cart quantity
  2. Check Hide when the cart is empty from the Cart quantity settings
Hide the cart quantity when the cart is empty

Show the subtotal in a Cart

To display the subtotal of the Cart on the Cart button:

  1. Add a text block to your Cart
  2. Choose Get the text from Cart > Subtotal (from Inner text settings)
Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback