Добавление произвольного поля в настройки вариации

В этом уроке я покажу, как добавлять поля с метаданными в настройки вариаций.

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

И если вы ещё не прошли мой видеокурс по WooCommerce, то рекомендую однозначно.

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

Как добавить поле в настройки вариаций WooCommerce
Тут мы добавили поле «Какое-то поле» сразу же под полями с ценами.

Урок будет состоять из двух шагов, в первом я покажу вам, как добавлять поля, во втором – как сохранять.

Шаг 1. Хуки для добавления полей или произвольного HTML в настройки вариаций в админке

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

  • woocommerce_variation_options_pricing – этот будем использовать мы, срабатывает сразу же под полями с ценами.
  • woocommerce_variation_options – срабатывает сразу под чекбоксами «Включить», «Скачиваемый» и т д.
  • woocommerce_variation_options_inventory – срабатывает в группе полей, появляющейся при включении чекбокса «Управлять запасами?»
  • woocommerce_variation_options_dimensions – под полями веса и габаритов.
  • woocommerce_variation_options_download – появляется в настройках скачиваемого товара.

Теперь, зная хуки, можно с их помощью вывести поле.

add_action( 'woocommerce_variation_options_pricing', 'truemisha_field_to_variation', 25, 3 );
 
function truemisha_field_to_variation( $i, $variation_data, $variation ) {
 
	woocommerce_wp_text_input( 
		array(
			'id' => 'misha_field[' . $i . ']',
			'class' => 'short',
			'wrapper_class' => 'form-row',
			'label' => 'Какое-то поле',
			'value' => get_post_meta( $variation->ID, 'misha_field', true )
		)
	);
 
}

Вообще, если хотите, можете не использовать удобную функцию woocommerce_wp_text_input() и вывести поле в чистом HTML.

Ах да, код вставляйте в functions.php текущей темы или в свой плагин.

Условные CSS-классы для отображения и скрытия полей

Если вы читали мой урок про создание настроек товара, то вы уже знаете, о чём я хочу поговорить. Также, как и у настроек самого товара, у настроек вариаций есть набор классов, которые в завимости от отмеченных чекбоксов позволят вам скрыть или отобразить создаваемое вами поле.

чекбоксы в настройках вариации
То есть мы можем сделать, то при выборе какой-либо из этих галочек наше поле настроек будет появляться или исчезать.
  • show_if_variation_manage_stock – отобразить, если включено управление запасами,
  • hide_if_variation_virtual – скрыть, если вариация виртуальная,
  • show_if_variation_downloadable – отобразить, если вариация скачиваемая.

Тут конечно классов и условий поменьше. Сами классы лучше всего добавлять на обрамляющий полей элемент.

woocommerce_wp_text_input( 
		array(
			'id' => 'misha_field[' . $loop . ']',
			'class' => 'short',
			'wrapper_class' => 'form-row hide_if_variation_virtual',

Шаг 2. Сохранение метаполя в базу данных

Этот код также отправляется в functions.php вашей темы.

add_action( 'woocommerce_save_product_variation', 'truemisha_save_variation', 25, 2 );
 
function truemisha_save_variation( $variation_id, $i ) {
 
	if ( isset( $_POST[ 'misha_field' ][ $i ] ) ) {
		update_post_meta(
			$variation_id,
			'misha_field',
			sanitize_text_field( $_POST[ 'misha_field' ][ $i ] )
		);
	}
 
}

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.