Fluid Checkout for WooCommerce – Lite

Description

Fluid Checkout simplifies and improves the checkout experience on WooCommerce websites for your new and repeating customers with a truly linear, Shopify-like checkout.

Eliminate unnecessary friction at the checkout page and benefit from better conversion rates, customer satisfaction, and earned customer loyalty.

Ask for shipping information before billing in a multi-step or one-step checkout, easily add trust symbols and display a coupon code field that does not distract your customers.

Similar to the Shopify checkout, and even better!

Better accessibility at the checkout page with support for keyboard-only navigation and screen readers.

View detailed list of features on our website

Top notch plugin and support team!

Cleanest and easiest checkout plugin on the market – it will save you a lot of headache in setting up your checkout flow and the support team is active/responsive and consistently working to improve. Just go ahead download and activate this one 🔥🔥🔥

@vsonacci

Demos

  • Multi step layout
    Make sure to test the checkout flow by adding to the cart and completing the purchase at least two times to see how the plugin streamlines the process for repeat customers.

  • Single step layout
    Single step checkout is recommended when only a few fields are required, usually when selling digital products or when a shipping address is not needed.

  • Highly stylized theme
    With themes that are highly stylized such as Storefront Deli — when comparing to a plain theme such as the default Storefront theme, Fluid Checkout adapts itself with part of the theme’s styles, keeping the same look and feel while improving the experience.

  • Fluid Checkout PRO
    All the awesomeness of the Lite version, with even more features to make your customer’s checkout experience excelent.

Insane how great this is!

This plugin radically modernizes and cleans up the WooCommerce checkout.
While doing a better job at UX & Conversion Optimization, it’s also more compatible with plugins… even ahead of the new Gutenberg WooCommerce Checkout block that’s been under development!
Quite insane how the developer is doing this. And a free plugin!!

@allancaeg

Lite Version (Free)

  • Multi-step or Single-step: Choose between multi-step and one-step checkout layouts. While Fluid Checkout changes the layout of the checkout page, it will still look and feel like your website.

  • Optimized for mobile: Fluid Checkout is optimized for mobile devices and will surface the most appropriate keyboard type on fields such as phone and email. In fact, Fluid Checkout was created with mobile devices in mind, and enhanced with more functionality and style for bigger screens.

  • Easily add trust symbols to the checkout page: Add any widget such as accepted payment methods, security badges, reviews, testimonials, or anything that can boost the perceived trust customers have on the website. The checkout page contains widget areas displayed at strategic positions:

  1. Order Summary: at the bottom of the order summary, below the order details and the place order button when present.
  2. Checkout Sidebar: displayed on the sidebar, below the order summary.
  3. Checkout Header – Desktop: at the checkout header — only displayed on desktop devices and when using the plugin’s header and footer templates.
  4. Checkout Header – Mobile: at the top of the page, right below the checkout header — only displayed on mobile devices and when using the plugin’s header and footer templates.
  • Shipping before billing: Customers expect to fill up shipping information before thinking about billing, by asking for the shipping information before billing, we remove unnecessary friction, matching the customer’s expectations.

  • Hide optional fields: The average checkout page has 16 open fields, by removing optional fields from the immediate view we can reduce that number to about 8-9 fields. These fields can still be entered as the customer can click the “Add ” links to reveal the fields they need. Examples of these fields are the “Company”, “Address line 2”, “Phone” and “Order notes”.

  • Instant field validation: The default WooCommerce checkout only validates when the form is submitted, leading to confusion and frustration. Customers want the “Place order” button to be the last thing they click to complete their purchase. Some things can only be validated when placing the order, such as if the credit card is valid and has enough funds to cover the order total, however, most errors at checkout can be prevented by instantly validating the customer data.

  • Integrated coupon code field at the checkout: When users see an open coupon code field at the checkout page the changes they will leave the website and go “coupon hunting” is very high, and they might not come back. The integrated coupon code field is displayed in a custom expansible section, and while less noticeable is still discoverable by customers who have a coupon and need to add it.

  • Shipping phone field: Add a separate phone field for shipping-related questions, in addition to the native billing phone field.

  • Automatically saved customer data: customers won’t lose any information they already have entered on the checkout page, and will get back exactly where they left when re-visiting it. Only payment information won’t be saved for security reasons.

  • Skip completed steps: Repeat customers will love how easy it is to complete their next purchase. Fluid Checkout skips the steps where all required information is provided and validated while providing an easy way to review and change any of the information.

  • Log-in without leaving the checkout: Repeat customers with an account registered can log in from the checkout page directly without having to visit another page and make their way back to checkout.

PRO Version

  • Express checkout: display express checkout buttons from popular payment methods at the checkout page.

  • Address book: allow customers to save multiple addresses to their account and choose which ones to use at the checkout and cart pages.

  • Cart page optimization: always updated cart, with operations processed via AJAX, cart cross-sells display, and layout consistent with the checkout page.

  • Thank you / Order confirmation page: order details layout consistent with the checkout page on the order received page and account view order pages.

  • Google Address Autocomplete for WooCommerce: let customers search their addresses and autofill fields in the checkout page using the Google APIs, reducing by around 40% the number of fields they need to type. Also available as a stand-alone plugin.

  • Offer gift options: let customers add a gift message to their order that can to be printed with the packing slips generated by popular invoices and packing slips plugins.

  • Local pickup: hide shipping address when a local pickup shipping method is selected.

Future features:

  • More layout and design options
  • Delayed account creation
  • Account matching, let registered customers complete the purchase without logging in and attach the order to their account
  • Edit cart at checkout
  • Customize checkout steps and fields
  • … and a lot more smaller features.

View detailed list of PRO features on our website

Fluid Checkout PRO demo site

Need more features?

Request a feature.

Tested WooCommerce Themes

Some themes may need adjustments due to not using WooCommerce standards hooks or styles. We’ve tested certain third-party WooCommerce themes to ensure better compatibility with Fluid Checkout. If your theme is not on the list it does not mean it won’t work. Only that we have not tested it yet.

Free Themes

  • Astra – by Brainstorm Force
  • Blocksy – by CreativeThemes
  • Divi – by Elegant Themes
  • Flatsome – by UX-Themes
  • Generate Press – by Tom Usborne
  • Go – by GoDaddy
  • Hello Elementor – by Elementor Team
  • Hestia – by ThemeIsle
  • Kadence – by Kadence WP
  • Neve – by ThemeIsle
  • Ocean WP – by OceanWP
  • OnePress – by FameThemes
  • Orchid Store – by themebeez
  • Page Builder Framework – by David Vongries
  • Phlox – by averta
  • PopularFX – by Pagelayer
  • Storefront – by WooCommerce
  • Woostify – by Woostify
  • Zakra – by ThemeGrill

Premium Themes

  • Aora – by Thembay
  • Avada – by ThemeFusion
  • Diza – by Thembay
  • Electro – by MandrasThemes
  • Enfold – by Kriesi
  • Hazel – by Select Themes
  • Impreza – by UpSolution
  • Kentha – by QantumThemes
  • LeadEngine – by Key-Design
  • Mr. Tailor – by Get Bowtied
  • OnAir2 – by QantumThemes
  • Phlox PRO – by averta
  • Razzi – by DrFuri
  • Riode – by D-THEMES
  • Shoptimizer – by CommerceGurus
  • Striz – by Opal Team
  • The Hanger – by Get Bowtied
  • Woodmart – by XTemos
  • Zota – by Thembay

** Don’t see your theme in the list? No problem. **

Only the themes that we have added explicit compatibility with or that we have tested and works as expected are listed above.

Try Fluid Checkout now and if you experience any issues please let us know through the support forum and we’ll fix it asap.

Compatible with popular plugins

Payment Gateways

  • Integration Rede for WooCommerce – by MarcosAlexandre
  • Mercado Pago payments for WooCommerce – by Mercado Pago
  • PagSeguro for WooCommerce – by Claudio Sanches
  • Payment Plugins for Stripe WooCommerce – by Payment Plugins
  • Rede WooCommerce – by Rede
  • WooCommerce Affirm Gateway – by WooCommerce
  • WooCommerce Amazon Pay – by WooCommerce
  • WooCommerce Authorize.Net Gateway – by SkyVerge
  • WooCommerce PayPal Payments – by WooCommerce
  • WooCommerce PayPal Checkout Gateway – by WooCommerce
  • WooCommerce Stripe Gateway – by WooCommerce
  • WooCommerce Stripe Payment Gateway – by WooCommerce

Payment Gateways – with Express Checkout (PRO feature)

  • WooCommerce Amazon Pay – by WooCommerce
  • WooCommerce Stripe Gateway – by WooCommerce

Plugins

  • Brazilian Market on WooCommerce – by Claudio Sanches (see demo)
  • Checkout Field Editor for WooCommerce – by ThemeHigh
  • Captcha Pro – by BestWebSoft
  • Creative Mail – by Constant Contact
  • Delivery & Pickup Date Time for WooCommerce – by CodeRockz
  • Elementor – by Elementor Team
  • Flexible Checkout Fields for WooCommerce – by WP Desk
  • FluentCRM Pro – by Fluent CRM
  • Flexible Shipping – by WP Desk
  • German Market – by MarketPress
  • Germanized for WooCommerce – by vendidero
  • Klaviyo – by Klaviyo.
  • MailerLite WooCommerce Integration – by MailerLite
  • MailPoet – by MailPoet
  • SG Checkout Location Picker for WooCommerce – by Sevengits
  • SG Map to Address – by Sevengits
  • WooCommerce Correios – by Claudio Sanches
  • WooCommerce Delivery & Pickup Date Time Pro – by CodeRockz
  • WP Crowdfunding – by Themeum

Plugins (PRO feature)

  • WooCommerce PDF Invoices & Packing Slips – by Ewout Fernhout
  • WooCommerce Print Invoices/Packing Lists – by SkyVerge

** Don’t see a plugin in the list? No problem. **

Only the plugins that we have added explicit compatibility with, or that we have tested and works as expected are listed above.

If a plugin or payment method is not on the list it does not mean it won’t work. Only that we have not tested it yet.

Try Fluid Checkout now and if you experience any issues please let us know through the support forum and we’ll fix it asap.

Fully Customizable

In addition to a number of default settings (including a custom header/logo), multi-step or single step layout types and easily enabling/disabling features from settings page, the plugin contains HTML/PHP based templates and provides many filters and action hooks that allow for customization.

To customize template files, copy the templates to your theme folder, add a hook to the filter fc_override_template_with_theme_file to allow the plugin’s version of the template to be overriden by the your customized template file. For more information and examples, see our guide How to customize template files.

To customize styles when making small adjustments, just add your custom CSS through your theme, the Customizer Custom CSS field or using a plugin.

If you need more control, you can remove the plugin styles and add your own complete custom CSS files. If you are familiar with SASS and other code building tools, the original SASS files are included in the plugin and can be modified and rebuilt, most styles make use of SASS variables that can make the process a lot easier.

Translations

All labels and other texts added or changed by the plugin are translatable using the built-in WordPress functions.

Currently the plugin is translated into the languages below, and more are comming soon:

  • English (Default)
  • Dutch – Netherlands (thanks to Robin Bak, Duncan – magnesium-minerals.nl, Damy Bosch – advice.nl)
  • German – Germany (thanks to @reilix – felix-gudowius.de)
  • Italian – Italy (thanks to Samuele – floralgarden.it)
  • Portuguese – Brazil
  • Spanish – Spain (thanks to @gio15 – senseiwpacademy.com)
  • Swedish – Sweden (thanks to @kozley, @tobifjellner, @elbogen)
  • Turkish – Turkey (thanks to @orkunakca)

** Want Fluid Checkout in your language? **

Please contribute your language to the plugin to make it even more useful. Send your translation files through our support channel.

** RTL Support **

  • Although currently there are no official transations to any RTL language, the plugin will adjust its layout to RTL languages accordingly.

** Note: **

Fluid Checkout is fully localized/translatable. This is very important for all users worldwide.
For translating Fluid Checkout, we recommend the plugin “Loco Translate – By Tim Whitlock”.

Contributions are welcome

Your are more than welcome to contribute to the project with your code, feature request and feedback.

If you found and fixed a bug, implemented a new feature, or translated the plugin.
Please fork the repository from Github and submit a Pull Request.

Screenshots

  • Step 1 - Contact: Email, account creation and newsletter sign-up
  • Step 2 - Shipping: Shipping address, shipping method, additional order notes
  • Step 3 - Billing: Billing address and company information
  • Step 4 - Payment: Payment options and discounts
  • Single Step: All fields are displayed in one single step.
  • Settings: Multi-step or single-step layout, choose a logo and header color, enable/disable features
  • Theme Deli: The checkout page looks and feels like your website, even with highly styled themes

Installation

Automatic installation

  • Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.
  • Search for “Fluid Checkout for WooCommerce”, and press “Install now”.
  • Or, press “Upload Plugin” and select the zip file, then press “Install Now”.

Settings

Once installed and activated, the Fluid Checkout will take over the WooCommerce checkout page and change its layout to the multi-step option. The default settings were chosen to minimize checkout abandonment and to work for most shops. Some features need to be enabled on the settings page before you see them at the checkout page.

If you want to tweak the settings, head over to WP Admin > WooCommerce > Settings > Fluid Checkout.

FAQ

Is there a Fluid Checkout PRO version?

Yes. You can get the Fluid Checkout PRO version our website.

View detailed list of PRO features on our website

Fluid Checkout PRO demo site

Will Fluid Checkout work with my theme?

Yes! Fluid Checkout should work with most theme out-of-the-box. However some themes may need adjustments due to not using WooCommerce standard hooks or styles.

If you have any issues using Fluid Checkout with your theme please let us know through the support forum and we’ll fix it asap.

Does Fluid Checkout work with other plugins I use on my webshop?

Although Fluid Checkout was built in a way that it should be compatible with most plugins, the checkout page is a really complex part of WooCommerce and there are myriads of plugins that extends it. Because of that, it is likely that some plugins won’t work optimaly with Fluid Checkout out-of-the-box.

If you have any issues using Fluid Checkout with other plugins please let us know through the support forum and we’ll fix it asap.

Is Fluid Checkout compliant with privacy laws (GDPR/RGPD/CCPA/LGPD)?

We value your privacy and your customers’ privacy.

While we cannot guarantee that the plugin is fully compliant with privacy laws in every country.

We assure you that Fluid Checkout does not, and will not, collect any customer data from your shop.

In the future, and with your explicit consent, we might collect some non-sensitive usage data from your website such as the plugin and WooCommerce settings, which other plugins and themes you have installed on your shop to help us to improve the plugin.

Details and examples of the data collected will be shown on the plugin interface for you to review prior to sending the data to our servers for collection and storage.

Is Fluid Checkout fully compatible with ADA/WCAG 2.1 Level AA requirements? Will it make my webshop compliant?

No. While Fluid Checkout does improve the accessibility of the checkout page by implementing support for keyboard-only navigation and screen readers, we can’t say if your webshop will be 100% compliant or not with ADA, WCAG or any other accessibility requirements.

Did you know that only about 30% of accessibility issues can be detected with automated tools? The majority of the issues can only be detected with manual testing on each page of the website. Read the article: Automated Accessibility Testing Tools: How Much Do Scans Catch?.

We have plans to add an “accessible layout” feature that will ensure most accessibility issues will be fixed.

Contact us if you need help with making your webshop accessible to people with disabilities.

How do I add trust symbols to the checkout page?

The plugin provides widget areas in strategic positions on the checkout page for adding the trust symbols. Head over to WP Admin > Appearance > Widget Areas, and add any type of widget to boost the perceived trust customers have on the website.

Reviews

Sseeboaseka 24, 2022
Excellent work so far. Code is super clean compared to a lot of other plugins. Templates easily customisable if needed. Creator is responsive to bugs and suggestions. I look forward to the future of this plugin!
Sseeboaseka 6, 2022
Using it and really grateful for this product so far. Simple, professional and easy to handle for the customer.
Muzigo 24, 2022
A new and wonderful look for the checkout page and it works without any problems and its very easy to deal with That simple
Muzigo 20, 2022
Percebo que o plugin está evoluindo cada vez mais. Como sugestão: compatibilidade com o tema Electro e dar a opção de ocultar endereço de entrega e/ou faturamento, deixando apenas um dos dois. Estou na espera pela versão Pro, mas espero que mantenha as funcionalidades que já são free atualmente. Parabéns aos devs!
Muzigo 16, 2022
The best plugin I know in terms of checkout UX. I use Woodmart theme and with a few css lines I got a fantastic checkout page, better than Shopify. The free version comes with almost all the features you need for which other plugins charge you $$$ (like CheckoutWC which starts from 129$/year). I imagine the premium version (not yet released) will come out with tons of other useful features. I also use Flexible Checkout fields to hide/add fields and the compatibility is pretty good. The support on the forum is also great. Thank you!
Read all 70 reviews

Contributors & Developers

“Fluid Checkout for WooCommerce – Lite” is open source software. The following people have contributed to this plugin.

Contributors

“Fluid Checkout for WooCommerce – Lite” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Fluid Checkout for WooCommerce – Lite” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.0.0 – 2022-06-27

BREAKING CHANGES – Some features were removed from the Lite version and moved to the PRO version. Read details at https://fluidcheckout.com/version-2-moved-features/

  • Removed: Moved features “Express Checkout”, “Gift Options”, “Local Pickup” and “Packing Slips” from Lite version to the PRO version.
  • Bump tested up to WooCommerce 6.6.1
  • Added: New filter fc_output_checkout_contact_logout_cta_section to enable displaying a logout link on the “My contact” substep when user is logged in. Defaults to “disabled”.
  • Improved: RTL support on account address edit screens.
  • Improved: Utility colors (success, error, alert, info) to meet WCAG 2.1 level AA for accessibility constrast criterias. Although, this does not guarantee all elements meet the accessibility criterias.
  • Improved: Change color for current step in the progress bar to same as complete steps, as there seems to be a consensus that this better communicates the current progress status.
  • Improved: Do not load checkout assets on other pages.
  • Improved: Renamed account-page-address style handle and files to edit-address-page to better indicate where the styles are loaded and keep consistency across the plugins.
  • Improved: Set width for the login form which improves compatibility with various themes.
  • Fixed: Lite version should not affect order pay or order received pages or when user must log in before being able to checkout.
  • Fixed: Remove progress bar if cart is expired.
  • Fixed: Missing styles for the add payment method page on account pages.
  • Fixed: Missing the border on corners of some steps.
  • Fixed: Moved login section to inside the “My contact” substep. Fixes the issue with login section not being displayed if user has already entered an email address.

1.6.1 – 2022-06-13

  • Bump tested up to WordPress 6.0 and WooCommerce 6.5.1
  • Added: Body class fc-checkout-step-current--<step_id> to let developers change elements styles based on the currently active step.
  • Added: Feature to disable the place order buttons when not in the last step, activated by default. Use filter fc_checkout_maybe_disable_place_order_button to deactivate changes to the place order button disabled state.
  • Added: Compatibility with theme Enfold.
  • Added: Compatibility with theme Striz.
  • Added: Compatibility with theme Razzi.
  • Added: Compatibility with plugin CurieRO.
  • Added: Compatibility with plugin WP Crowdfunding.
  • Improved: Translations to Dutch.
  • Improved: Compatibility with plugin Brazilian Market.
  • Improved: Compatibility with plugin German Market.
  • Fixed: Order summary height too big on desktop view in some instances, resulting in extra whitespace.
  • Fixed: Duplicate IDs and field names when the additional place order section is displayed on the sidebar.
  • Fixed: Missing compatibility RTL support for some themes.
  • Fixed: JS error on checkout fragments script when fragments are returned in an unexpected format.
  • Fixed: Fatal error related to coupon code fields functions calling wc_coupon_enabled too early.

1.6.0 – 2022-05-19

  • Added: New option to enable/disable the Checkout Progress Bar feature.
  • Added: New hooks fc_shipping_methods_before_packages_inside and fc_shipping_methods_after_packages_inside.
  • Added: Translation to Dutch (Netherlands). Thanks to Robin Bak, Duncan – magnesium-minerals.nl, Damy Bosch – advice.nl.
  • Improved: Clear object cache with wp_cache_flush when saving settings or updating the plugin.
  • Improved: Moved some options from the “Advanced” to “Tools” and “Checkout” settings tabs. Removed the “Advanced” settings tab.
  • Improved: Only register checkout header widget areas when using the Fluid Checkout header template.
  • Improved: Display the shipping calculator above the shipping methods in the cart page (PRO feature).
  • Improved: Refactor make SCSS code reusable by using variables like $_body-theme-selector and $_body-page-selector.
  • Improved: Only display no shipping methods message on the checkout page when using the template file shipping-methods-available.php.
  • Improved: Refactor integrated coupon code feature to use own AJAX functions and scripts.
  • Improved: Refactor extract coupon code styles into a separate file.
  • Improved: Allow fragments to be replaced every time even when their contents are equal the existing elements in the DOM when they contain any element with class fc-fragment-always-replace.
  • Improved: Compatibility with plugin Brazilian Market.
  • Improved: Compatibility with theme Shoptimizer.
  • Improved: Compatibility with themes, set expected styles for cart items rows in the order summary.
  • Improved: Spacing around trust symbols widget areas.
  • Fixed: Hide shipping methods on the cart page when WooCommerce the option “Hide shipping costs until an address is entered” is checked (PRO feature).
  • Fixed: Run hooks fc_shipping_methods_before_packages, fc_shipping_methods_after_packages only on initial page load skip on AJAX fragments requests.
  • Fixed: Do not attempt to output the admin Gift Message edit form on the front end.

See older changes