Product title appear on hover?

DanielNolan · May 2022

Hello,

I have a woocommerce shop, but I would like the product name appear on hover. Is this possible?

Phil · May 2022

Hi,

With some little CSS code, this should be probably possible.

I can check that for your website, but I will need link to it.

Thanks

DanielNolan · May 2022

stedmundsadvertising.com

Phil · May 2022

Please, try the following code:

.archive .products .product .desc h4{
   display: none;
   position: absolute;
   top: 40%;
   width: 100%;
}
.archive .products .product:hover .desc h4{
   display: block;
}

Thanks

DanielNolan · May 2022

Hi Phil unfortunately this didn't work

Pablo · May 2022

On which page do you want to change? On the main shop page? Home page? Or on all of them?

thanks

DanielNolan · May 2022

Hi Pablo. I would like it to be on all of them, but mainly the homepage. :)

Phil · May 2022

Please, replace the previous CSS code with the following one:

.product .desc h4{
 display: none;
 position: absolute;
 top: 30%;
 width: 100%;
}
.product:hover .desc h4{
 display: block;
}

Thanks

Product title appear on hover?

Comments