Help hiding price and product name unless someone scrolls their mouse over it - Fashionopolism Theme

Store Design
, ,
1

Hello,

I need assistance with a client website. They would like to hide their prices and product information on the product page. This is their current page: https://arthurgroom.com/collections/jewelry

They would like their page to be similar to: https://www.anitako.com/collections/earrings

Any help would be greatly appreciated.

2

Hi @35

To make exactly life the reference it’ll need to alter the code but I’m sharing a possible as what I can inspect from frontend.

Paste the below CSS in stylesheet.css at bottom

div#main-collection-product-grid .item.product-index .product-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
div#main-collection-product-grid .item.product-index:hover .product-info {
	opacity: 1;
}

Thanks

Sheesh B

3

Thank you for the assistance!

This worked perfectly!