Skip to content
Fluid Checkout
  • Demo
  • Features
  • Add-ons
    • Complete Bundle Save 42%
    • Fluid Checkout PRO
    • Google Address Autocomplete
    • Address Book
    • EU-VAT Assistant
  • Pricing PRO
  • Docs
  • Support
  • My account
0,00 € 0 items
Home / Docs / Fix order summary and progress bar being cut off by the site’s header

How can we help?

Getting started

  • Do I need to uninstall the free version when upgrading to PRO, or is Fluid Checkout Lite required?
  • Getting Started with Fluid Checkout
  • Getting started with Google Address Autocomplete
  • Translate Fluid Checkout plugins into your language

Features

  • Proof of address for sales of digital goods
  • WooCommerce edit cart on checkout — change quantity or remove items from the cart directly at the checkout page
  • Trust symbols — add security badges, trust seals and other trust symbols to strategic places on the checkout, cart and order received pages
  • Order pay – optimized and intuitive design for your WooCommerce Order Pay page
  • Privacy compliance – Personal data erasers and exporters
  • Local Pickup — WooCommerce Local Pickup hide shipping address when local pickup is selected
  • International phone numbers — WooCommerce checkout phone number validation and formatting based on country rules
  • Express checkout — quick payment buttons for Google Pay, Apple Pay and other payment methods
  • Design templates — match your brand styles on the WooCommerce Checkout template
  • Billing address positions — choose to display billing address before shipping, inside the shipping step or force shipping and billing address to a single section
  • Account matching / user matching — associate purchases with and existing customer account without logging in

Customizations

  • Fix order summary and progress bar being cut off by the site’s header
  • Change the icon or icon color for the cart button on mobile
  • Move the “Phone” field to the contact step
  • Using Google Address Autocomplete on custom address fields and sections
  • Configure cart quantity fields for decimal quantities
  • Change fields copied from shipping address to billing address
  • Move first and last name fields to the contact step
  • Enable address autocomplete by zip code or post code
  • Customize Local Pickup location address and use multiple pickup locations
  • Customize button colors and other button styles
  • Customize colors of elements on Fluid Checkout
  • Customize template files for WooCommerce and Fluid Checkout
  • Customize checkout steps
  • Add custom house number field and make it required
  • Customize checkout fields and adding custom checkout fields
  • Safely add code snippets to your WooCommerce website

Compatibility

  • Compatibility with plugin YITH WooCommerce Cart Messages Premium
  • Compatibility with plugin Shipping Zones by Drawing
  • Compatibility with plugin Elementor
  • Compatibility with plugin MyParcel
  • Compatibility with theme The Gem
  • Compatibility with plugin WooCommerce Delivery Slots by Iconic
  • Compatibility with plugin Mailchimp for WooCommerce
  • Compatibility with plugin WooCommerce Checkout Manager By QuadLayers
  • Compatibility with plugin Breakdance
  • Compatibility with theme Pressmart
  • Compatibility with theme Divi and the Divi Builder
  • Compatibility with WooCommerce Block-based checkout and cart forms
  • Compatibility with theme Goya
  • Compatibility with theme Botiga
  • Compatibility with theme Atomion
  • Compatibility with theme OceanWP
  • Compatibility with plugin Digits
  • Compatibility with plugin Storefront Powerpack
  • Troubleshooting – jQuery events or vanilla JavaScript events not working
  • Compatibility with theme ZK Nito
  • Compatibility with Checkout Field Editor PRO by ThemeHigh
  • Compatibility with theme Woodmart
  • Compatibility with plugin “Plugin Organizer”

Troubleshooting

  • Troubleshooting – jQuery events or vanilla JavaScript events not working
  • Troubleshooting – Local pickup prevents customer from proving a shipping address, blocking other shipping methods
  • Troubleshooting – Redirected to error 404 (page not found) when trying to delete an address from the Address Book
  • Troubleshooting – Google Addresses Autocomplete not working despite following installation guide
  • Troubleshooting – Trust symbols widgets randomly moving to other areas when switching themes

Account & Purchases

  • Can I get a refund for my purchase?
  • Finding my invoice, adding billing details and VAT number
  • New versions updates are not appearing on my website

Development

  • Changelog – Fluid Checkout EU-VAT Assistant
  • Troubleshooting – jQuery events or vanilla JavaScript events not working
  • Changelog – Fluid Checkout Address Book
  • Checking data returned from Google Address Autocomplete address search
  • Changelog – Google Address Autocomplete
  • Changelog format and semantic version numbers
  • Changelog – Fluid Checkout PRO & Lite
View Categories

Fix order summary and progress bar being cut off by the site’s header

Order summary and progress bar is being cut off by the header #

Usually the site’s header will only cut off the order summary and progress bar when the original theme’s header is being used.

By default, Fluid Checkout will replace the checkout page header with a simplified version and this issue would not happen. If you are experiencing this issue on your website, you are probably using your theme’s header on the checkout page.

Example showing the Divi theme’s header cutting off the order summary, the progress bar is not show.

We recommend using the default checkout page header provided by Fluid Checkout as it is optimized for conversions and is also required to display the mobile cart button which gives the customers access to the total order amount and the popup order summary section on mobile devices.

Although, there are some cases which using the theme’s header and footer at the checkout can be beneficial.

For the cart page, if you are using the Cart Optimization feature from the Fluid Checkout PRO plugin, the default option is to use the theme’s header instead of the cart page header provided by Fluid Checkout PRO.

Why does the order summary and progress bar get cut off? #

The order summary and progress bar rely on the existence of the checkout header element provided by Fluid Checkout to define the position where it should be positioned fixed, following the user while scrolling, and when the element should scroll with the page out of the user’s immediate view.

Since each theme might use a different ID for the site header, and they differ a lot, it is not possible for us to define a default value that will work for all themes or even most of them.

We need to add compatibility for each theme separately as we discover which ID is used for them. That is one reason why the feature to use the site’s header is marked as “Experimental”.

We can’t possibly test all existing themes free and paid and add compatibility for all of them in advance.

Changing the header element ID used to position the order summary and progress bar #

To fix this issue you’ll need to add a customization code to your website, changing the ID used for positioning the order summary and progress bar.

The code snippet needed is slightly different for the checkout page and cart page.

Checkout page #

The code used to fix the order summary and the progress bar are pretty similar. You only need to replace the value of the attribute data-sticky-relative-to to match the ID of your theme’s header. In this case, for the Divi theme the header element ID is #main-header.

/**
 * Change the sticky relative element for sticky elements on the checkout page.
 */
function fluidcheckout_change_sticky_elements_relative_header( $attributes ) {
	// Bail if using the plugin's header and footer
	if ( FluidCheckout_Steps::instance()->get_hide_site_header_footer_at_checkout() ) { return $attributes; }

	$attributes['data-sticky-relative-to'] = '#main-header';

	return $attributes;
}
add_filter( 'fc_checkout_progress_bar_attributes', 'fluidcheckout_change_sticky_elements_relative_header', 30 );
add_filter( 'fc_checkout_sidebar_attributes', 'fluidcheckout_change_sticky_elements_relative_header', 30 );

Remember to replace the value of the attribute data-sticky-relative-to at LINE 8 of this code snippet. See below how to find the correct ID for your theme.

If you are unsure about how to add the code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website

Cart page (PRO Feature) #

If you are using the Cart Optimization feature from the Fluid Checkout PRO plugin, you’ll need to use a slightly different code snippet to fix this issue on the cart page:

/**
 * Change the sticky relative element for sticky elements on the cart page.
 */
function fluidcheckout_change_sticky_elements_relative_header_cart( $attributes ) {
	// Bail if using the plugin's header and footer
	if ( ! class_exists( 'FluidCheckout_PRO_CartPage' ) || FluidCheckout_PRO_CartPage::instance()->get_hide_site_header_footer_at_cart() ) { return $attributes; }

	$attributes['data-sticky-relative-to'] = '#main-header';

	return $attributes;
}
add_filter( 'fc_pro_cart_sidebar_attributes', 'fluidcheckout_change_sticky_elements_relative_header_cart', 30 );

Remember to replace the value of the attribute `data-sticky-relative-to` at LINE 8 of this code snippet.
See below how to find the correct ID for your theme.

If you are unsure about how to add the code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website

Finding the ID of my theme fixed header element #

To find out what is the correct ID to use for your theme, follow the steps below:

1. Right-click any part of the site’s header.

2. Select the option “Inspect”, this will open the browser developer tools at the “Elements” tab.

3. Navigate the “Elements” tab, usually up in the elements hierarchy.

4. Find the element which is set to position: fixed, select one item in the “Elements” tab, and look in the “Styles” tab if the element has the CSS property position: fixed.

5. Copy the element ID to use as the data-sticky-relative-to on the code snippet above. It is preferable to use only the ID of the element (ie. #main-header), although a valid CSS selector is also accepted in case the element does not have an ID (ie. .et_fixed_nav .main-header).

6. Paste the copied ID or CSS selector in the code snippet, replacing the existing value for the attribute data-sticky-relative-to.

Still stuck? How can we help?

How can we help?

Updated on August 15, 2023
Change the icon or icon color for the cart button on mobile
Table of Contents
  • Order summary and progress bar is being cut off by the header
  • Why does the order summary and progress bar get cut off?
  • Changing the header element ID used to position the order summary and progress bar
    • Checkout page
    • Cart page (PRO Feature)
  • Finding the ID of my theme fixed header element
Fluid Checkout

Frictionless Multi-step Checkout for WooCommerce

© 2021-2025 Fluid Checkout OÜ

Terms | Refunds | Privacy Policy | Cookies

Products
  • All products
  • Fluid Checkout PRO
  • Fluid Checkout Lite
  • Google Address Autocomplete add-on
  • Address Book add-on
  • EU-VAT Assistant add-on
Company
  • Support
  • My account
  • Careers Hiring
  • About
  • Affiliates program
  • Homepage
  • Homepage
  • Features
  • Pricing PRO
  • Demo
  • Docs
  • Support
  • My account