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

How can we help?

Getting started

  • Do I need to uninstall the free version, or is Fluid Checkout Lite required?
  • How to translate Fluid Checkout plugins into your language

Account & Purchases

  • Can I get a refund for my purchase?
  • Finding my invoice, adding billing details and VAT number

Customizations

  • Move first and last name fields to the contact step
  • Customize colors of elements on Fluid Checkout
  • Change fields copied from shipping address to billing address
  • Customize checkout steps
  • Customize button colors and other button styles
  • Configure cart quantity fields for decimal quantities
  • Move the “Phone” field to the contact step
  • Change the icon or icon color for the cart button on mobile
  • Customize checkout fields and adding custom checkout fields
  • Customize template files for WooCommerce and Fluid Checkout
  • Add custom house number field and make it required
  • Safely add code snippets to your WooCommerce website

Licenses

  • New versions updates are not appearing on my website

Compatibility

  • Compatibility with theme OceanWP
  • Compatibility with plugin Digits
  • Compatibility with plugin Storefront Powerpack
  • Troubleshooting: jQuery events or vanilla JavaScript events not working
  • Compatibility with theme ZK Nito
  • Compatibility with theme Woodmart
  • Compatibility with the plugin “Plugin Organizer”

Features

  • Account matching / user matching — associate purchases with and existing customer account without logging in
  • Local Pickup — Hide shipping address when local pickup is selected
  • Trust symbols — add security badges, trust seals and other trust symbols to strategic places on the checkout, cart and order received pages
  • International phone numbers — formatting and validation for phone numbers based on country rules
  • Edit cart items 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

  • Troubleshooting: jQuery events or vanilla JavaScript events not working
  • Changelog format and semantic version numbers
  • Changelog – Fluid Checkout PRO & Lite

Troubleshooting

  • Troubleshooting: jQuery events or vanilla JavaScript events not working
  • Troubleshooting – Local pickup prevents customer from proving a shipping address, blocking other shipping methods
  • Troubleshooting – Trust symbols widgets randomly moving to other areas when switching themes

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 August 15, 2023
Move the “Phone” field to the contact stepCustomize 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 add-on
  • Address Book add-on
Company
  • Support
  • My account
  • About
  • Affiliates program
  • Homepage
  • Homepage
  • Features
  • Pricing PRO
  • Demo
  • Docs
  • Support
  • My account