How can you display only In-Stock Matrix Varients?

Hi,
Just wondering if anyone knew how to only display the In-Stock matrix variants on the product pages? There are a lot of sizes offered for a particular type of boot and only one in stock. I don't want the customer to have to click through all of the sizes to see which single boot may be in stock. Any insight would be great!
Here is the place to add a conditional statement I believe:

31 comments
By default the theme editor is not aware of the Variants inventory/availability, only the Default Variant.
Hope this helps!
I was massively surprised when i realised it wasn't standard functionality, Its a very very standard feature of most e-commerce platforms...
Without it - it creates a pretty dismal user experience, having to click through the variants is infuriating for me - to a customer, its a lost sale & missed opportunity - plain and simple.
C'mon guys, lets get it built!
From where I sit, it seems that you are investing more of your software development efforts/bandwidth into connecting a tangled web of nickel and diming add-on's in order to shore up gaps in what should be baked into your core platform.
A couple of examples of lacking core functionality that I care about:
- This issue. Not being able to filter out stock and sizes/variants that you don't have....but there's an app for that
- Not having the ability to have a common gift card between retail and ecom... but there's an app for that
- Not providing the ability to control when to charge the customers credit card for an order. We prefer to charge when the order ships, which allows us to make adjustments when there are inventory issues. Don't think there's an app for that....yet
- Customer databases are not harmonized. We have certain clients/club members that are entitled to a discount. That info does not flow to ecom.
Add-ons are fine when connecting to other, well established platforms, like Quickbooks to expand overall functionality -- but not for things that should be basic, core, functionality.
Having spent a previous career in the aviation software development business, I understand the challenges you are dealing with in bringing two separate systems (SEO Shop and Lightspeed) together to present an Omnichannel offering to your customers. But filling in the core functionality gaps with these add-ons is a short term solution that is taking the Omni out of Omnichannel. As your platform evolves -- and these add-on pieces evolve in their own way - the time you spend keeping a fragile web of separate software applications communicating with each other will continue to grow and consume development bandwidth that should be focused on developing your system, not patching it. This is a long-term recipe for disaster.
or let's say i want to grey them out should that be easier to do or am i totally wrong here
As mentioned by @justinbernardus you can loop through the variants and check the stock.
For example:
You guys need to work on some customer facing improvements to matrix based products. I'm selling primarily shoes and clothing and every other major ecom platform is years ahead in terms of ease of use / visibility for customers. Clicking through individual sizes of a product just to see what's available is time consuming and confusing to customers. If we're not able to hide specific out of stock sizes, there should at least be the option to display an "out of stock" message in the size drop down.
Attached another example that's super customer friendly; hovering over the product displays in stock sizes.
This along with not being able to search / filter products by size are by far the two most frequently received pieces of feedback we get.
Hi @Joey
i tried placing the following code in place of {{ product | html_product_configure | raw }} :
as you will see the pages with a oos matrix still shows?
https://www.waterstreetgallery.co.uk/en/selborne-pottery-mug.html
<ul class="buttons-or-list">
{% for variant inproduct.variants %}
<li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
<a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
{{ variant.title | split(':')|last }}
</a>
</li>
{% endfor %}
</ul>
Thanks
Abbas
Hi @Abbas I don't understand what you mean with,
"the pages with a oos matrix still shows"
EDIT: Oh, I guess that would be Out Of Stock. The code you have added does not hide the variants, it just makes them blurry.
You could hide them with CSS,
display: none
on the class for out of stock variants.Hi @Joey
I think I got confused because of the title of this discussion.
Sorted it!
.product-variant_block-variants.product-variant_notAvailable {
display: none
}
Thanks
Hi again @Joey
I just wondered, can you think of a clever way to not include the Matrix groups? so for example on this page - https://www.waterstreetgallery.co.uk/en/aubergine.html?id=145011056
Instead of the product reading - "Interior: Lined","Size and number of Pages: 180 X 230 mm (Ultra), 240p.","Closure and cover type: Clasp"
it would just be
Lined, 180 X 230 mm (Ultra), 240p, Clasp
Thanks in advance
This might be possible but you will need to work clever with the replace filter:
https://ecom-support.lightspeedhq.com/hc/en-us/articles/115000277614-3-c-Rain-filters
@Joey Does hiding the non-stock items using CSS work in eCom Omni-Channel / Voila Theme as well? Can't seem to get it to stick. I imagine the class name for non-stocked variants might be different?
The method mentioned above replaces the original variant picker (regardless of Omni) and allows you to create your own.
If you want to modify the Voila theme you will need to find out if it shows a class when it is out of stock and then target that class.
Feel free to post the code you are working on or link to the specific page so we can have a look.
We've had some custom work done by @Shopmonkey - They've done an amazing job. All matrices do show the out of stock items, but now they can't be clicked and are grey. Very good for our lingerie section with sizes and toys with different colours.
One downside: Their solution didn't work for items that have 2 variants. Like Colour AND Size for one productpage.
It cost a small amount of money to have this implemented by them, but it works like a charm
Years and years later on this platform and no built in solution. Don't worry they have yet another subscription plan to leach money off of you. Really gross.
Hi Everyone, and thanks for all the comments on this topic!
While there is no user indication/ clue in our basic variant display available yet in our platform, it is something that could be implemented, as has been mentioned, with customization.
In order to help with this, the following sample code could be utilized to disable out-of-stock variants on the product page.
Currently, the code has been designed for the "Conform Plus" theme, for single and double-attribute matrices, however it could be modified to work with other themes.
Implementation:
The end result should look like this for Double Attribute Matrices:
And like this for single Attribute matrices:
The Code:
Thanks a lot milesbd, Could you send me a customization for Theme Invision ?
We really need it !
Have a great day.
Hi @Joey and @Milesbd
I have added that code however it is not working - is it possible with Omnichannel (On Site)? We are desperately looking for a solution to hide/grey out out of stock sizes, as this is by far the number one complaint we get.
We are using the theme Croissant at the moment.
More than happy to pay for an app to do this, however all the apps on the market at the moment do not support Omni.
Thanks so much in advance!!!
Nikki,
I just had the company, AdVision, fix this for us and cannot say enough how impressed I was with AdVision's responsiveness and professional approach to this. We use Lightspeed retail but since this is ecom specific development, it should work with OnSite too. At least it's worth asking them.
It's too bad that Lightspeed can't handle this directly, but but at least the issue is resolved. Their pricing was more than fair.
They also set up up with Omnichannel Gift cards last week too - so happy to have two of Lightspeed's shortcomings fixed.
I cannot believe that Lightspeed can’t do basic e-commerce function of filtering by size. I am a retailer and this blows me away. This is a game changer for user experience. It appears this has been a problem for quite some time but still no solution that doesn’t cost me extra money. I can’t believe I have referred other retailers to lightspeed. What’s the ETA of having this problem resolved and what t can I do now?
I've changed the code of Milesbd, because of the change of the value of the ID in the OPTION in some circumstances. Also there is a difference in Jquery, but I am not sure thats the real problem why it didn't work..
I've only checked the single attribute, not the double attribute variants, but it should work. I am not a Javascript developer, let alone a JQuery expert, but it works:
The code:
<code>
<script>
// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page
if ($('[itemtype*="//schema.org/Product"]').length > 0) {
//Check the url to see if a variant is being viewed or not
var curl = location.href;
//choose the appropriate ajax url
if (curl.indexOf('?') > -1) {
var url = curl + '&format=json';
} else {
var url = '?format=json';
}
//Start the ajax call
$.ajax({
url: url,
})
// Add the disabled attribute to the variants that aren't available
.done(function(obj) {
//create a variable with the product variants
var data = obj.product.variants;
//fun a function on each variant
$.each(data, function(index, value) {
//check if any of the variants aren't available for purchase
if (!value.stock.available) {
//CODE FOR DOUBLE ATTRIBUTE VARIANTS
//check if the variants are double attribute
if (value.title.indexOf(',') > -1) {
console.log('Double Attribute matrix!');
var attribute1 = value.title.replace(/"/g,'').split(',')[0].split(": ")[1];
//only disable the variants for which the first attribute is being viewed
if ($('select[name*="matrix"]:first()').val() == attribute1) {
var option = value.title.replace(/"/g,'').split(',')[1].split(":")[1];
$('select[name*="matrix"] option:contains(' + option + ')').each(function(){
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
//CODE FOR SINGLE ATTRIBUTE VARIANTS
} else {
var option = value.title.split(': ')[1];
var selectname = value.title.split(': ')[0];
$('select[name*="matrix"] option:contains(' + option + ')').each(function(){
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
}
})
});
} else {
console.log('not a product page!');
}
</script>
</code>
I too was surprised to find variants that haven't even been activated within retail are not filtered out on the eCom side.
I adjusted by changing the matrix options for some products to include all the available variants in a single attribute matrix, rather than as a two- or three- attribute matrix.
I find it ridiculous that after 3 years of this issue bugging customers LS still hasn't corrected this basic usability issue for shoppers.
We use this code however it doesn't work with double attributes.
<code>
<script>
// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page
if ($('[itemtype*="//schema.org/Product"]').length > 0) {
//Check the url to see if a variant is being viewed or not
var curl = location.href;
//choose the appropriate ajax url
if (curl.indexOf('?') > -1) {
var url = curl + '&format=json';
} else {
var url = '?format=json';
}
//Start the ajax call
$.ajax({
url: url,
})
// Add the disabled attribute to the variants that aren't available
.done(function(obj) {
//create a variable with the product variants
var data = obj.product.variants;
//fun a function on each variant
$.each(data, function(index, value) {
//check if any of the variants aren't available for purchase
if (!value.stock.available) {
//CODE FOR DOUBLE ATTRIBUTE VARIANTS
//check if the variants are double attribute
if (value.title.indexOf(',') > -1) {
console.log('Double Attribute matrix!');
var attribute1 = value.title.replace(/"/g,'').split(',')[0].split(": ")[1];
//only disable the variants for which the first attribute is being viewed
if ($('select[name*="matrix"]:first()').val() == attribute1) {
var option = value.title.replace(/"/g,'').split(',')[1].split(":")[1];
$('select[name*="matrix"] option:contains(' + option + ')').each(function(){
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
//CODE FOR SINGLE ATTRIBUTE VARIANTS
} else {
var option = value.title.split(': ')[1];
var selectname = value.title.split(': ')[0];
$('select[name*="matrix"] option:contains(' + option + ')').each(function(){
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
}
})
});
} else {
console.log('not a product page!');
}
</script>
</code>
Okay so I finally figured out why the double attribute matrix items were not working!! And it finally works!
<script>
// A quick check to see if it is a product being viewed (checking the microdata) - to avoid running the rest of the code if viewing a page other than the product page
if ($('[itemtype*="//schema.org/Product"]').length > 0) {
//Check the url to see if a variant is being viewed or not
var curl = location.href;
//choose the appropriate ajax url
if (curl.indexOf('?') > -1) {
var url = curl + '&format=json';
} else {
var url = '?format=json';
}
//Start the ajax call
$.ajax({
url: url,
})
// Add the disabled attribute to the variants that aren't available
.done(function(obj) {
//create a variable with the product variants
var data = obj.product.variants;
//fun a function on each variant
$.each(data, function(index, value) {
//check if any of the variants aren't available for purchase
if (!value.stock.available) {
//CODE FOR DOUBLE ATTRIBUTE VARIANTS
//check if the variants are double attribute
if (value.title.indexOf(',') > -1) {
var attribute1 = value.title.replace(/"/g, '').split(',')[0].split(": ")[1];
//only disable the variants for which the first attribute is being viewed
if ($('select[name*="matrix"]:first()').val().replace(/%2F/g, '/').replace(/\+/g, ' ') == attribute1) {
var option = value.title.replace(/"/g, '').split(',')[1].split(":")[1].trim();
$('select[name*="matrix"] option:contains(' + option + ')').each(function() {
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
//CODE FOR SINGLE ATTRIBUTE VARIANTS
} else {
var option = value.title.split(': ')[1];
var selectname = value.title.split(': ')[0];
$('select[name*="matrix"] option:contains(' + option + ')').each(function() {
if ($(this).text() == option) {
$(this).attr('disabled', 'true');
}
});
}
}
})
});
} else {
console.log('not a product page!');
}
</script>