Greyed out sizes(attributes) when out of stock

[yaloe2017 0]

Hello,

My shop is almost finished. There is one thing i cannot archive.

I want my shoe sizes to be greyed out when the are out of stock.

I know I can hide them via the backend (Display unavailable product attributes on the product page) 

Thank you!

Edited August 18, 2017 by yaloe2017 (see edit history)

[yaloe2017 0]

I fixed this issue:

 

In product.tpl (add the black lines)

 

<ul id="group_{$id_attribute_group}">

                    {foreach from=$group.attributes key=id_attribute item=group_attribute}

                    {if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} //product higher then 0 is stock

                        <li class="input-container float-left">

                            <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"

                                   name="group[{$id_attribute_group}]"

                                   value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>

                            <span class="radio-label">{$group_attribute.name}</span>

                        </li>

                        {/if}

                        {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1} // product lower then -1 is out of stock

                        <li class="input-container out-of-stock-float-left">

                            <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"

                                   name="group[{$id_attribute_group}]"

                                   value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>

                            <span class="radio-label">{$group_attribute.name}</span>

                        </li>

                        {/if}

                    {/foreach}

                </ul>

 

You can style using CSS:

 

For example to use color red and line through:

 

/* out of stock css */

li.input-container.out-of-stock-float-left {

    float: left !important;

    color: red !important;

}

li.input-container.out-of-stock-float-left span.radio-label {

    text-decoration: line-through;

}

/* end out of stock css */

 

Cheers 

Edited August 18, 2017 by yaloe2017 (see edit history)

[Piter17 0]

Hello,

 

I need the same solution, but for presta 1.7. Anyone can help me?