.product-cat-info background color

[mimawebseo]

Hi,
I am adding this line to my style.css of the child theme
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #FFFFFF;
}

in order to replace
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #E4E4E4;
}

so I want to change the background color (white istead of grey) but this is now working.. still have color #E4E4E4 at the background of .product-cat-info

where do I have to change this reference?

thank you.

[Kyle – SUPPORT]

Hi

Sorry which theme?

– Kyle

[mimawebseo]

Hi Kyle… Dante

[Kyle – SUPPORT]

It uses the section divide color for the background color, I’m guessing you wont want to change the section divide color so instead you can add this custom css:

.woocommerce ul.products li.product-category .product-cat-info:before {
  border-bottom-color: #FFFFFF;
}

– Kyle

[mimawebseo]

Hi Kyle,
Thanks but this doesn’t do what I need,

Actually, what I want is to see categories like products. Just the picture and the text below with no decoration at all.

PS
Can this thread be moved to Themes Support -> Dante? (it was my mistake)

[Kyle – SUPPORT]

Hi

Unfortunately it’s not possible to change the layout and decoration of the categories to look like products without modifying a lot of css, and it’s not within the scope of our support to be able to provide that functionality as it is more work than a small customisation. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need that functionality, potentially from one of the below resources:

https://codeable.io

Home

http://www.microlancer.com

Hope that helps.

– Kyle

[mimawebseo]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok great, this should do the trick:

.woocommerce ul.products li.product-category .product-cat-info {
  background: none;
}

– Kyle

[mimawebseo]

Thanks Kyle.
Finally it worked and get rid of the grey background, but I needed to add it to the Custom CSS/JS section. Don’t know why.

Just adding your code to my style.css on my child theme wasn’t enough..
(I already had this on my style.css in the child theme)

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
display: block;
height: auto;
margin: 0 0 8px;
transition: all 0.2s ease-in-out 0s;
width: 100%;
}
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #FFFFFF;
bottom: -35px;
padding: 10px;
position: absolute;
text-align: left;
}
.woocommerce ul.products li.product a:hover img, .woocommerce-page ul.products li.product a:hover img {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
}
.woocommerce ul.products li.product-category .product-cat-info .count {
display: none;
}
.woocommerce ul.products li.product-category .product-cat-info:before {
display:none;
border-bottom-color: #FFFFFF;
}

Thank you very much for your help!

[Kyle – SUPPORT]

It’s because you already have this:

.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #FFFFFF;
bottom: -35px;
padding: 10px;
position: absolute;
text-align: left;
}

Glad it’s working now

– Kyle