CSS product headers background color change on product archive page

Support
#1

What is the CSS ID or class or name that I should use to change the dark background section as seen in the screen shot to a different color and opacity? There might be some other elements that I want to change like that which only show upon hover. How can I find those names/identifiers/classes to add custom css to the customizer? Is there an easy way using the inspect element tool on chrome? Thanks :slight_smile: https://wishcandle.com/shop/

#2

Hello @adubs777,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS to change background color:

.woocommerce li.product:hover .entry-wrap:before, 
.woocommerce-page li.product:hover .entry-wrap:before{
    background-color: #fff  !important;
    opacity: .7;
}

.woocommerce li.product:hover .entry-header h3, .woocommerce-page li.product:hover .entry-header h3,
.woocommerce li.product:hover .entry-header h3 a, .woocommerce-page li.product:hover .entry-header h3 a,
.woocommerce-page li.product:hover .entry-header .price>.amount{
    color: #000 !important;    
}

To find the name of classes you can use Google Chrome/Firefox dev tools. I am sharing few links that you can take a look at get started.


Thanks.

#3

thank you for this info. I’ve been using inspector just as shown in the video but still for this particular aspect of the hover over the products on archive page or product header there is no css code that shows up when .hov selection is checked. So that is why I asked for this one. maybe I’m still overlooking something in there. Either way, thanks :slight_smile:

#4

Hi There,

Glad that helps, maybe you’re looking in the wrong element, please see my screenshot.


Have a nice weekend,
Cheers!

#5

hmmm OK:) thanks for showing that with the screen shot … aha… I poked around some more and found how to see that now!! Thank you I do appreciate it.