Сейчас сам тоже долблюсь над этой темой.... там не все версткой, там надо код менять product.tpl Впринципе получились кнопки, не хватает знаний как сделать условие(если товара нет на складе, то показывать другой стиль кнопки)
вот код файла product.tpl - замените эту секцию (код еще не оптимизирован грязно и в разработке)
<!-- attributes -->
<div id="attributes">
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<p>
<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'html':'UTF-8'} :</label>
{assign var="groupName" value="group_$id_attribute_group"}
<select style="display:none;" name="{$groupName}" id="group_{$id_attribute_group|intval}" onclick="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>
{/foreach}
</select>
{assign var="groupName" value="group_$id_attribute_group"}
<ul id="convert_group_{$id_attribute_group|intval}" class="convert_group convert_group_size">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{if (!$allow_oosp && $product->quantity <= 0)}
<li id="{$id_attribute|intval}" class="convertli" onclick="javascript:$('select#group_{$id_attribute_group|intval}').val({$id_attribute});findCombination();$('#wrapResetImages').show('slow');;removeSetlect('convert_{$id_attribute|intval}');$(this).addClass('selected');" style="cursor: pointer; color: red; border-color: rgb(72, 72, 72);">{$group_attribute|escape:'html':'UTF-8'}</li>
{else}
<li id="{$id_attribute|intval}" class="convertli" onclick="javascript:$('select#group_{$id_attribute_group|intval}').val({$id_attribute});findCombination();$('#wrapResetImages').show('slow');;removeSetlect('convert_{$id_attribute|intval}');$(this).addClass('selected');" style="cursor: pointer; color: black; border-color: rgb(72, 72, 72);">{$group_attribute|escape:'html':'UTF-8'}</li>
{/if}
{/foreach}
</ul>
</p>
{/if}
{/foreach}
</div>
[/spoil]
и в global.css добавьте ИЛИ замените следующее
[spoil]#primary_block div#attributes p,#quantity_wanted_p{clear:left;height:25px}
#primary_block div#attributes p,#minimal_quantity_wanted_p{clear:left;text-align:left}
#attributes,#availability_statut{float:left!important;width:100%;margin:20px 0}
#attributes .sizeguide{width:auto;float:right;padding-top:7px;text-align:right}
#attributes .sizeguide span#sizeguide{cursorointer}
#attributes .sizeguide span#sizeguide:hover{text-decoration:underline}
#attributes #sizeguidevalue{margin-top:7px;float:right}
#attributes .convert_group li{height:24px;line-height:24px;width:30px;border:1px solid #484848;margin-top:8px;margin-right:7px;
float:left;text-align:center;color:#121315;font-size:12px;font-weight:700;cursorointer}
#attributes .convert_group li.selected{background:#29d0ed;border:1px solid #ffffff;border:1px solid #484848;color:#fff !important}
#attributes .convert_group li:hover{background:#29d0ed;border:1px solid #484848;color:#fff !important;border:1px solid #484848}
#attributes .convert_group li.c{height:24px;line-height:24px;width:30px;border:1px solid #ffffff;margin-right:7px;float:left;
text-align:center;color:#121315;font-size:12px;font-weight:700;cursorointer}
#attributes .convert_group li.c.selected{background:#ffffff;border:1px solid #292929;border:1px solid #484848;color:#fff !important}
#attributes .convert_group li.c:hover{background:#ffffff;border:1px solid #ffffff;color:#fff !important;border:1px solid #484848}[/spoil]
Парни, может кто поможет до ума довести?
Вместо этого:
[spoil]
div id="attributes">
{* ON SALE *}
{if $product->on_sale}<span class="on_sale">{l s='On sale!'}</span>{elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutRedution > $productPrice}<span class="discount">{l s='Reduced price!'}</span>{/if}
<div class="clearblock"></div>
{* attributes *}
{if isset($groups)}
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<p>
{assign var="groupName" value="group_$id_attribute_group"}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'}:</label>
</p>
{/if}
{/foreach}
{/if}
</div>
[spoil]
div id="attributes">
{* ON SALE *}
{if $product->on_sale}<span class="on_sale">{l s='On sale!'}</span>{elseif $product->specificPrice AND $product->specificPrice.reduction AND $productPriceWithoutRedution > $productPrice}<span class="discount">{l s='Reduced price!'}</span>{/if}
<div class="clearblock"></div>
{* attributes *}
{if isset($groups)}
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<p>
{assign var="groupName" value="group_$id_attribute_group"}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'}:</label>
</p>
{/if}
{/foreach}
{/if}
</div>