Return to previous page

Hello, I would like to fix this problem with the sticky cart where the content is overlapping

This topic has 12 replies, 2 voices, and was last updated 9 months, 1 weeks ago ago by Rose Tyler

IP

Participant

July 31, 2023 at 09:46

As you can see in this picture (https://prnt.sc/GS21QEP1suNB) the sticky cart is overlapping outside of the screen (for mobile)
How can i fix this please?

I would like it like this if possible (https://prnt.sc/223NVRTt_z7I)
If the “Quantity” tab is required then it is ok but if it can be removed it would be better.

Thanks

Please, contact administrator
for this information.

#363295 Copied Theme version: 9.1.11 WooCommerce version: Latest

11 Answers
Rose Tyler

Support staff

July 31, 2023 at 13:42
Hello,

Thank you for getting in touch with us.

Please try to use the next custom CSS code:
```
.etheme-sticky-cart .quantity {
    display: none;
}
.etheme-sticky-cart .quantity, 
.etheme-sticky-cart #wcpay-payment-request-button-separator,
.etheme-sticky-cart p.price {
    display: none !important;
}
.etheme-sticky-cart .single_add_to_cart_button.button {
    margin: 0px 0px 5px 0px;
    width: 100%;
}
.single-product .etheme-sticky-cart form:not(.variations_form):not(.grouped_form) {
    display: block;
}
```
Kind Regards,
8theme team
#363310 Copied
IP

Participant

July 31, 2023 at 23:16

Hello, thanks for your response. It is working but how can I put it like this? https://prnt.sc/1TVaRwQxnAXd

Also, how I can make it sticky (not smart sticky but fixed sticky) so it doesn’t disappear on scroll? Like the headers? If it can be on TOP of the Mobile Menu (for mobiles) – please see picture https://prnt.sc/1TVaRwQxnAXd

Thanks

#363381 Copied
Rose Tyler

Support staff

August 1, 2023 at 07:50
Hello,

Please try the next custom CSS code:
```
.etheme-sticky-cart.outside {
    opacity: 1;
    visibility: visible;
    transform: none;
}
@media only screen and (max-width: 992px) {
    .et-mobile-panel-wrapper.outside {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .etheme-sticky-cart,
    .etheme-sticky-cart.outside {
        transform: translateY(-59px);
    }
}
```
Kind Regards,
8theme team
#363394 Copied
IP

Participant

August 1, 2023 at 08:31

Hello, this has worked perfectly. Thanks very much!

#363398 Copied

Rose Tyler

Support staff

August 1, 2023 at 08:49

Hello,

You’re welcome!

Kind Regards,
8theme team

#363399 Copied

IP

Participant

August 1, 2023 at 09:21

Hello, sorry but there are some more problems after I did this the CSS above – please see private area. Thanks

Please contact administrator
for this information.

#363402 Copied
Rose Tyler

Support staff

August 1, 2023 at 10:47
Hello,

Thank you for your response.

Please change this code https://prnt.sc/2PhbYEvI5RZK to only
```
.etheme-sticky-cart .single_add_to_cart_button.button {
    min-width: 150px;
}
```
After that clear cache of the mobile browser on your device.

Please find where you added this previous custom CSS code and change it to: https://prnt.sc/5tEgxNHeds4R to
```
.etheme-sticky-cart .quantity, 
.etheme-sticky-cart #wcpay-payment-request-button-separator,
.etheme-sticky-cart p.price,
.single-product .wcpay-payment-request-wrapper {
    display: none !important;
}
.single-product p#wcpay-payment-request-button-separator {
    font-size: 0px;
}
```
Kind Regards,
8theme team
#363417 Copied
IP

Participant

August 1, 2023 at 11:57

Hello, thanks for your message.

The seperator has been fixed, thank you very much.

However, i was unable to fix the other things. I have tried playing with the CSS and just can’t fix it.
By the way, this is for both of the problems – the red and blue circles. (PICTURE is in private area).
I have provided admin access in private area – I have backed up the site – please can you tell me what you did as I will revert the website once you are finished (for security reasons)

Thanks

Please contact administrator
for this information.

#363424 Copied
Rose Tyler

Support staff

August 1, 2023 at 15:52
Hello,

Thank you for your response.

Please add the next code in xstore-child/functions.php:
add_filter('etheme_sticky_add_to_cart_buy_now_hide_mobile', '__return_false');

Also, add the next code in Theme Options > Theme custom CSS > Global:
```
.mobile-device .single-wishlist .button-text, 
.mobile-device .single-compare .button-text {
    display: none;
}
.mobile-device .single-wishlist a, 
.mobile-device .single-compare a {
    margin: 0 5px !important;
}
.mobile-device .single-wishlist, 
.mobile-device  .single-compare {
    align-self: center;
}
```
Kind Regards,
8theme team
#363439 Copied
IP

Participant

August 1, 2023 at 17:47

Hello, thanks for your response.

Everything has been fixed and I appreciate the support, XSTORE is a very good theme.

There is one more issue that has arisen, I tried changing it via the custom CSS but it just isn’t working – please note problem is on actual mobile device and not on responsive mode. (Link: https://prnt.sc/Tb8xJAZ1e8Vv)

After this issue, all issues will have been resolved and I will mark as resolved – thanks again

#363442 Copied
Rose Tyler

Support staff

August 2, 2023 at 07:40
Hello,

Thank you for your response.

We added the next custom CSS to your Theme Options -> Theme Custom CSS -> Mobile (0 – 480)
```
.etheme-sticky-cart .single_add_to_cart_button.button {
    min-width: 130px;
    white-space: nowrap;
}
```
Result -> https://prnt.sc/w-9gyJCFgOxI

Kind Regards,
8theme team
#363463 Copied
Tagged: content overlapping, fix problem, sticky cart, template, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)