Bottom hover on product listings

[kastyles]

It there a way to make this transparent instead of a color? I like the star and add to shopping bag but because I have landscape listings it covers almost my whole listing picture on mobile.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:

.woocommerce ul.products li.product figure figcaption{
background:none repeat scroll 0 0 rgba(37, 37, 37, 0.4) !important;
}

Hope that should work and let me know your feedback.

Thanks

[kastyles]

Thank you!

It did make it transparent but a gray transparent color… I like how the background around the star stays though! 🙂

http://kastyles.co/shop

[Mohammad – SUPPORT]

Hi,
Do you want white color transparent? You also want to transparent green star background ?
Thanks

[dorud]

Hi Mohammad,

I have a similar issue, looking a slightly different approach. Instead of making the black strip transparent, I want to move it below the product image. For mobile only if possible. Or remove it completely, again for mobile only.

Can u help me pls?

THX!

[Kyle – SUPPORT]

Hi

You would have to remove it, add this to your custom css:

@media only screen and (max-width: 768px) { 
.shop-actions {
  display: none;
}
}

– Kyle

[uform]

I would like to have the add to shopping bag section transparent and the wishlist star section as well.

The code you gave work fine for the desktop since the section appears with an over gesture but on mobile the section does not appear transparent. Is it possible to do?

Thanks,

[Mohammad – SUPPORT]

Hi,
Please attach a marked screenshot to indicate the issue.
Thanks
Mohammad

[uform]

I have added this code :

.woocommerce ul.products li.product figure figcaption{
background:none repeat scroll 0 0 rgba(37, 37, 37, 0.4) !important;
}

The result is partial see picture 1 for desktop version. In blue the transparent is seen but not in the red section.

The picture 2 is on mobile. N’either the add to cart section nor the whishlist section becomes transparent.

How to.

Thanks.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url with issue.
Thanks
Mohammad

[uform]

On the home page of the desktop and mobile version. I’m talking about the add to cart and star section at the bottom of each image of a product. On a desktop that section appears when the mouse goes over but on mobile the section is always there.

I would like it to be transparent all over.

Thanks.

http://dkolor.com/

[uform]

Actually the add to cart does appear transparent on mobile and desktop. So I would like to have also the star section or whishlist section to be transparent as well!

Thanks.

[David Martin – Support]

Please use this:

.yith-wcwl-add-button a, .yith-wcwl-add-to-wishlist {
    background-color: transparent!important;
}

Thanks.

[uform]

Great thanks! 🙂

[David Martin – Support]

Anytime, thanks!

– David.