How to customize the checkout style

If you want to change how Flux Checkout for WooCommerce looks, you can do so by following this guide.

We’ll go through how to change the header font, color, and background, as well as the general color scheme for your checkout.

How to customize the header settings

Let’s start with the header. The standard Flux Checkout header looks a little something like this:

flux checkout header

To customize the header to suit you, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > Flux Checkout and click the Header Settings tab at the top of the page.
flux header settings
  1. Here you’ll see all the settings you can customize for your checkout header:
    • Header Type – With this setting, you can either keep the word ‘Checkout’ at the top or replace it with your store’s logo or another image.
    • Header Text – If you’ve kept the word ‘Checkout’, this setting allows you to change the text to something else.
    • Header Font – This allows you to change the font your header uses, including its size and color.
    • Header Background – With this setting, you’ll be able to set the style for your header. You can either choose to keep your primary colors, include a custom color, or a gradient. If choosing custom or gradient, some additional settings will appear to help you customize this further.
    • “Back to Cart” Link Color – Lastly, you’ll be able to change the link color of the ‘Back to Cart’ text within the header. This is particularly useful if you’ve changed your header color and can no longer see the link.
  2. Once happy, click the blue Save Changes button at the bottom of your page and your new checkout header style will be visible.

Note: You can always revert back to the default Flux header settings by clicking the grey Reset to Defaults button next to the Save Changes button.

How to customize the checkout style

The checkout style settings allow you to set a primary and accent color to use within your checkout.

Here’s how to set this up:

  1. From your WordPress dashboard, go to WooCommerce > Flux Checkout and click the Checkout Style tab at the top of the page.
checkout style
  1. In the Color Theme section, you can select if you want to choose your colors from a list of recommended colors from the Material Design palette, or select custom ones.
  2. Depending on which you choose, you’ll either have a set of color swatches to pick from, or the option to use a color picker, or a hex code to add your colors.
  3. Once you’ve selected both, scroll to the bottom of the page and click the blue Save Changes button.

That’s it! You’ve now completely customized Flux’s style to suit your store.

Flux Checkout for WooCommerce

Prevent abandoned carts with a slick multi-step checkout experience, designed for your customer’s device.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.