How can we help?

Compatibility with WooCommerce Block-based checkout and cart forms

The block-based checkout and cart forms will be automatically replaced with Fluid Checkout’s optimized forms if you are using Fluid Checkout Lite 3.1.3+, and Fluid Checkout PRO 2.1.2+ for the optimized cart page feature if enabled.

In case you are using an older version of our plugins, please continue to follow the steps below.

Shortcode-based vs block-based checkout #

Up until WooCommerce version 8.2, the WooCommerce checkout shortcode has been the default way WooCommerce used to output the checkout form to the checkout page.

Since WooCommerce 8.3+, when creating new shops with WooCommerce the cart and checkout pages are created with the Checkout and Cart blocks for the block based editor (Gutenberg). More information can be found on WooCommerce’s website.

Manually replacing the block-based forms is not necessary anymore since Fluid Checkout Lite 3.1.3+ and Fluid Checkout PRO 2.1.2+ as they will be automatically replaced.

Fluid Checkout needs the classic shortcodes of the WooCommerce checkout and cart pages to work. This means you may need to replace the block-based WooCommerce forms with the shortcode below.

[woocommerce_checkout]

Similarly, if you are using the optimized cart page feature from Fluid Checkout PRO, you may need to use the cart shortcode:

[woocommerce_cart]

Checkout page #

Follow the steps below to check whether you have the shortcodes added to your checkout page and replace the block-based checkout form with the shortcode if needed:

  1. Go to WP Admin > Pages.
  2. Locate the page selected as your Checkout page, then click the option to edit it.
  3. In the page editor, enable the List View and then locate the Checkout Block. If you do not find the Checkout Block on the page content, skip to step 5.
Screenshot of the checkout edit page screen, showing the steps to delete the block-based checkout form.
  1. Select and delete the Checkout block.
Screenshot of the checkout edit page screen, showing the steps to add the shortcode-based checkout form.
  1. Check whether you already have a Shortcode block with the code [ woocommerce_checkout ] typed in it. If not, add a new Shortcode block in place of the removed Checkout Block and type [ woocommerce_checkout ] in the shorcode block field, without any spaces.
  2. Click the “Update” button at the top right of the page editor screen to save the changes.

Cart page #

If you have Fluid Checkout PRO, similarly to replacing the block with the shortcode for the checkout form (see above), you may also need to replace the shortcode for the cart page. Follow the steps below to check whether you have the shortcodes added to your cart page and replace the block-based cart form with the shortcode if needed:

  1. Go to WP Admin > Pages.
  2. Locate the page selected as your Cart page, then click the option to edit it.
  3. In the page editor, enable the List View and then locate the Cart Block. If you do not find the Cart Block on the page content, skip to step 5.
  4. Select and delete the Cart block.
  5. Check whether you already have a Shortcode block with the code [ woocommerce_cart ] typed in it. If not, add a new Shortcode block in place of the removed Cart Block and type [ woocommerce_cart ] in the shorcode block field, without any spaces.
  6. Click the “Update” button at the top right of the page editor screen to save the changes.