Button Style Variants

In order to keep Fast buttons looking and feeling like "Fast", we need to be consistent about how our buttons look. We have both size and style variants to choose from.

Official Fast Button Style Variants

We have 2 different size style variants for how our official Fast buttons should look. One for "light mode" and the other for "dark mode".

Light Mode

Use these colors if the button will sit on a light background color.

Dark Mode

Use these colors if the button will sit on a dark background color.

Official Fast Button Size Styles

heads up

All buttons can be either 100% width of their parent container or just respect their x axis padding. The minimum width for our button is 150px. See the "Sample Parent Container Code" section below for code that can help.

We have 3 different size style variants for how our official Fast buttons should look.

They are:

  1. Compact
  2. Default
  3. Large

Compact Button Styles

Default Button Styles

Large Button Styles

Sample Fast Button Parent Container Code

This code will make sure that the minimum size of the Fast button is 150px.

Copy
Copied to Clipboard
<div style="display:inline-block; min-width:150px">
  <fast-checkout-button></fast-checkout-button>
</div>

Fixing Button Styles

Sometimes our default button styles are overwritten by page styles and needs to be updated.

  1. On your online store, control-click/right-click the Fast button and click Inspect.

    inspecting element on a fast button

  2. In the code that appears (in the inspector), click <div class="fast-wrapper"> or one of the lines below that line.

  3. In the styling box below, make adjustments to the width or font size or anything else you need to change.

    Keep adjusting until the Fast button and the other elements around it appears like one of our supported button style variants.

    page html and css

  4. Once you have the styles updated how they need to be, go to the Styles tab on the WooCommerce page.

    Styles Tab in Your WooCommerce Dashboard

  5. Figure out which textbox in WooCommerce corresponds to the page you’re trying to adjust.

    For example, if you want to adjust styling on the product page, you’ll want to use the "Product page button styles" textbox. Similarly, if you want to adjust the styling on the mini cart page, you’ll want to use the "Mini cart widget button styles" textbox.

    styles in your woocommerce styles dashboard tab

  6. In the corresponding textbox, take the change you made directly on the online store and apply that change here.
  7. Click Save Changes.
  8. Go into your online store again to see if the Fast button now looks good. You may have to refresh the page a few times before the new version of the Fast button appears. If you still want to make changes, repeat this process until you're happy with the appearance of the button.