Remove Title and Price from Products, Show Product title on Rollover

Store Design
, , , ,
1

I would like to remove the title and price from all products within the product grid on my homepage and collection pages.

Screen Shot 2022-11-18 at 10.47.17.png
Screen Shot 2022-11-18 at 10.47.17.png1392×423 197 KB

I would also like to make the product title to appear on mouse rollover. I’ve tried alot of different code but I’m unable to make it work. I’m using Broadcast Theme.

2

@Eartha

Hello,
Can You Please Share Your Store URL I Will Check and Provide a Proper Solution
Thanks

3

https://earthafinejewels.com

stowlu

4

@Eartha
Only upload product image of collection in home page and give the link to redirect it to the particular product .

5

That doesn’t allow me to show the product title on mouse rollover though?

6

Hello @Eartha ,

Please add this CSS below of online store >> Edit code >> Assets >> theme.css

@media only screen and (min-width: 767px)
.product-grid .product-information {
display: none;
position: absolute;
bottom: 10px;
width: 100%;
}
.product-item:hover .product-information {
display: block !important;
}
}

7

@Eartha
Hello,

.aos-initialized [data-aos^="fade"][data-aos^="fade"].aos-animate {
	 opacity: 0; 
	transform: translate(0);
}
.product-item.one-quarter:hover .product-information.aos-init.aos-animate {
  opacity: 1;
}

Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->theme.scss.liquid

Like This
Before Go to Product

oscprofessional_0-1669292120890.png
oscprofessional_0-1669292120890.png1660×843 141 KB

After hovering to product

oscprofessional_1-1669292276136.png
oscprofessional_1-1669292276136.png1653×759 95.5 KB

8

@Eartha Hi please add this css

this is look like this : https://prnt.sc/ToMbfiKEWhaz

.template-index .product-information.aos-init.aos-animate {
    display: none!important;
}
9

Thanks but this didn’t work

10

Try this please add this css in your base.css

.template-index .product-information {
    display: none!important;
}
11

That worked! Thank you. Are you able to remove the price? I’d only like the Product Title to show on rollover. Thanks

12

Yes @Eartha

13

Hi @Eartha please add this css

.template-index .product-information:hover {
    display: none!important;
}
14

@Eartha please remove this css for i will provide new working css

.template-index .product-information {
    display: none!important;
}
15

I’ve accepted the solution above as this works for showing the title and price on rollover. I’m just looking to remove the price now so the title is the only thing that shows on rollover

16

Yes @Eartha Please add this :

.template-index span.new-price:hover {
    display: none!important;
}
17

unfortunately that didnt work

18 
.template-index span.new-price { display: none!important; }
19

This works well on the homepage but it has removed the text completely on the collection pages

20

you added this class .template-index ??