Docs

[intveld]

Hi guys,

I’m working on my first woo commerce webshop with x. So far the result is very nice.
Unfortunately I am not happy with the hover effect on the products on my category pages.
I would prefer to only have to the name of the product + the price UNDER the product, and no hover effect at all.
Could you find a solution for me?
Many thanks in advance.
P.S. I send you the url of my development site in a hidden reply.

Ton in ‘t Veld

[intveld]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

 .woocommerce li.product .entry-wrap {
    top: calc(100% - 6.385em);
}
.woocommerce li.product .entry-wrap {
    position: relative;
}

Hope that helps.

[intveld]

Great!
A few options:
– Can I bring the name closer to the product;
– Can I make the size of the font of the name bigger and the name of the price smaller;
– Can I reduce the size of the button?
Any solution produces more questions 🙂

Thanks in advance again.
Ton

[Christopher]

Hi there,

Please add following code :

.woocommerce li.product .entry-header h3 {
    padding: 0 0 3px;
font-size: 25px;
}
.woocommerce li.product .entry-header .price>.amount, .woocommerce li.product .entry-header .price>ins>.amount {
    font-size: 17px;
    color: #fff;
}
.woocommerce li.product .entry-header .button {
    display: inline-block;
}

Hope it helps.

[intveld]

Hi Christopher,

Thanks for your help so far, but it isn’t still how I would like it. I send you two screen shots of the situation now.
– Text and price are white on a grey background. I would like it to have it without background and the text and price in black;
– Before hovering I would like to have text and price under the image of the product;
– While hovering I want to see, the product name, the price and the button ‘Opties selecteren’. Because we also have black colored products, it would be great if we had a grey background and text and price in white here.

I hope it’s not too complicated.
Ton

[Christopher]

Hi there,

Find this code and change color value to #000 :

.woocommerce li.product .entry-header .price>.amount, .woocommerce li.product .entry-header .price>ins>.amount {
    font-size: 18px;
    color: #fff;
}

Please add this :

.woocommerce li.product .entry-header h3 a {
    color: #000;
}
.woocommerce li.product .entry-wrap:before {

    background-color: transparent;
}
.woocommerce li.product .entry-wrap:hover:before {
    background-color: rgba(0,0,0,0.5);
}
.woocommerce li.product .entry-wrap:hover h3 a, .woocommerce li.product .entry-wrap:hover .entry-header .price>.amount, .woocommerce li.product .entry-wrap:hover .woocommerce .entry-header .price>ins>.amount {
    color: #fff;
}

Hope it helps.

[intveld]

Yessss. Almost what I need 🙂
The only thing I would like to see is the text and price UNDER the image, in stead of partly over the image.

The attachment shows how it looks now.

Thanks again,
Ton

[Thai]

Hi There,

Please add the following CSS:

.woocommerce li.product .entry-wrap {
    top: calc(100% - 3em);
}

Hope it helps 🙂

[intveld]

Hi Thai,

You and your colleagues must get crazy about me. But the result is still not what I would like.
I already played with -3em, but that didn’t solve it.
Have look at the attachment please.

Many thanks,
Ton

[Jade]

Hi Ton,

Please add this code in the customizer:

.woocommerce li.product {
    padding-bottom: 30px;
}

.woocommerce li.product .entry-header {
    margin-top: 20px;
}

Hope this helps.

[intveld]

Yessss. Looks great now!

But… Now I also would like to eliminate the hover effect at all. So that nothing happens when I mouse over the image. All customizing I’ve seen in older threads don’t work with me.

I will be very grateful with a solution.

Ton

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce li.product:hover .entry-wrap {
    top: calc(100% - 3em);
}

.woocommerce li.product:hover .entry-wrap:before {
    background-color: transparent;
}

Hope that helps.

[intveld]

Many thanks. I’m happy!

You are great guys.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts