Documentation

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.

Are you using Flux Checkout for WooCommerce yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

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.

Flux Checkout for WooCommerce

Flux Checkout for WooCommerce

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support