the mobile summary is cut off by my header

Hi @theodric,

I visited the URL you provided but I couldn’t reproduce the issue.

There is a known issue regarding the order summary not being completely visible, but that happens only on the desktop view (not mobile) when the order summary (right part) is taller than the content of the steps (left part).

Could you take some screenshots or make a video of the issue?

Best,
Diego

Hi Diego,

I had deactivated the option concerning the summary of the order that follows when you scroll.

I have just reactivated it. You can test again, the order summary is hidden by a part of the header.

If that is a known issue, do you have a solution ?

Thank you for your help,

Théo

Hi @theodric,

Ah ok, that is for the desktop view…

Yes, it is a known issue that happens when using the website’s theme header instead of the Fluid Checkout header.

In this case, the solution is to set the theme’s header as the reference for the position of the sticky order summary. Since this depends on each theme, I need to add compatibility for each one of them separately.

I see you are using the Divi theme. I’ll add compatibility for this feature for the Divi theme.

I’ll also write an article on how to fix this in the knowledge base for future reference.

I let you know once this has been fixed.

Best,
Diego

Diego,

Thank you a lot for your support !

I remain available if you need me !

Best,

Théo

Hi @theodric,

I wrote an article on how to fix this issue. I’m leaving a link here for future reference:
https://support.fluidcheckout.com/portal/en/kb/articles/order-summary-progress-bar-cut-off-by-header

You don’t need to follow the instructions in the article as compatibility for the theme you are using (Divi) has already been added and will be available in the next release (1.3.1).

I let you know once the new version is available.

Best,
Diego

Hi Diego!

Thanks a lot for your support!

I’m waiting for the plugin update then!

Best,

Théo

Hi @theodric,

The new version (1.3.1) which should fix the issue has been released and is now available to update.

Best,
Diego

Hi Diego!

I have updated the plugin on the site, I still have the same problem.

Moreover, I tried the other solution with the code but without success too…

Thank you again for your help!

Théo

Hi @theodric,

It seems you are using some plugin to customize the site header (perhaps a page builder?).

You should probably target the promotion banner element, try with this value for the data-sticky-relative-to:

$attributes['data-sticky-relative-to'] = '.et_pb_section_1_tb_header';

I also noticed there are some issues with the header layout when visiting the page with the browser window width from 981px to 1061px.

I hope that helps ??

Best,
Diego

Hi Diego!

Thank you for your help and your notice.

I tried this code:

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'] = '.et_pb_section_1_tb_header';

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

via code snippet but it doesn’t work, do you think there might be an incompatibility with one of my plugins?

Thank you a lot again!

Théo

Hi @theodric,

Looks like the change wasn’t applied. It is now pointing to #main-header which is the Divi theme default header element.

This could be because of the priority of the filters being the same between this customization and the compatibility code for the Divi theme.

Please change the priority on the add_filter calls from 20 to 30 as shown below:

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 );

Hopefully, it will work this time ??

If not, please contact me at support [at] fluidcheckout.com

Best,
Diego