Модуль размеров обуви в таком виде (смотрите скриншот)

[sashamaximiv]

Здравствуйте. Подскажите модуль который позволит вывести размеры обуви в таком виде, а не классическими чекбоксами

 

[Eldaeron]

sashamaximiv, Стилизация CSS ONLY!

[sashamaximiv]

Стилизация не работает. Можете сами проверить. http://prima-shop.com.ua/index.php?route=product/product&path=60_69&product_id=50

 

Или эту тему 

 

Змінено 15 квітня 2017 користувачем sashamaximiv

[jaffagold]

поработать над точкой для щелчка на выбор опции

Скрытый текст

#product .checkbox input[type=checkbox] {

 

1. margin-left: 20px;

}

Но, видите ли в чем дело, у вас размер- чекбокс, а он должен быть radio ( переключатель)

Потому что можно сразу несколько чекбоксов выбрать, а радиокнопку- только одну. Это более логично при покупке вещи определенного размера. Так что, сначала, я бы поменял тип опции, а потом брался за стилизацию

 

И не забывайте, что у вас уже есть прописанные стили для блока с отмеченным чекбоксом.

Осталось только поменять цвет фона, текста и бордера

Скрытый текст

#product .checkbox input[type=checkbox]:checked + label {

position: relative;

border-color: #ff6908;

background: black;

color: white;

}

 

Змінено 15 квітня 2017 користувачем jaffagold

[sashamaximiv]

10 minutes ago, jaffagold said:

Для начала, можно пару кнопка число замкнуть в общий контур

Что-то типа этого

  Reveal hidden contents

#product .checkbox {

1. border: 1px solid #aaa;
2. padding: 4px;
3. border-radius: 3px;

}

А потом поработать над 

  Hide contents

#product .checkbox input[type=checkbox] {

 

1. margin-left: 20px;

}

Но, видите ли в чем дело, у вас размер- чекбокс, а он должен быть radio ( переключатель)

Потому что можно сразу несколько чекбоксов выбрать, а радиокнопку- только одну. Это более логично при покупке вещи определенного размера

 

Я бы за, но нужен выбор нескольких размеров.
Вот текущий html

<div class="checkbox">
  <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="<?php echo $option_value['product_option_value_id']; ?>" />
                  <label>
                    
                    <?php if ($option_value['image']) { ?>
                    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>

 и css

#product .checkbox {
    display: inline-block;
}
#product .checkbox input[type=checkbox] {
    cursor: pointer;
    opacity: 0;
}
#product .checkbox input[type=checkbox] + label {
    padding: 1px 9px;
    height: 15px;
    line-height: 15px;
    font-size: 14px;
    border: #ddd solid 1px;
    margin-top: 5px;
}
#product .checkbox input[type=checkbox]:checked + label {
    position: relative;
    border-color: #ff6908;
}

Но при клике на текст размера срабатывает рамка следующего размера. Вот так.
 

Змінено 15 квітня 2017 користувачем sashamaximiv

[jaffagold]

Я вам выше все стили уже написал.

НО как можно купить одну вещь сразу в трех размерах- не понимаю. Один товар-один размер. Я так привык.

Кстати, там дополнение и по черному цвету фона есть

Змінено 15 квітня 2017 користувачем jaffagold

[sashamaximiv]

Спасибо за помощь. Сделал немного по другому. Работает как часы) Всем спасибо за помощь. Тему можно закрывать.

[unknown]

14 minutes ago, jaffagold said:

Один товар-один размер. Я так привык.

 

Могут заказать несколько размеров для примерки.

 

7 minutes ago, sashamaximiv said:

Спасибо за помощь. Сделал немного по другому. Работает как часы) Всем спасибо за помощь. Тему можно закрывать.

 

Если вам потрудились ответить, то и вы уж скажите как сделали. Возможно кому-то пригодится.

[fanatic]

1 час назад, sashamaximiv сказал:

Стилизация не работает.

не правда