Custom CSS does not work in woocommerce

  • Resolved delaitec

    (@delaitec)


    4 years, 6 months ago

    I’m not able to change colors or dimensions in the cart via css.

    I test the codes in the browser in the inspect mode and they work, when I put the css in the customization area of woocommerce nothing happens.

    It is not cache.

    Dont Work

    /* Lista de ítens */
/* Cor fundo */
.woocommerce table.shop_table_responsive tr:nth-child(2n) td, 
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
	background-color: white;
}

    Dont Work

    /* Barra superior */
th.product-remove, .cart thead {
	background-color:lightgray!important;
}
/* Bot?o remover produto */
.product-remove{
	background-color:#e8e8e8!important;
}
th.product-remove {
    width: 10px;
}

    Dont work

    /* Remover Imagem dos produtos */
.cart .product-thumbnail{
	display:none!important;
}

    And countless other codes, none affect the woocommerce cart.

    • This topic was modified 4 years, 6 months ago by delaitec.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support con

    (@conschneider)

    Engineer

    Hi there,

    I test the codes in the browser in the inspect mode and they work, when I put the css in the customization area of woocommerce nothing happens.

    It is not cache.

    Do you see your CSS being loaded when you have set it?
    Screenshot: https://d.pr/i/iIEv4F

    Vê o CSS a ser carregado depois de o ter adicionado?

    Kind regards,

    Thread Starter delaitec

    (@delaitec)

    Thanks for the feedback.

    I don’t see the loaded code.

    I was inserting the css in the “additional css” area of ??wordpress.
    So I created a child theme and inserted the css into the style.css file of the child theme and it worked.

    is there any limitation so that the css inserted in “additional css” does not affect the cart?

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Glad to hear you were able to get it working with the style.css file of your child theme.

    Regarding the “Additional CSS” section of the Customizer, WooCommerce site owners are generally able to use that for adding CSS without any issues. I tried adding your snippets in my customizer and it worked:

    additional CSS
    Link to image: https://d.pr/i/osNpfv

    The only times I’ve seen it not work was when there was a separate Custom CSS section being added somewhere else (either in a different tab of the Customizer or different settings page) by the theme itself or another plugin.

    Since you got it working already, perhaps it is not so important. But if you would like to narrow down what was causing the Additional CSS tab not to work, I would recommend a conflict test to see what was breaking it:
    https://docs.woocommerce.com/document/how-to-test-for-conflicts/

    I hope that helps!

    Thread Starter delaitec

    (@delaitec)

    That’s weird. What theme are you using?

    I use generatepress, with the premium addon.

    In fact I like to use the customizer, I can see the changes in real time, using the style.css of the child theme, I have to save and reload the page in another tab to see the changes.

    I would love to find out what is causing this.

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    I’m using the default Storefront theme. Temporarily switching to Storefront and checking would be a good first step in narrowing it down.

    If that doesn’t do it, then I’d recommend also deactivating plugins aside from WooCommerce to see if that lets you edit in the Customizer.

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this thread as resolved. Hopefully that conflict testing helped you narrow down what was causing the issue. If you have any further questions, please start a new thread.

    Have a wonderful day!

    Thread Starter delaitec

    (@delaitec)

    Hello Kelly.

    Sorry for the delay, I think I owe an answer to anyone who has the same problem.

    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.

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there @delaitec,

    Thank you very much for getting back to us here to let us know what was causing the issue, and how you resolved it! Glad to know everything is working now! : )

    Take care, and have a wonderful day!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Custom CSS does not work in woocommerce’ is closed to new replies.