Developer Docs
Out of Stock Display for WooCommerce
Build Your Own Custom Experiences
How to configure Out of Stock Display for WooCommerce
Getting started
Out of Stock Display for WooCommerce is designed to help you land the sale of those shoppers who land on pages that are out of stock. Instead of increasing the chances of shoppers leaving the moment they discover the product they want is out of stock, this plugin will present to them a selection of similar or better products, increasing the chances of a sale
This guide is for the pro version, however, it will cover the free version as well.
- Download the zip file from your account area
- Go to add new plugin and select upload at the top of the screen
- Select the zip file you just downloaded and click upload
- Once prompted click activate
- Enter the licence key and you can go to the next step
Hover over Woocommerce and you will see a menu item for our plugin called Out of Stock Display for Woocommerce. Clicking it will take you to the following screen.
Setting up the plugin
Click enable to enable the settings. the enable switch will allow you to turn the plugin settings on and off without needing to disable the plugin in the plugins menu.
Below the enable button you’ll see two switches. One for related products and one for upsells. You can only use one ar a time. When you enable one it will disable the other.
Use this setting with caution. If you have not set up upsells for your products nothing will appear on the frontend. In this situation, it’s advisable to enable related products until you can set the upsells. SO which is better?
Related products take a lot of the work out of manually setting up each upsell, especially if you have hundreds or thousands of products. But they aren’t as powerful as upsells.
Upsells allow you to make suggestions to the buyer to try and get a larger sale. For example. Say they have a 32 inch TV in their cart but the 40 inch TV is only $50 more and also brings you a larger profit. It will benefit you to sell the 40 inch TV to the buyer instead of the 32 inch. Likewise, a customer may have a 40 inch TV but you might have a better quality TV with a larger margin but smaller screen size. You might want to suggest the buyer buy that TV instead.
Overall, upsells will deliver better results, but related products are easier to use.
The next section will define how the products are displayed on your website.
1. Location
You have four positions available to place your products. These have been set as they generally offer the best user experience and are normally above the fold on page load.
- Above content: This will load the products above the title and gallery. It will be the first and most prominent field on the screen.
- Below the title: This option will keep the gallery image on the screen and instead display the products in the product summary position just below the product title.
- Below gallery/short description: Above the fold will load as usual, but your products will display across the screen between the description and gallery section.
- Modal: This offers the best overall display but is more intrusive than others. It will load a modal on the screen that will display your products front and centre while hiding all other content. Users can close the modal by clicking on the X.
The number of columns and number of products: This is pretty self-explanatory. Simply decide how many products you want to appear on the page. It is worth pointing out that 6 rows in the summary section will look fairly awful, and 12 products in the modal may not look the best. My recommendation is less is more.
Order by: In this section you can determine the order that the products are displayed. Title, ID, random, date, popularity and rating. Default will be title.
The final section is all about personalisation.
1. Titles: If you want to convey a message that the product is out of stock you can set two messages here. The first is the main title and the second is a subheading. Each one can use a custom Google font, color, font size, font weight (how bold the font is) and where you want it positioned horizontally (left, center, right). If you decide not to use a heading simply leave the field empty and nothing will display.
2. Border: If you want to set a border around your products you can set this here. The options are border width, border color and border style (solid, dotted, dashed, grooved, double etc) and border radius (rounded corners). If you leave any field blank it will return default settings.
3. Background color: If you want to have a background color simply set it here.
Request a Feature or Open a Ticket
Have an idea for this plugin? Get in touch and let us know