[Resolved] I’m not able to customize the cart via css.

Home Forums Support I’m not able to customize the cart via css.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1393562
    Luiz Guilherme

    After installing Generatepress premium I can’t customize the cart using css.

    None of my rules that had been created before work anymore.

    For example: I used the code below to change the color of the area that contains the remove product button, now it doesn’t work anymore:

    .product-remove{
    	background-color:#e8e8e8!important;
    }

    I used the code below to remove the thumbnail images from the cart, it doesn’t work anymore:

    .cart .product-thumbnail{
    	display:none!important;
    }

    When I make changes using the “Inspect from browser” option I can see the changes, however, adding css in the wordpress customization area does not work.

    These were just a few examples. All the other changes I made to the cart do not work.
    What is happening?

    How do I customize my cart via css?

    #1393858
    David
    Staff
    Customer Support

    Hi there,

    Woocoomerce CSS selectors are very specific. So your CSS has to be specific eg.

    .woocommerce table.shop_table td.product-remove {
        background-color:#e8e8e8ed;
    }
    
    .woocommerce table.shop_table td.product-thumbnail,
    .woocommerce table.shop_table th.product-thumbnail {
        display: none;
    }
    #1394644
    Luiz Guilherme

    Hello, Thanks for the feedback.

    I did exactly as you said, and it doesn’t work.

    Nothing is changed.

    #1395032
    David
    Staff
    Customer Support

    Where did you add the CSS? And can you add it back to the site so i can see the issue?

    #1396406
    Luiz Guilherme

    Hi David.

    I was inserting the CSS in “Additional Css” by going to [Appearance]> [Customize].

    Even using the prefix “.woocommerce table.shop_table”
    It wasn’t working.

    So I created a child theme, and inserted the code into the CSS of this theme, this time in [Appearance]> [Theme editor]> [File “stile.css”] and it worked.

    One observation is that it worked even without using the prefix
    “.woocommerce table.shop_table”.

    Is it no longer possible to modify the woocommerce css via “additional css”? only via child theme?

    #1396408
    Luiz Guilherme

    Seizing the opportunity.
    What plugin do you use to provide this forum platform?

    I am planning to start a discussion forum, and I really liked its interface.

    #1396810
    David
    Staff
    Customer Support

    Try adding the CSS to the very top of the code in Additional CSS.

    The forum is built on https://bbpress.org

    #1418272
    Luiz Guilherme

    Hello David.

    Sorry for the delay,

    This Work:

    Try adding the CSS to the very top of the code in Additional CSS.

    The mistake was here!

    There was a conditional css at the end of my code missing a key lock.

    This Code was only executed when the screen was smaller than 345px, so when I inserted the code below it, I didn’t see the changes, because the screen was wider than this measurement.

    All I had to do was add one more key to the code below, and everything I inserted later worked.

    @media only screen and (max-width: 345px) {
    .button.single_add_to_cart_button.button.alt {
    width: 100%;
    }

    Thank you for your help.

    #1418460
    David
    Staff
    Customer Support

    Glad to hear you found the issue 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.