Skip to content
Fluid Checkout
  • Features
  • Demo
  • Pricing PRO
  • Docs
  • Support
  • My account
0,00 € 0 items
Home / Docs / How to change the icon or icon color for the cart button on mobile

How can we help?

Getting started

  • How to translate Fluid Checkout plugins into your language

Account & Purchases

  • Finding my invoice, adding billing details and VAT number

Customizations

  • Move the “Phone” field to the first step (contact step)
  • How to change the icon or icon color for the cart button on mobile
  • Customizing checkout fields and adding custom checkout fields
  • How to customize WooCommerce or Fluid Checkout template files
  • How to add a new house number field and make it required
  • How to safely add code snippets to your WooCommerce website

Licenses

  • New versions updates are not appearing on my website

Features

  • International phone numbers — formatting and validation for phone numbers based on country rules
  • Edit cart at checkout — change quantity or remove items from the cart directly at the checkout page
  • Express checkout — quick payment buttons for Google Pay, Apple Pay and other payment methods

Development

  • Changelog format and semantic version numbers
  • Changelog – Fluid Checkout PRO & Lite

How to change the icon or icon color for the cart button on mobile

Table of Contents
  • Changing the color of the cart icon
  • Using an icon font to replace the cart icon
  • Using images to replace the cart icon
  • Removing the cart icon

Fluid Checkout only provides one icon for the cart button. However, it is possible to change the icon for the cart button to match what is used for the website’s theme or any other icon.

There are a few ways to do it, which one to use will depend on how your theme’s icons are added.

Before we go through ways you can change the cart icon, there are a few things we need to keep in mind:

  1. The ideal size for icons is 24 x 24 pixels.
  2. When using icon fonts, the color of the icon will be the same as the button text, but it can be changed with CSS.
  3. When using images, no colors are changed and the image is used as-is.

Changing the color of the cart icon #

If you just want to change the color of the icon, but not which icon or image is used:

.fc-checkout-header .fc-checkout__cart-link:before {
	color: goldenrod;
}

The result will look like this:

To customize the color of the icon:

  1. Change the value of the color property to set a different color for the icon.
  2. This applies when using an icon font (see “Using icon font”)

Using an icon font to replace the cart icon #

When using a theme that uses an icon font, such Font Awesome icons, use the CSS code snippet below to change the icon for the cart button.

.fc-checkout-header .fc-checkout__cart-link:before {
	font-family: "Font Awesome 5 Free" !important;
	content: "\f290";
}

This example is based on the Divi theme and Font Awesome as the icons font. The result will look like this:

To customize which icon to use:

  1. Change the value of the font-family property to that which is appropriate for the icons font that is used by your theme. The !important directive is necessary to overwrite the value defined by Fluid Checkout.
  2. Change the value of the content property to match the icon type from the icons font.

Using images to replace the cart icon #

To replace the default icon with an image, use the CSS code snippet below.

.fc-checkout-header .fc-checkout__cart-link:before {
	content: "";
	background-image: url("https://res.cloudinary.com/webalys/image/private/w_64,h_64,ar_1/f_auto/v1/icons/cart/shopping-cart-basket-1-6vt7xu1yp3eqoday6ka7kk.png/shopping-cart-basket-1-rh3cg2d362pw2a7rqc3mb.png");
	background-size: 100% 100%;
}

This example uses a basked image from the Streamline Icons set. The result will look like this:

To customize which image to use:

  1. Change the value of the background-image property to point to the image file to display as the cart icon. The color of the icon in this case will be that of the image used.

Removing the cart icon #

In case you don’t want to use any icon for the cart button, the CSS code snippet below will remove the icon and set the spacing for the button text.

.fc-checkout-header .fc-checkout__cart-link:before {
	content: "";
	width: 0;
	margin-right: 5px;
}

The result will look like this:

What are your Feelings
Still stuck? How can we help?

How can we help?

Updated on October 21, 2022
Move the “Phone” field to the first step (contact step)Customizing checkout fields and adding custom checkout fields
Table of Contents
  • Changing the color of the cart icon
  • Using an icon font to replace the cart icon
  • Using images to replace the cart icon
  • Removing the cart icon
Fluid Checkout

Frictionless Multi-step Checkout for WooCommerce

© 2021-2023 Fluidweb OÜ

Terms | Refunds | Privacy Policy | Cookies

Products
  • All products
  • Fluid Checkout PRO
  • Fluid Checkout Lite
  • Google Address Autocomplete for WooCommerce
Company
  • Support
  • My account
  • About
  • Home
  • Home
  • Features
  • Pricing PRO
  • Demo
  • Docs
  • Support
  • My account