CSS: How to hide the price of a product list?

Hello,

I was using your online chat today, talking with a nice person named Camile. I asked to have the transcript sent to me, but I never got it, so I need your help again.

I am trying to remove something that is a default in my product listings. I have attached a screen shot for you to see. There is a blue $5.00 on each item. (I've circled this on the attachment) I would love to be able to make that disappear if possible. It's redundant in the listing because I have single cards, boxes of 4, and boxes of 6 listed as options. The $5.00 only applies to single cards. In my online chat with Camile today, she said that there is a code to delete this blue price number, but I didn't copy it while we were chatting, and it went away with the chat :-(

Do you have a code that I can use? Would I put this into the area that says "Inject Custom CSS"?

Thank you for your help!

Hi Laura_Regan, 

Thanks for reaching out to Jotform Support. Hiding the price in your product list is easy. Let me walk you through it:

1. Copy the code below:

/*Hides the price in a product list field - 18723661*/

span.form-product-details {

display: none !important;

}

/*Code ends here*/

 2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

Checkout the screenshot below to see my results:

Give it a try and let us know how it goes.

Thank you for the code! Before I do this, I’d like to know if the 3 price options (and quantity fields) will still show when you click on the box of each product. I DO want those to be seen when the box is clicked.

Thanks so much!

Hi Laura,

It will still be seen. Check the screencast below after using the codes provided:

Reach out again if you have any other questions.

Thank you, Lara and Paolo, for your help! It worked!!