• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Другой вид Вариативного товара

Image CMS

c0zzy

Новичок
#1
Возможно ли реализовать свой вид вариативного товара за странице заказа. Стандартный вид выбора вариантов не радует глаз.. Может плагин какой есть или можно css отдектировать..
 

Mishka48

Опытный
Команда форума
Местный
#2
На странице ЗАКАЗА или на странице ТОВАРА ? Если можно скриншот в студию или ссылку на сайт. Хорошо бы еще название темы узнать, а также увидеть пример какой вид вариантов Вам "радует глаз" .
 

c0zzy

Новичок
#3
На странице ЗАКАЗА или на странице ТОВАРА ? Если можно скриншот в студию или ссылку на сайт. Хорошо бы еще название темы узнать, а также увидеть пример какой вид вариантов Вам "радует глаз" .
На странице товара, простите :) Тема Hudson, но такое можно наблюдать на многих других темах, думается, что это woocommerce выглядит, а не тема..
На скриншоте кривенько обозначил что не устраивает. Поменять бы на что-то похожее на выбор количества товара
 

Вложения

D&B

Администратор
Команда форума
Местный
#5
Не понятно, что именно не радует Ваш глаз
а так бы мне хотелось видеть это окошко выбора
Ну так добавьте еще варианты цвета как в вашем примере. Что касается визуализации кнопок и элементов - это зависит от темы, если она конечно заточена под WooCommerce. В стандартных темах и элементы выглядят соответственно, примерно одинаково.
 
Последнее редактирование:

D&B

Администратор
Команда форума
Местный
#7
А каким образом можно заточить внешний вид так, как хотелось бы? И реально ли вообще?
Конечно реально. И ничего точить не надо. Для этого и существуют темы. Найдите себе ту которая бы устроила.
 

D&B

Администратор
Команда форума
Местный
#9
Не надо искать выход там где он уже давно есть и не один. Впрочем, если Вам так уж хочется по сложному пути - берете текстовый редактор, фотошоп и вперед.
 

Mishka48

Опытный
Команда форума
Местный
#15
вот это css кнопки соответствующий внешнему стилю гудзона - примени его к кнопке вариативного товара:
Код:
.woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: -moz-linear-gradient(center top , #F7F6F7 0px, #E0DADF 100%);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #C8BFC6;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #C8BFC6;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #C8BFC6;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #C8BFC6;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.075) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #5E5E5E;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
    font-weight: bold;
    left: auto;
    line-height: 1em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}
А начинать как-то надо, а то не закончишь никогда
 
Сверху Снизу