This topic has 14 replies, 3 voices, and was last updated 2 months, 2 weeks ago ago by Rose Tyler
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
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
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
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
Hello, this has worked perfectly. Thanks very much!
Hello,
You’re welcome!
Kind Regards,
8theme team
Hello, sorry but there are some more problems after I did this the CSS above – please see private area. Thanks
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
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
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
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
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
Hello,
this result:
https://prnt.sc/w-9gyJCFgOxI we will not have out of the box and we will have this design https://prnt.sc/GS21QEP1suNB if we add quantity box?
BR
Tommy
Hello, Tommy,
Thank you for getting in touch with us.
This is an old thread https://prnt.sc/4hvodoIkxWMJ If you want to read old solutions, please check – https://www.8theme.com/topic/sticky-cart-problem-not-displaying-properly-on-mobile/#post-387034
Open up new topics for your questions, and we will help you – https://www.8theme.com/forums/xstore-wordpress-support-forum/
Warm Regards,
The 8Theme Team
Tagged: content overlapping, fix problem, sticky cart, template, woocommerce, wordpress
You must be logged in to reply to this topic.Log in/Sign up