Стилизация выпадающего меню продукта WooCommerce с использованием CSS

Question

У меня есть сайт Wordpress, на котором установлен WooCommerce с несколькими переменными продуктами, у каждого варианта каждого продукта есть раскрывающееся меню, в котором отображаются различные переменные при нажатии.

Мой вопрос: как мне стилизоватьвыпадающие меню, которые появляются при нажатии?Я могу успешно изменить цвет и размер шрифта, но не цвет фона, отступ между текстом и т. Д. Раскрывающихся меню.

Ссылка для лучшего примера

PS Я использую плагин Elementor Pro с темой Hello Elementor Basic, чтобы редактировать мои страницы и добавлять пользовательские CSS.

PPS Я искал околодля ответа перед тем, как приехать сюда, все, что я нашел, это то, что это может быть связано с AJAX и чем-то, касающимся CSS .select2, но я не вижу этот код CSS при проверке моей страницы или добавлении кода в мой CSS.

Извините, если это простое решение, которого я просто не вижу, но было бы неплохо иметь возможность стилизовать выпадающие меню в соответствии со стилем моего сайта.

Answer 1

Если я правильно понимаю, вы хотите изменить нативный выпадающий список.Если это так, вы можете комбинировать CSS с JavaScript.

Возможно, эта страница может указать вам правильное направление: https://www.w3schools.com/howto/howto_custom_select.asp

Идентификатор и имя класса для каждого переменного поля выбора продукта устанавливаются на основена имена атрибутов.Поэтому я предлагаю взять их все с родительскими элементами, например так:

.single-product div.product table.variations select {
/* Your Custom Style Here */
}

Вы можете использовать JS, которым я поделился с вами, в качестве ссылки, и добавить его в нижний колонтитул вашего WP с помощью этого хука:

// ADDS CUSTOM JAVASCRIPTS TO WP_FOOTER
function child_theme_footer_script() { ?>
<script>
    // YOUR CUSTOM FUNCTION HERE
</script>
<?php }
add_action( 'wp_footer', 'child_theme_footer_script', 20 );