Showing full price and discounted price on order form

HI there,

I am creating a product order form and I would like to have the usual price in red with a line through it and the disocunted price being the main price on the form under the product. How would I go about doing this?

Like this:

It isn't one set discount, so I would need to be able to change these manually.

Thanks,

Simon

Hi Simon,

Thanks for reaching out to Jotform Support. We can put a line through on the added discounted price by Injecting CSS Codes into your form. Let me show you how:

1. First, copy this code:

/*Strike out the discounted price*/

span.form-product-item .form-product-container .form-product-details > b >span[data-wrapper-react=true] {

    margin-left: 65px !important;

}



span#input_43_1001_price:before,

span#input_43_1006_price:before,

span#input_43_1007_price:before {

    color: red;

    text-decoration: line-through;

    left: -10px;

    margin-left: 5px;

    position: absolute;

}



span#input_43_1001_price:before {

    content: "$ 22 AUD";

}



span#input_43_1006_price:before {

    content: "$ 23 AUD";

}



span#input_43_1007_price:before {

    content: "$ 24 AUD";

}

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

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the result:

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

Oh that is perfect thank you. Just one more question... I noticed that you have out the prices in for each product, I would assume that I just copy that code for each additional product and change the 'input_43_1001' to the new product. How do I find out which product is which and the number I put in here?

span#input_43_1001_price:before {

   content: "$ 22 AUD";

}

Thanks,

Simon

Two more things please...

1. As you can see they overlap, I changed the margin number at the top of the CSS to 100px, is this correct, as it looks ok

margin-left: 100px !important

1. If I wanted to remove the three-letter country currency code (AUD), how would I do this? I have googled this and it says there should be a 'none' option which I can not find.

Thanks,

Simon

Hi Simon,

Yes, increasing the left margin will add more space to the left side of the element. I checked your form and it looks like the prices have been moved to the left side:

Now coming back to removing the AUD currency sign, you can insert this CSS code:

/*remove the currency sign*/

span.currency_abr {

  display: none !important;

}

/*Ends here*/

Give it a try and let us know if you have any other questions.

Thank you for this. It kind a half works, it removed it from the original price but not the discounted price:

I originally asked for some CSS to make the original price before the discount stays in place all the time, be red, and have a line through, not sure if this affects that as well. But thought it was worth mentioning.

If this can be fixed, great, if not, that is ok, but I do have a more important question as well. The CSS that was given to make sure the original price always stays in place (and is red and has a strikethrough) is now only working on the first product:

I can see the CSS has codes for the products but I can't figure out where they have come from or how to reference the others, where would I find this

I asume it is #input_43_1001_ that is teh first one, but I have tried going up in consectutive numbers and this does notr work.

Thanks,

Simon

Hi Simon,

To put the original price on the left of the discounted price, remove the previous CSS code I shared and replace it with the below code:

/*Strike out the discounted price*/

span#input_43_1001_price:after,

span#input_43_1004_price:after,

span#input_43_1005_price:after,

span#input_43_1010_price:after,

span#input_43_1011_price:after,

span#input_43_1006_price:after,

span#input_43_1008_price:after {

    color: red;

    text-decoration: line-through;

    left: -10px;

    margin-left: 110px;

    position: absolute;

}



span#input_43_1001_price:after {

    content: "$ 165.00";

}



span#input_43_1004_price:after {

    content: "$ 166.00";

}



span#input_43_1005_price:after {

    content: "$ 167.00";

}



span#input_43_1010_price:after {

    content: "$ 168.00";

}



span#input_43_1011_price:after {

    content: "$ 169.00";

}



span#input_43_1006_price:after {

    content: "$ 170.00";

}



span#input_43_1008_price:after {

    content: "$ 171.00";

}

For other products, you can get the codes using the Chrome developer tool:

Here's what the result will look like:

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

Oh sorry no I didn't want them on the left they were fine where they were. Sorry, I must have confused you with my last message I used the word before meaning in my previous message, not to change the order.

I want to know the unput numbers but I can now see that you have given them so that is great. Where would I find them for future reference?

So can I please have the original price (in red with the strikethrough) first again?

I would also like to remove AUD from both the original and the discounted price please.

Thank you,

Simon

Hi Simon,

As mentioned in the previous response, you will need to use the Chrome developer tools to get the product ID (Input numbers) with a basic understanding of the CSS code, or you can always reach out to us, and we will love to help. Since you are looking to remove the AUD from both prices and place the discounted price first, you can use the below CSS code:

/*Strike out the discounted price*/

span.form-product-item .form-product-container .form-product-details > b >span[data-wrapper-react=true] {

    margin-left: 65px !important;

}



span.currency_abr {

    display: none !important;

}



span#input_43_1001_price:before,

span#input_43_1004_price:before,

span#input_43_1005_price:before,

span#input_43_1010_price:before,

span#input_43_1011_price:before,

span#input_43_1006_price:before,

span#input_43_1008_price:before {

    color: red;

    text-decoration: line-through;

    left: -10px;

    position: absolute;

}



span#input_43_1001_price:before {

    content: "$165.00";

}



span#input_43_1004_price:before {

    content: "$165.00";

}



span#input_43_1005_price:before {

    content: "$165.00";

}



span#input_43_1010_price:before {

    content: "$165.00";

}



span#input_43_1011_price:before {

    content: "$165.00";

}



span#input_43_1006_price:before {

    content: "$165.00";

}



span#input_43_1008_price:before {

    content: "$165.00";

}

Here's what the result will look like:

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

Thank you. It is looking great :)