Стилизация woocommerce select

Всем привет! Это продолжение поста про стилизацию select.

Добавление обычного select

Для начала нам надо создать обычный select. Это можно сделать с помощью специальных плагинов или с помощью кода

Лично я сделал через код:

add_action( 'woocommerce_before_order_notes', 'webPanda_custom_woo_fields' );
 
function webPanda_custom_woo_fields() {
	woocommerce_form_field( 
		'billing_contactmethod', 
		array(
			'type'          => 'select', // text, textarea, select, radio, checkbox, password
			'required'	=> true, // по сути только добавляет значок "*" и всё
			'class'         => array( 'panda-field', 'form-row-wide' ), // массив классов поля
			'label'         => 'Предпочитаемый метод связи',
			'label_class'   => 'panda-label', // класс лейбла
			'options'	=> array( // options for  or 
				''		=> 'Выберите', // пустое значение
				'По телефону'	=> 'По телефону', // 'значение' => 'заголовок'
				'По email'	=> 'По email'
			)
		)
	);
}

Связка библиотеки select2 с полем, которое создали

Тут всё довольно просто. Нам надо подключить следующий js код. Прошу заметить, что в условии мы вставляем id без #, а далее уже вместе с #.

jQuery(document).ready(function ($) {
	if (document.getElementById('billing_contactmethod') {
    	$('#billing_contactmethod').select2({
		    minimumResultsForSearch: -1
		});
	}
});

Не знаете, как вставить код? Используйте woody code snippets. Создайте там js сниппет и выберите в условиях отображения: "показывать везде".

Откуда взять id поля? ID поле вы задаёте при создании этого поля. Самый простой способ — это посмотреть в консоли. Скрин ниже.

Если вы хотите добавить в ваш select поле поиска, то удалите строчку ' minimumResultsForSearch: -1' . Тогда ваш код должен быть таким:

jQuery(document).ready(function ($) {
	if (document.getElementById('billing_contactmethod') {
    	$('#billing_contactmethod').select2();
	}
});

Стилизация поля

Далее уже можно находить элементы через консоль и добавлять им стили через обычный css, так как всё сделано на div, то абсолютно любые стили будет применяться.

Если возникли проблемы, то пишите их в чат https://t.me/inweb_chat

Пост канала @web_panda