Whats the best way to remove Out of Stock text

Question

I'm having trouble displaying the out of stock size without text "Out of Stock".

Example:

And here is how its showing up in DOM:

<span class="option out-of-stock" value="370">25 (Out of Stock)</span>

Also here is the jQuery piece that adds class to this span:

jQuery(".ui-segment span.option:contains('(Out of Stock)')").addClass('out-of-stock');

Is there a way to strip out the text "(Out of Stock)"?

or can I somehow generate only Size number eg:

"25" without text "Out of Stock"? So that instead of 25 Out of Stock it displays as 25

Answer 1

1. You have a config in admin to don't display the Out of stock products System>configuration>catalog>inventory>Display out of stock products>NO

2. If you want to hide the sizes that contains out of stock, you can do it like this:

HTML:

<span><p>25</p></span>
<span><p>26 out of stock</p></span>
<span><p>27</p></span>
<span><p>28 out of stock</p></span>

JS:

$.expr[":"].containsNoCase = function(el, i, m) {
    var search = m[3];
    if (!search) return false;
    var pattern = new RegExp(search,"i");
    return pattern.test($(el).text());
};
$(document).ready(function() {
    $("span p:containsNoCase('out of stock')").parent('span').hide();
});

JSFIDDLE DEMO

Answer 2

You can remove out of stock text from file

app/design/frontend/your_package/your_theme/template/configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml

in this file look for code something like $_option->label and with this code if there is any static text added for (Out of Stock) , you can simply comment or remove that text.

Answer 3

This is what worked for me:

jQuery(".ui-segment span.out-of-stock").text(function(index, text) {
    return text.replace(' (Out of Stock)', '');
});