|
In a previous article (located here) we detailed a way to have your product listings display their respective inventory quantities.
The methods detailed in that article apply to your base product listings. When dealing with products that contain advanced options however, the inventory number displayed with [stock] will show a combined level of inventory for the product as a whole rather than each option's inventory.
In other words, if your product comes in 3 colors (red, blue, and white) and - with advanced options enabled - you specify 3 on hand for each color, the inventory display will show a combined total of 9 available. (3 red, 3 blue and 3 white.)
Rather than displaying a combined total, you may wish to display the quantity on hand for each specific option as they are selected.
To enable this, you will need to edit the HTML coding on the product's listing template. The following steps will outline this process.
Editing the Template
Using the left hand navigation menu:
- Go to Settings >Design >Themes & Styles
- Go to Edit Template, and click on Open Template Editor
This will take you to the template editor for your store's specific design theme and will show you a list of your theme's HTML templates. Within this list, you will see your theme's frame.html file as well as any other unique templates that the site is using.
- If you see a listing_x.html file in this list, look to the far right of it and click on its "Action >Edit" button to open it up.
On the other hand, if you don't have any listing_x.html templates already listed for your theme, click on the drop-down menu located along the top and select the "templates/common" folder. This will display a listing of all available templates.
Tip
If you are using a CORE Template, the common folder will be named "templates/common-core". If you are using an HTML5 theme, the common folder will be labeled "templates/common-html5"
- Within the common folder, locate the listing_0.html template and click its "Action >Edit" button
You should now see the template's HTML coding.
If you perform a CTRL-F search for the word "availability," your browser should take you to the "Start: product_availability" block of code.
Within this block of code, you will see a bit of coding that reads:
<div id="availability">[availability_itemprop]</div>
Leave this line as it is, but add the following code to the end of it:
<span style="display: inline;" id="product_inventory">[stock]</span>
After adding the new line of code, your HTML will look like this:
<div id="availability">[availability_itemprop]</div>
<span style="display: inline;" id="product_inventory">[stock]</span>
Click Save at the top right of the screen and your product should now display Inventory Stock for the product's base inventory next to the In stock message. Furthermore, when an advanced option is selected, the inventory number will change to reflect how many of the product with that option the store has.
Please Note
The information in this article is provided solely as a courtesy and to offer basic instructions on making very simple changes to your store's HTML templates.
Please understand that - regardless of how simple the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don’t work as you wanted.
If you are uncomfortable with making changes to your site’s HTML, please contact our Support Team for information on our Webmaster services. For a fee, one of our Webmasters can help make this adjustment for you.
Thank you for your understanding
|