WooCommerce product category issue on Firefox

[Minna]

I have this css in my theme options, to show the Woocommerce product category short code as I wish. However, on hover in Firefox the price, name and button of the product disappear completely and I don’t know how to fix it.

Any help would be much appreciated.

/kategorian tuotteiden hinta ja buttoni tuotteen alla eikä päällä/

[class*=woocommerce] li.product .entry-wrap {
position: relative;
top: calc(100% - 4em);
left: 0;
right: 0;
bottom: auto;
padding: 0;
font-size: 14px;
-webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}

[ruenel]

Hello Minna,

Thanks for writing in! You are having this issue because the modified CSS is missing something in the code. Please have it updated and use this:

[class*=woocommerce] li.product .entry-wrap {
    position: relative;
    top: calc(100% - 4em);
    left: 0;
    right: 0;
    bottom: auto;
    padding: 0;
    font-size: 14px;
    -webkit-transition: all 0.615s cubic-bezier(0.19,1,0.22,1);
    transition: all 0.615s cubic-bezier(0.19,1,0.22,1);
}

[class*=woocommerce] li.product:hover .entry-wrap {
    top: calc(100% - 4em);
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

kindly let us know how it goes.

[Minna]

Thank you so much! Worked like magic Happy holidays!

[tristup]

Hi Minna,

Glad that we are able to help you.

Thanks