How can we help?

View Categories

Design templates — more options to better match your brand style

Whether you are looking for a sleeker design or wish you had Shopify’s checkout on your WooCommerce store, with the design templates feature, you can choose from more options of change the look and feel of the checkout page to better match your brand and theme styles.

With Fluid Checkout PRO, you can choose from any of these templates:

  • Classic: the default design template for Fluid Checkout — available with Fluid Checkout Lite.
  • Boxed: each step has its own separate box when steps are completed.
  • Split: Separate the order summary from the steps with just a line, or add a color to the entire right part of the screen where the order summary is. With this design template, your checkout page will look more similar to that of Shopify.
  • Minimalist: removes borders and simplify the overall look of the checkout page. This template looks particularly gorgeous when buttons are black.

Screenshot of the checkout page showing the design template Classic.

Design template: Classic (Lite)

Design template: Boxed

Design template: Split

Design template: Minimalist

The overall styles for these design templates apply to all pages optimized with Fluid Checkout PRO: checkout, cart, order received (thank you page) and the view order on the customer account pages.

Switch to a different design template #

If you already have Fluid Checkout PRO activated, the design template options will be unlocked in the plugin settings. Go ahead and choose the design template that best matches with your website:

  1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout.
  2. Navigate to the sub-tab “Checkout”.
  3. Locate the “Layout & design” section at the top of the page, then locate the “Design Template” options.
  1. Select the design template that you want to use.
    Please note that only the Classic design template is available with Fluid Checkout Lite, so you will need Fluid Checkout PRO to unlock the other design template options.
  2. Save your changes.

Choose a color for the order summary section #

It is also possible to define any color for the background of the order summary section on the right part of the checkout and cart pages.

This option is particularly interesting if you are using the Split design template as this color will be applied to the entire right part of the page, but might also be interesting to make this section stand out a bit more.

Change the background color of the order summary

  1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout.
  2. Locate the section “Checkout elements”, then the sub-section “Order summary”.
  3. Choose a color to apply to the order summary section, or enter the color code directly.
Screenshot of the order summary background color option in the plugin settings.
  1. Save your changes.

Highlight the order total amount line in the order summary #

In some cases, you might want to highlight the order total amount on order summary section with a light grey background color.

Enable highlighting the order total amount line

  1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout.
  2. Locate the section “Checkout elements”, then the sub-section “Order summary”.
  3. Check the option “Highlight the order totals row in the order summary table”.
Screenshot of the option to highlight the order totals line in the order summary section.
  1. Save your changes.

Highlight shipping address or billing address sections #

In some cases, you might want to highlight the shipping address or billing address sections on the checkout page with a light grey background color. This might help the customers to see which information they should pay more attention to while filling out the checkout form.

Enable highlighting the address sections

  1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout.
  2. Locate the section “Checkout elements”, then the sub-section “Billing address”.
  3. For the billing address section, check the option “Highlight the billing address section in the checkout form”.
  4. And, for the shipping address section, check the option “Highlight the shipping address section in the checkout form”.
Screenshot of the options to highlight the billing address and shipping address sections on the checkout page.
  1. Save your changes.

Easy design customizations with CSS variables #

If you need to tweak the design templates to make small adjustments, it is easier than ever. Using simple CSS variables, it is possible to customize colors, borders, rounded corners, product image styles, background colors and even buttons.

Since the introduction of design templates with Fluid Checkout Lite 3.0, it is possible to use CSS variables to easily change these styles for many elements on the checkout page, and on other pages optimized by Fluid Checkout PRO as the cart page, order received and view order pages.

Check out these customization guides: