CSS Customization: Change 'Out of Stock' Text to 'Coming Soon'

  • L
    Lezlie Brabson
    Asked on May 20, 2026 at 10:39 PM

    css code to change out of stock to coming soon

  • Profile Image
    Nikola JotForm Support
    Replied on May 21, 2026 at 1:36 AM

    Hi Lezlie,

    Thanks for reaching out to Jotform Support. You can change out of stock to coming soon text by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    .sold-out-label.payment-badge {
      visibility: hidden; 
    }
    .sold-out-label.payment-badge::after {
      content: "Shift All Filled";
      visibility: visible;
      color: white;
      position: absolute;
      background-color: #4166E0;
      bottom: 10px;
      width: 100px;
      right:30px;
    }

    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.

    
CSS Customization: Change Out of Stock Text to Coming Soon
Image-1

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

Your Reply