How to customize the sticky cart elements separately

4 replies3 participantsUpdated by John Holden

  • Avatar: Rodrigo
    Rodrigo Carlos
    Participant

    Hello people,

    The sticky cart has 4 elements: https://prnt.sc/u498i9
    I increased the buy button on the product page, with that, the sticky cart button ended up increasing too. Also, the sticky cart has 4 elements. No problem on the desktop, but on mobile, I think that 4 elements is a lot for a small screen. So I would like to hide the stock (https://prnt.sc/u498lr).
    I used the CSS below and it was good (https://prnt.sc/u49b1d), however, the CSS also disables the stock of the product page (https://prnt.sc/u49bay | https://prnt.sc/u49b6m) because the CSS code is the same for both locations.

    .stock.step-1 {
    display: none;
    }

    How do I hide the stock only in the sticky cart?

    And I would like to leave a suggestion for you to separate the CSS from the elements of the product page to the elements of the sticky cart, so we can edit them separately.

    Thank you!

    4 Answers

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Use the next code:

    .etheme-sticky-cart .stock {
        display: none;
    }

    Change your code for the button – https://prnt.sc/u4gjpa

    Regards

    Avatar: Rodrigo
    Rodrigo Carlos
    Participant

    I inserted the CSS code you provided and in the theme viewer, it’s ok (https://prnt.sc/u4ij9a). But the live page also hides the price (https://prnt.sc/u4hs69).
    Clear the css cache, but the price is really hidden.

    The CSS code refers to those of the elements: https://prnt.sc/u4im05

    Avatar: Rodrigo
    Rodrigo Carlos
    Participant

    It’s OK now.

    Avatar: John Holden
    John Holden
    Participant

    Hi,

    Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

    Regards,
    Hung PD

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