-
ascapubAsked on February 5, 2019 at 9:06 AM
Hello, I'd like to show that one of my product options is sold out. I see that I can disable it, but I want people to see that we sold out. What's the best way to do that?
Thanks
Page URL: https://form.jotform.com/90035380937155 -
Elton Support Team LeadReplied on February 5, 2019 at 10:33 AM
The product tool doesn't have an inventory system yet so the only way to do that is to manually edit the product label and insert the SOLD OUT text or you can disable the product to hide it.
If you want to sell products with quantity/inventory feature, you can use the Quantity Gift Registry Widget and configure the calculation using the form calculation widget.
https://widgets.jotform.com/widget/quantity_gift_registry
To set the price and get the total amount, you have to use the form calculation widget.
Guide: http://www.jotform.com/help/259-How-to-perform-calculation-in-the-form
After that, you can pass the total calculation to the payment field.
Guide: http://www.jotform.com/help/275-How-to-pass-a-calculation-to-a-payment-field
----
In case you want to stay using the product too,l the following CSS codes might at least give you a better format for the SOLD OUT text and make the product unclickable.
.form-product-item:nth-child(1) {
pointer-events: none;
width: 100%;
background: #ececec;
color: #cfcfcf !important;
}
.form-product-item:nth-child(1):after {
content: "SOLD OUT";
font-weight:bold;
color:red !important;
text-align:center;
width:100%;
display:block;
position:absolute;
top:20px;
}
Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Result:
So the code above disables only the first product item. If you want to disable the 2nd product, 3rd product and so on, you just have to duplicate the selector and increment the number that is found on the CSS codes.
Example:
.form-product-item:nth-child(1),
.form-product-item:nth-child(2),
.form-product-item:nth-child(3){...
.form-product-item:nth-child(1):after,
.form-product-item:nth-child(2):after,
.form-product-item:nth-child(3):after{...
Hope this helps!