woocommerce product hover

  • Resolved honour

    (@honour)


    6 years, 11 months ago

    I am trying to use the woocommerce plugin for just product display and description. Now i wanted to have an hover background colour change for product image and read more button. I used css customize like .woocommerce .product :hover {background-color: black; color: white; However this is changing all the background in product page like the inner pages background as well. can i get help to change the background of the product and the read more background only instead of changing the background of inner pages and its contents.

Viewing 3 replies - 1 through 3 (of 3 total)
  • madeincosmos

    (@madeincosmos)

    Automattic Happiness Engineer

    6 years, 11 months ago

    Hi @honour,

    I understand you’re looking for a way to change product background on hover on shop & category pages, but leave it unchanged on the product page itself? In that case we’ll need an additional qualifier that we’re looking for a product that is a part of a bigger list. By default WooCommerce uses ul.products for that:

    
.woocommerce ul.products .product :hover { 
   background-color: black; color: white; 
}

    If this doesn’t help, please send a link to one of your category pages – it’s possible that some themes may modify default WooCommerce classes.

    Cheers!

    Thread Starter honour

    (@honour)

    6 years, 11 months ago

    Great! Thanks a lot! Works like a charm!

    madeincosmos

    (@madeincosmos)

    Automattic Happiness Engineer

    6 years, 11 months ago

    Awesome, glad to hear I could help 🙂

    I’m closing this thread for now. If there’s anything else we can help you with, feel free to start a new one at any time.

    Have an amazing day!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘woocommerce product hover’ is closed to new replies.