How to fix the 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 theme's header with a simplified version.

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

If you are experiencing this issue on your website, you are probably using your theme's header on the checkout page.

Although there are some cases where using the theme's header at the checkout can be beneficial, we recommend using the default header provided by Fluid Checkout as is optimized for conversion and is also required to display the mobile cart button that gives the users access to the total order amount and the order summary on mobile devices.

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.

You can follow the instructions to add customization code explained on this article, from these methods I prefer using a plugin such as “Code snippet“:
https://woocommerce.com/posts/properly-add-woocommerce-custom-code/

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`.

1. function fluidcheckout_change_sticky_elements_relative_header( $attributes ) {
2. // Bail if using the plugin's header and footer
3. if ( FluidCheckout_Steps::instance()->get_hide_site_header_footer_at_checkout() ) { return $attributes; }
4. 
   
5. $attributes['data-sticky-relative-to'] = '#main-header';
6. 
   
7. return $attributes;
8. }
9. add_filter( 'fc_checkout_progress_bar_attributes', 'fluidcheckout_change_sticky_elements_relative_header', 30 );
10. 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 5 of this code snippet. See below how to find the correct ID for your theme.

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. Prefer to use only the ID of the element (ie. `#main-header`), but a valid CSS selector is also accepted (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`.

• Related Articles

• How to change the icon or icon color for the cart button on mobile

  Fluid Checkout only provides one icon for the cart button. However, it is possible to change the icon for the cart button to match what is used for the website's theme or any other icon. There are a few ways to do it, which one to use will depend on ...

• How to customize WooCommerce or Fluid Checkout template files

  Because too many plugins and themes have their own versions of the WooCommerce template files Fluid Checkout also uses, we needed to force our template files to be used to have better compatibility with the greatest number of plugins and themes. In ...

• Compatibility with Plugin Organizer

  The layout issues are caused by the lack of the changes applied by Fluid Checkout on the WooCommerce AJAX calls that generate the HTML for the order review. The scripts and styles are being loaded, but the HTML is different than expected to apply the ...

• Customizing existing checkout field and adding custom checkout fields

  Adding custom checkout fields Custom checkout fields can be added or changed on Fluid Checkout in the same way as for the original WooCommerce checkout. There are two main ways you make changes to the checkout fields on your WooCommerce checkout ...