Вывод опций на товаре горизонтально

Может кто-нибудь подскажет как сделать вывод опций горизонтально под описанием товара? Вот как-то так http://c2n.me/3ilL2LR.jpg

Opencart 2.0.1.1, русская сборка.

 

Сначало необходимо отредактировать product.tpl и перенести весь код с опциями под описание или еще куда. Это сделано?

А потом добавить стиль в stylesheet.css, например такой

Код:

div[id^="input-option"] .radio {
    display: inline-block;
}

 

Перенес код с опциями вниз и применил указанный стиль - в итоге все стало как надо. Есть только одна проблемка: кнопка купить и количество товара тоже растянулись на всю страницу http://c2n.me/3iopcK3.png, пробовал вынести эти элементы из блока опций - тогда кнопка купить перестает работать. Можно это как-то поправить?

И еще вопрос: как избавиться от этих элементов http://c2n.me/3iooZ87.jpg, т.е. скрыть радиобокс и название опции?

 

Код:

div[id^="input-option"] .radio input {
    display: none;
}

но это только для радиобокса. Названия надо убрать в коде product.tpl
чуть ниже <?php if ($option['type'] == 'image') { ?>
удалите <?php echo $option_value['name']; ?>

 

так оберните ее в блок bootstrap-а и все. Или просто класс добавить, например col-sm-6

 

Спасибо.

Это уже сам нашел, там в <label> это строка была.

В col-sm-4 обернул, в котором она и была раньше.

А через css как добавить выделение картинки опции после клика на нее http://c2n.me/3ip1WOG.jpg ?

 

http://htmlbook.ru/css/focus

 

Добавил в css и на выделение и на наведение. Наведение работает, а вот выделение - нет. В чем может быть причина?

Код:

.img-thumbnail{
padding:4px;
line-height:1.428571429;
background-color:#fff;
border:1px solid #ddd;
border-radius:4px;
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
display:inline-block;
max-width:100%;
height:auto}

.img-thumbnail:focus {
border: 1px solid #aa88ff;
background-color: #ffeeac;}

.img-thumbnail:hover {
border: 1px solid #aa88ff;
background-color: #ffeeac;}

 

может так?
.img-thumbnail a:focus
.img-thumbnail a:hover
или у вас без ссылок?

 

У меня без ссылок, это выбор опции. Опция с радиобоксом, т.е. по нажатию радиобокс активируется, но т.к. я его скрываю мне надо сделать выделение опции http://c2n.me/3ip1WOG.jpg.

 

Есть готовое решение для стандартного шаблона для Opencart 2.3.0.2 ? В этой версии по сравнению с прежними все поменялось. Готов заплатить 10$ за рабочую инструкцию для этой версии.

 

это решение должно работать.. карточка не менялась..

 

Есть два вопроса после выставления в ряд:
1. Как добавить всплывающий Alt к изображениям Опций при наведении на них?
2. Как полностью избавиться от поля radio input (сейчас несмотря на его скрытие, оно продолжает занимать место и наслаивается на соседние изображения и соответственно выходит за пределы изображения для которого назначено)?

 

ну что же вы. Тут уже идет простой html и должны как то сами...

 

Если бы все работало, то не обращался бы за советом.
В product.tpl уже прописано img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] ... , поэтому при наведении должно показывать название опции, но этого не происходит.
Некорректное отображение radio input тоже пока не побеждается.

 

потому что всплывающего альта не существует. Есть только title
Почитайте все же html