Docs

[abhi.trivium]

Hi,
I need help in implementing the woocommerce product overlay(on product hover) in a different way.

Current Issue:
When i go to my woocommerce shop of ethos, I can see a list of products that I have. And then, when i hover my mouse on each product, I see a overlay, showing me product name, amount, and add to card option.

What I want:
When I open my Shop, I want to see the “Product Name”, “Amount” and “View Product” details, below the product, in a sweet simple way. I dont need an overlay, at all. Also the View product details, should redirect me to the product page.

I have been trying to search the code, in woocommerce folder since days, with no success. It would be a great help to me, to find a solution for my problem.

[Thai]

Hi There,

Please add the following code under Customizer > Custom > Global CSS:

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

Hope it helps 🙂

[abhi.trivium]

Hey Thanks Thai,
Your code helped me a lot. However facing, 2 more issues:

1. The overlay content, is still over the image. I played with position, and top property, and was able to work out a bit, but this led to another issue.
2. How to change the color of the overlay.
3. Also hovering over the overlay content, when changing the position, causes the overlay to hide permanently.

I’m currently looking to show the overlay content below the product image. With no animation and no hover effect.

And thanks in advance!!!

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks,

Joao

[abhi.trivium]

Hi There,
As per your request, you can find my website link as follows. I just moved it from localhost, to a temp domain.

http://website.ayeshaaejaz.com/women/

Thanks in advance.

[Thai]

Hi There,

Please update the previous CSS a bit:

/* change the position */
.woocommerce li.product .entry-wrap,
.woocommerce li.product:hover .entry-wrap {
    top: calc(100% - 12em);
}
/* change the background color */
.woocommerce li.product .entry-wrap:before,
.woocommerce li.product:hover .entry-wrap:before {
    background-color: rgba(0,0,0,0.2);
}

3. Also hovering over the overlay content, when changing the position, causes the overlay to hide permanently.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[abhi.trivium]

Hi Thai,
Thanks for your help!! I was able to play with CSS to achieve what i wanted. Just in-case you want to have a look, of what i wanted. I’m attaching the screenshot.

[Christopher]

Let us know if you need further assist.

[Author]

Posts