Some of our customers say "we can't see price and add to cart icon" on product layout page (homepage and shop page). Because they should touch (mobile) or mouseover (desktop) to product image and trigger.
It's not error or problem, It's just UX issue. I just want to make hover to fixed for all products when page loaded and they don't need to touch or mouseover (without white background).
I checked js files but I can't find which function trigger that hover.
Hello Art, thank you for your help but you told about for default layout, I just want that on minimal layout like attached. How can I show same thing (always visible shopping cart and amount) on minimal layout?
Yes because you have not stated that you wanted the layout for "minimal" in the first reply, and for that I requested you to change the layout to minimal so I can give you the CSS for it.
I said "some of our customers say "we can't see price and add to cart icon" on product layout", so we already see price on default layout and default layout doesn't have add to cart icon, please check. By the way I mentioned about minimal layout on second reply. I hate CSS coding but I did, I wrote below, maybe it can help someone. Thank you for your kindly support.
Hello there!
Some of our customers say "we can't see price and add to cart icon" on product layout page (homepage and shop page). Because they should touch (mobile) or mouseover (desktop) to product image and trigger.
It's not error or problem, It's just UX issue. I just want to make hover to fixed for all products when page loaded and they don't need to touch or mouseover (without white background).
I checked js files but I can't find which function trigger that hover.
How can I do manually trigger to hover?
Thank you!
Hi Burak,
Can you try adding this CSS to Custom CSS:
.woocommerce .products .product.catalog-layout-default .item-info .add-to-cart-and-product-categories.show-add-to-cart .add_to_cart_button { opacity: 1; position: relative; } .woocommerce .products .product.catalog-layout-default:hover .item-info .add-to-cart-and-product-categories.show-add-to-cart .product-terms, .woocommerce .products .product.catalog-layout-default.hover .item-info .add-to-cart-and-product-categories.show-add-to-cart .product-terms { visibility: visible; opacity: 1; }It will make the "add to cart" button always visible.
Best regards,
Laborator Team
Hello Art, thank you for your help but you told about for default layout, I just want that on minimal layout like attached. How can I show same thing (always visible shopping cart and amount) on minimal layout?
Hi there,
Can you please switch to the "minimal" mode so I can give you thee CSS for it instantly.
Best regards,
Laborator Team
Hi Art, I think you are wrong. Because minimal's css classes are include
but you said
So It's not effected to minimal layout. It just change visibility "add to cart" text on "default layout".
Yes because you have not stated that you wanted the layout for "minimal" in the first reply, and for that I requested you to change the layout to minimal so I can give you the CSS for it.
Best regards,
Laborator Team
Hello Art!
I said "some of our customers say "we can't see price and add to cart icon" on product layout", so we already see price on default layout and default layout doesn't have add to cart icon, please check. By the way I mentioned about minimal layout on second reply. I hate CSS coding but I did, I wrote below, maybe it can help someone. Thank you for your kindly support.
.woocommerce .products .product.catalog-layout-transparent-bg:hover .item-info .product-bottom-details {opacity: 1;
transform: translate(0,0);
transition: all .4s .2s cubic-bezier(.455,.03,.515,.955);
} .woocommerce .products .product.catalog-layout-transparent-bg:hover .product-internal-info {
background-color: transparent !important
} .woocommerce .products .product.catalog-layout-full-bg .item-info .product-bottom-details, .woocommerce .products .product.catalog-layout-transparent-bg .item-info .product-bottom-details {
position: absolute;
display: flex;
align-items: flex-end;
bottom: 30px;
left: 40px;
right: 40px;
flex-direction: row;
opacity: 1;
transform: translate(0,15px);
transition: all .15s cubic-bezier(.25,.46,.45,.94);
}
Hi there,
Happy to hear you managed to customize the minimal layout, sorry for the misunderstandings. Is your question resolved now?
Also thank you for sharing the code so users can find it helpful if anyone needs the same layout.
Best regards,
Laborator Team
Hello Art, yes you can close the ticket. Thank you for all. I love Kalium!
Happy to hear that Burak, have a great day
Best regards,
Laborator Team