Rich-text Reply

How to hide product price when hovering?

BradaMaxi 06-30-16
Accepted Solution

How to hide product price when hovering?

Dear Optimizely Community,

In my website brada-maxi.com if customers move their mouse over product images, they'll see the products' name & price (on PC). Currently I'm fiding way to encourage my customers to click on their favourite products for retargeting purpose. I would like to check if hiding the Product Price (or replacing it by Watch More) is a good idea.

I have used the code  $("body").append("<style type='text/css'>product-item__price-wrapper { display: none; }</style>"); but it didn't work. How can I hide my product prices or change it to some texts? Please help, and if you have any suggestion for my page/my test please do tell me, thank you very much.

info@brada-maxi.com
AllisonR 07-01-16
 

Re: How to hide product price when hovering?

It looks like a small typo in your code is preventing this jQuery from running. When you're defining additional CSS, class names need to be proceeded by a "." like so: 

 

$("body").append("<style type='text/css'> .product-item__price-wrapper { display: none; }</style>");

 

Does this work for you?

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely
BradaMaxi 07-02-16
 

Re: How to hide product price when hovering?

Thank you very much AllisonR Smiley Happy I don't know CSS or HTML so I just tried some codes from several forums that I found on Google.

Could you please also teach me how to replace the product price by some text & special characters such as: *right arrow*Click here to view more.

Thank you again and have a nice weekend.

 

info@brada-maxi.com

Re: How to hide product price when hovering?

Have your tried the jquery show/hide toggle? Also for special characters I would use a font icon such as http://fontawesome.io.
-Joey Herzberg