Return to previous page

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

This topic has 14 replies, 3 voices, and was last updated 4 months, 3 weeks ago ago by Rose Tyler

  • Avatar: Lovelyfashioncompany
    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
    13 Answers
    Avatar: Rose Tyler
    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
    Avatar: Lovelyfashioncompany
    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
    Avatar: Rose Tyler
    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
    Avatar: Lovelyfashioncompany
    IP
    Participant
    August 1, 2023 at 08:31

    Hello, this has worked perfectly. Thanks very much!

    #363398 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 1, 2023 at 08:49

    Hello,

    You’re welcome!

    Kind Regards,
    8theme team

    #363399 Copied
    Avatar: Lovelyfashioncompany
    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
    Avatar: Rose Tyler
    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
    Avatar: Lovelyfashioncompany
    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
    Avatar: Rose Tyler
    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
    Avatar: Lovelyfashioncompany
    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
    Avatar: Rose Tyler
    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
    Avatar: Tommy
    Tommy
    Participant
    October 5, 2024 at 18:34

    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

    #417366 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 6, 2024 at 09:31

    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

    #417411 Copied

  • Tagged: , , , , ,

  • Viewing 14 results - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Legenda – E-Commerce and Corporate PSD Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Church – WordPress Theme
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Hipster Store – WordPress WooCommerce Theme
lazy-placeholder
Home Decor 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.