Customize the cart button

Fully customize and style your Cart and Cart button.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

The Cart button includes a shopping cart icon, the word Cart and a blue number three in a white circle. There are three items in the cart.
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.

The Inner text settings panel includes a collection list check box to "get text from" Cart, a drop down menu to select the field none, quantity or subtotal and an x icon to close on the top right of the panel.
“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)
The cart button settings includes the text Cart Quantity and a switch button on the right side.

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
The cart quantity settings includes a check box for "Hide when 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)
A text block inner text settings panel includes a check box to "Get text from" Cart. The subtotal field is selected in the drop down menu. There is also a show all settings button.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top