Return to previous page

Problem with sticky add to cart on mobile, it’s not sticky to down the page but has a little space

This topic has 15 replies, 3 voices, and was last updated 2 weeks, 2 days ago ago by Jack Richardson

Deborah

Participant

May 16, 2025 at 14:52

Hello,

I’m having an issue with the sticky add to cart.
When I scroll down, there’s a slight transparent gap at the bottom, which reveals the site underneath the sticky add to cart bar.
Note: When scrolling up, there’s no issue because the iPhone’s grey bar fills that space.
See attached screenshots.

Files is visible for topic creator and
support staff only.

#444616 Copied Theme version: 9.4.11

14 Answers

Alex Carter

Support staff

May 16, 2025 at 15:06

Hello,

Thank you for reaching out to us.

Could you please provide the URL of the product shown in your screenshot? Additionally, kindly let us know which browsers you are using where the issue you described is visible.

Warm Regards,
The 8Theme Team

#444618 Copied

Deborah

Participant

May 19, 2025 at 12:52

Hello,
Sure, here is it :

I’m using Chrome.

Warm regards,

Please contact administrator
for this information.

#444792 Copied
Jack Richardson

Support staff

May 19, 2025 at 16:00
Dear @Deborah,

We hope this message finds you well.

Kindly try adding the following custom CSS to your website and check from your device then:

body .etheme-sticky-cart { top: 100%; bottom: auto; transform: translateY(-100%); }

For guidance on where to place custom CSS, please refer to our documentation at the following link:
https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Should you have any further questions or require assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#444826 Copied
Deborah

Participant

May 19, 2025 at 16:13

Dear Jack,

Unfortunately, it seems it didn’t change (see capture)

Files is visible for topic creator and
support staff only.

#444829 Copied

Jack Richardson

Support staff

May 20, 2025 at 06:57

Dear @Deborah,

We hope this message finds you well.

Could you kindly check whether you are experiencing the same issue with the sticky bar on our demos ? Based on our investigation, it appears that the device you are using may have a specific configuration. According to discussions on Apple forums, certain style properties may be ignored on such devices.

While we are happy to explore a tailored solution for you, we would need access to the same device model in order to replicate and analyze the issue accurately, as we are currently unable to reproduce it on our end.

In the meantime, you may also consider checking relevant forums or resources for information regarding the behavior of fixed-position elements in the browser on your specific device.

Thank you for your understanding and cooperation.

Best regards,
Jack Richardson
The 8Theme Team

#444868 Copied

Deborah

Participant

May 20, 2025 at 12:06

Dear Jack,

Yes I have same issue with your demo (see capture).
I have an iphone 13 pro and I’m using Chrome.

I asked to my team and they don’t have the problem with Safari so apparently it’s only on Chrome.

Files is visible for topic creator and
support staff only.

#444936 Copied
Jack Richardson

Support staff

May 21, 2025 at 07:43
Dear @Deborah,

Thank you for reaching out.

Unfortunately, we do not have access to the specific device you are using to replicate the issue. However, we have tested the sticky cart functionality across multiple devices on our end, and it appears to be working correctly.

Could we kindly ask you to check the issue using a different browser and device? This will help us determine whether the problem is related to a specific browser or device type. Identifying this will allow us to explore a more tailored solution for your case.

As a possible fix, we suggest replacing the previously provided code snippet with the following custom CSS. Please remove the earlier code and add the snippet below, then check if the issue persists:

body .etheme-sticky-cart { bottom: env(safe-area-inset-bottom, 0); }

We appreciate your cooperation and look forward to your feedback.

Best regards,
The 8Theme Team
#444988 Copied
Deborah

Participant

May 22, 2025 at 12:02

Dear Jack,

I don’t have the problem with Safari browser on phone, only with Chrome on phone.
Do you know if majority of people goes with Safari with their phone? Maybe it’s not that important.

New CSS doesn’t make any change :/.

#445162 Copied

Jack Richardson

Support staff

May 23, 2025 at 14:37

Dear @Deborah,

Thank you for reaching out.

Unfortunately, we have not been able to reproduce the issue on our end despite testing it across various devices and browsers. At this time, we have not identified any problems.

Should we discover a solution or receive a helpful suggestion from another customer, we will be sure to implement the fix globally.

In the meantime, we kindly ask that you check from your device whether there are any websites where similar sticky panels are displayed correctly. If so, please share the URLs with us so we can review the implementations and explore potential solutions.

Thank you for your understanding and cooperation.

Best regards,
The 8Theme Team

#445269 Copied

Deborah

Participant

May 23, 2025 at 15:44

Dear Jack,

Thanks for your reply. I found many website which has the same problem 😅.

Same problem with https://horeecosmetiques.com/

I found one ok : https://seasonly.fr/

See capture attached. Hope it helps :).

Have a nice week end,

Deborah

Files is visible for topic creator and
support staff only.

#445280 Copied

Jack Richardson

Support staff

May 24, 2025 at 14:53

Dear @Deborah,

We have reviewed the websites in question but were unable to identify any specific solution for resolving this issue. It is possible that this website load additional scripts or styles under certain conditions, which makes it difficult to determine a definitive approach.

If you come across any other websites with correctly functioning sticky sections, please feel free to share them with us. They may help us better understand and potentially identify a suitable solution.

At this time, however, we are unable to provide a specific recommendation.

Best regards,
Jack Richardson
The 8Theme Team

#445412 Copied
Jack Richardson

Support staff

May 28, 2025 at 07:56
Hello @Deborah
Could you please, try add next custom CSS and check from your device? We are trying to find the solution to include it in our update.

body .etheme-sticky-panel { inset-inline: 0; }

Kind regards, Jack Richardson
The 8theme’s team
#445735 Copied
Deborah

Participant

May 28, 2025 at 08:27

Hello Jack,

I did but it didn’t make a change :/.

Files is visible for topic creator and
support staff only.

#445742 Copied

Jack Richardson

Support staff

May 28, 2025 at 08:49

Hello @Deborah
Thanks for quick feedback. Could you please, also test next single product page from your mobile device ?
https://themes.woocommerce.com/storefront/product/build-your-dslr/
There is a sticky panel on mobile so, it would be good if you could share your screenshot of such page.
Kind regards, Jack Richardson
The 8theme’s team

#445748 Copied
Viewing 15 results - 1 through 15 (of 15 total)