Learn how to add a simple “back in stock” subscribe form on out of stock WooCommerce products.
Easily notify customers when your out-of-stock products become available. You may have been trying to find a solid and reliable back-in-stock plugin for your WooCommerce store.
I recently have been using the Back in Stock Notifier plugin. The best part? It’s free and does a great job!
Custom CSS
Below is some simple CSS I used to add my own site’s colors to the subscribe form.
.cwginstock-subscribe-form .panel-primary>.panel-heading {
background-color: #2e9a9c;
border-color: #2e9a9c;
}
.cwginstock-subscribe-form .panel-primary {
border-color: #2e9a9c;
}How to customize the color of the Subscribe Now button?
Add the snippet below to the bottom of your CSS file. Change the background-color value to match your branding.
.cwgstock_button {
background-color: #2e9a9c !important;
}
Hello Simon.
Thank you for the tips. Is there a way to hide the first section with the “Email when available” and leave only the name, email, button fields?
Thanks for this! I really liked this plugin until I found out that an easy way to change the styles was NOT included (you had to purchase an additional plugin). I really appreciate that you provided the necessary CSS to add in order to have this form match our site styles! Great post and video!
Hi. Nice video, thanks for the help changing the css.
I need to change the text color. How can i do it?
Thanks
Hi Simon,
The Plugin works well for us, only the areas where you have to leave your data and the button are narrow gray strips. Not a nice fill area and button like you have. The font at the top is also normal and not bold.
Hello, I’m trying to change the background of the in stock notifier and the button to #DC3232 unfortunately its not working, can you help?
Did you try clearing your cache or CDN after making these changes to your CSS file? For example, try opening up your site in a private or incognito window to see the change.
If the color still has not changed try adding “!important” to the ending. Reference the code snippet above.
How do you create a space between the button and text above it on the product page?
Try adding margin-top to the button class. For example, like this:
.cwgstock_button {
background-color: #0693e3 !important;
margin-top: 25px;
}
Hi Simon, how do we customize the color of the Subscribe Now button?
Try adding CSS like this:
.cwgstock_button {
background-color: #0693e3 !important;
}
Do you have custom css for the subscribe button?
Try adding CSS like this:
.cwgstock_button {
background-color: #0693e3 !important;
}
Hi Simon,
Thank you for the explanation. Unfortunately the css code to adjust the color doesn’t work for me 🙁
I copied and pasted your code. What could be the cause of this?
I’m sorry, it works after I clear the cache 🙂
great to hear!