Add a Sold out Text on the Product Field

  • ascapub
    Asked 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

  • Elton Support Team Lead
    Replied 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: 

    Add a Sold out Text on the Product Field Image 1 Screenshot 20

    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!