Как вместо радио кнопок поставить картинку? в выборе способа оплаты на странице оформления заказа

[MossveT]

Здравствуйте! Уважаемые знатоки, возможно кто сталкивался ?! Нужно вместо радио кнопок поставить картинку, при выборе способа оплаты. К каждому способу нужна своя картинка.
Я знаю , что нужно изменить type="radio" на type="image" и добавить адрес на картинку, но не могу найти где это сделать , в каком файле. Помогите пожалуйста!

Вот собственно сам код:
<input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" checked="checked" data-order_button_text="">
<input id="payment_method_mpos" type="radio" class="input-radio" name="payment_method" value="mpos" data-order_button_text="">
<input id="payment_method_tinkoff" type="radio" class="input-radio" name="payment_method" value="tinkoff" data-order_button_text="">

нужно сделать так

 

[Stork.71]

картинку вроде вставили. Пропишите для нее vertical-align: middle; а для input проишите display: none;
ну и можно бы еще сделать чтобы выбранному варианту добавлялась тень или рамка с помощью свойства :checked как-то так:
.wc-payment-method input.input-radio:checked + label { border: 2px solid;}

 

[MossveT]

картинку вроде вставили. Пропишите для нее vertical-align: middle; а для input проишите display: none;
ну и можно бы еще сделать чтобы выбранному варианту добавлялась тень или рамка с помощью свойства :checked как-то так:
.wc-payment-method input.input-radio:checked + label { border: 2px solid;}

Спасибо больше за ответ, input я скрыл, а вот добавить рамку к выбранному варианту не получается, возможно подскажите в каком файле нужно вставить приведенный Вами выше код ?

 

[Stork.71]

Спасибо больше за ответ, input я скрыл, а вот добавить рамку к выбранному варианту не получается, возможно подскажите в каком файле нужно вставить приведенный Вами выше код ?

да по идее там же, где и все остальное - в каком-нибудь style.css или custom.css
можно попробовать еще так:
#payment input:checked + label { border: 2px solid; }

 

[MossveT]

да по идее там же, где и все остальное - в каком-нибудь style.css или custom.css
можно попробовать еще так:
#payment input:checked + label { border: 2px solid; }

Спасибо получилось, прописал в файле modules.min.css в папке шаблона. Возможно так же подскажите, как можно их выровнять в ряд ?

 

[tuxfighter]

в каком-нибудь style.css или custom.css

не надо давать настолько чудовещно вредных советов.
все изменения стилей вносятся в файл style.css дочерней темы или в внешний вид-настройки-дополнительные стили

прописал в файле modules.min.css в папке шаблона

ровно до первого обновления вашей темы

 

[Stork.71]

не надо давать настолько чудовещно вредных советов.
все изменения стилей вносятся в файл style.css дочерней темы или в внешний вид-настройки-дополнительные стили

а не будьте столь категоричны!
Я посоветовал засунуть в целом в какой-нибудь style.css, подразумевая, что человек уже где-то все это делает, и вот где делает - туда и сует.
Дочки не всегда работают. В частности, например, популярнейшая тема Storefront имеет кучу дочерних тем, и не рекомендует вносить что-либо в стили своих дочек, поскольку они тоже обновляются.
У меня все изменения по стилям хранятся в файле style.css плагина Theme Customisation, который сами Woothemes рекомендуют для кастомизации. Хотя в основном конечно использование дочерних тем срабатывает.

 

[Stork.71]

Спасибо получилось, прописал в файле modules.min.css в папке шаблона. Возможно так же подскажите, как можно их выровнять в ряд ?

.wc_payment_method { display: inline; }

 

[tuxfighter]

В частности, например, популярнейшая тема Storefront имеет кучу дочерних тем, и не рекомендует вносить что-либо в стили своих дочек, поскольку они тоже обновляются.

естественно в свою дочернюю тему, а не где-то скаченную

У меня все изменения по стилям хранятся в файле style.css плагина Theme Customisation, который сами Woothemes рекомендуют для кастомизации.

да, как вариант