Добавление этого на страницу вашего продукта сделает это:
(function($) {
$('#pa_color_buttons a[rel="pa_color"]').on('click', function() {
const backgroundColor = $('span', this).css('background-color');
$('.single_add_to_cart_button', $(this).closest('form')).css({
backgroundColor
});
})
})(jQuery);
Заметьте, это будет применять значение background-color, используя встроенный стиль, непосредственно на кнопке (так как не существует простого способа CSS сделать это).Если вы все еще хотите, чтобы состояние наведения было светло-серым, вам нужно переопределить примененный цвет JS с помощью !important:
.woocommerce div.product div.entry-summary form.cart .button:hover {
background: #2f456d !important;
}
Или вы можете просто немного изменить непрозрачность,заменив CSS выше на:
.woocommerce div.product div.entry-summary form.cart .button:hover {
opacity: .75;
}
Наконец, но не в последнюю очередь, ваша тема кажется грубой по краям.Я совершенно не согласен с noo.css:11120, который я бы переопределил:
@media (min-width: 480px) {
.woocommerce div.product.product-type-variable div.entry-summary .variations_form
.single_variation_wrap {
position: relative;
}
}