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

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

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:
  1. .fc-checkout-header .fc-checkout__cart-link:before {
  2. color: goldenrod;
  3. }
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.
  1. .fc-checkout-header .fc-checkout__cart-link:before {
  2. font-family: "Font Awesome 5 Free" !important;
  3. content: "";
  4. }
This example is based on the Storefront 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.

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.
  1. .fc-checkout-header .fc-checkout__cart-link:before {
  2. content: "";
  3. width: 0;
  4. margin-right: 5px;
  5. }
The result will look like this:



    • Related Articles

    • How to fix the order summary and progress bar being cut off by the site's header

      Order summary and progress bar is being cut off by the header Usually the site's header will only cut off the order summary and progress bar when the original theme's header is being used, by default Fluid Checkout will replace the theme's header ...
    • Customizing existing checkout field and adding custom checkout fields

      Adding custom checkout fields Custom checkout fields can be added or changed on Fluid Checkout in the same way as for the original WooCommerce checkout. There are two main ways you make changes to the checkout fields on your WooCommerce checkout ...
    • How to enable Google Pay and Apple Pay in the Express Checkout section?

      The Express Checkout section Fluid Checkout will display a new section for fast checkout when payment gateways support one or more of the Express Checkout payment methods. The express checkout methods usually include Google Pay, Apple Pay and other ...
    • Compatibility with Plugin Organizer

      The layout issues are caused by the lack of the changes applied by Fluid Checkout on the WooCommerce AJAX calls that generate the HTML for the order review. The scripts and styles are being loaded, but the HTML is different than expected to apply the ...