Jump to content
yaloe2017

Greyed out sizes(attributes) when out of stock

Recommended Posts

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!


post-1431922-0-20291900-1503084578_thumb.png

Edited by yaloe2017 (see edit history)

Share this post


Link to post
Share on other sites

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  :mellow:

post-1431922-0-20896300-1503086772_thumb.png

Edited by yaloe2017 (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More