Опция продукта Woocommerce - выделите выбранные опции

Question

Я строю базу электронной коммерции на платформе Woocommerce и борюсь с одной вещью.На странице продукта у меня есть несколько опций, которые пользователь может выбрать:

На этом первом изображении опция не выбрана.

Когда пользователь выбираетвариант, я бы хотел, чтобы он был обведен черным, или любой индикатор, чтобы показать, какой вариант выбран.В данный момент невозможно увидеть, какой вариант выбран:

Это простые варианты Woocommerce (изображения).Можно ли как-то указать пользователю, какие опции выбраны с помощью css или javascript?

Answer 1

В Google Chrome выберите один вариант для своего продукта, затем щелкните правой кнопкой мыши -> осмотреть («inspecter» на французском языке). Посмотрите на родительские элементы (очевидно, divs), содержащие выбранный элемент, к нему должен быть добавлен класс "selected" или эквивалентный класс, например, "active" или "select" или что-то еще. Теперь, когда вы знаете, что класс добавлен к выбранным параметрам, вы можете добавить стиль CSS следующим образом:

.selected {border: 1px solid black;}

Добавьте этот стиль в "custom css" вашей темы woocommerce или в пользовательский файл css в вашей теме. Также это только пример, лучше быть очень точным в отношении элемента, на который вы ориентируетесь в CSS, чтобы все элементы с классом .selected не имели границы на вашем сайте. Например, используйте:

.woocommerce-product.choice.selected {border:1px solid black;}

Но это будет зависеть от конфигурации вашей темы woocommerce, я не могу дать точный ответ, не увидев сайт.