Настройки товара: Добавляем новые поля и даже вкладки.

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

Этот урок чуть более продвинутый, чем обычная вставка готового сниппета кода, поэтому я однозначно рекомендую вам свои видеокурсы по WordPress и по WooCommerce.

Пример

В этом примере мы добавляем две галки – для веганов и для тех, кто не ест глютен. Так это будет выглядеть в настройках:

Добавление собственных настроек в товары WooCommerce
Тут мы добавили две галки во вкладку «Основные», но я также покажу вам, как это делать и для других вкладок метабокса «Данные Товара».

Вот целиком весь код:

add_action( 'woocommerce_product_options_general_product_data', 'truemisha_2_checkboxes' );
 
function truemisha_2_checkboxes() {
 
	echo '<div class="option_group">';
 
	woocommerce_wp_checkbox( array(
		'id'      => 'is_vegan',
		'value'   => get_post_meta( get_the_ID(), 'is_vegan', true ),
		'label'   => 'Веган',
	) );
 
	woocommerce_wp_checkbox( array(
		'id'      => 'is_glutenfree',
		'label'   => 'Глютен-фри',
	) );
 
	echo '</div>';
 
}
 
 
add_action( 'woocommerce_process_product_meta', 'truemisha_save_checkboxes', 20, 2 );
 
function truemisha_save_checkboxes( $id, $post ){
 
	update_post_meta( $id, 'is_vegan', isset( $_POST[ 'is_vegan' ] ) ? 'yes' : 'no' );
	update_post_meta( $id, 'is_glutenfree', isset( $_POST[ 'is_glutenfree' ] ) ? 'yes' : 'no' );
 
}

Давайте теперь разбираться подробно, что к чему.

  • Когда вы добавляете свои поля внутрь <div class="option_group">, то вы создаёте группу полей, они будут красиво разделены серой линией (видно на скриншоте выше).
  • Для вывода полей вы конечно можете использовать обычный HTML, но я однозначно рекомендую встроенные в WooCommerce функции woocommerce_wp_text_input(), woocommerce_wp_textarea_input(), woocommerce_wp_checkbox(), woocommerce_wp_select() и woocommerce_wp_radio(), которые как раз для этой цели и предназначены!
  • Как вы поняли, настройки сохраняются как обычные метаданные, поэтому используем get_post_meta() для получения (но обратите внимание, что value можно не указывать, если ключ мета-поля совпадает с id поля) и update_post_meta() для сохранения
  • Вы можете заморочиться и добавить ещё одну nonce-проверку в свой код, но WooCommerce и так добавляет одну.
  • Не забываем про очистку полей при сохранении, её никто не отменял, а вот про очистку при выводе – забудьте, всё уже встроено в функции вывода полей.

Добавление полей в другие вкладки настроек

Вкладка «Основные»

  • woocommerce_product_options_general_product_data – то, что использовали мы для создания группы настроек,
  • woocommerce_product_options_pricing – группа полей с ценами,
  • woocommerce_product_options_tax – группа полей с налогами.

Вкладка «Запасы»

  • woocommerce_product_options_stock_status – первая группа полей,
  • woocommerce_product_options_sold_individually – вторая группа, там где чекбокс индивидуальной продажи,
  • woocommerce_product_options_inventory_product_data – создание собственной группы полей.

Вкладка «Доставка»

  • woocommerce_product_options_dimensions – первая группа полей с габаритами товара,
  • woocommerce_product_options_shipping – вторая группа полей.

Бам, а тут нельзя создать собственную группу полей, придётся довольствоваться тем, что есть.

Вкладка «Сопутствующие»

Тут всего один хук – woocommerce_product_options_related.

Вкладка «Дополнительно»

  • woocommerce_product_options_reviews – группа полей с отзывами,
  • woocommerce_product_options_advanced – если создаёте свою группу полей.

Создание своей вкладки

А что если нам не хватает стандартных владок метабокса и нужно добавить-таки свою собственную?

/*
 * Создание вкладки
 */
add_filter('woocommerce_product_data_tabs', 'truemisha_new_tab' );
 
function truemisha_new_tab( $tabs ){
 
	//unset( $tabs[ 'general' ] ); // отключаем вкладку Основные
	//unset( $tabs[ 'inventory' ] ); // Запасы
	//unset( $tabs[ 'shipping' ] ); // Доставка
	//unset( $tabs[ 'linked_product' ] ); // Сопутствующие
	//unset( $tabs[ 'attribute' ] ); // Атрибуты
	//unset( $tabs[ 'variations' ] ); // Вариации
	//unset( $tabs[ 'advanced' ] ); // Дополнительно
 
	$tabs[ 'truemisha' ] = array(
		'label'    => 'Настройки Миши',
		'target'   => 'truemisha_tab_content',
		'class' => array( 'class1', 'class2' ),
		'priority' => 15,
	);
	return $tabs;
 
}
 
/*
 * Заполнение вкладки
 */
add_action( 'woocommerce_product_data_panels', 'truemisha_tab_contents' );
 
function truemisha_tab_contents(){
 
	echo '<div id="truemisha_tab_content" class="panel woocommerce_options_panel hidden">';
 
	// тут уже выводим поля
 
	echo '</div>';
 
}
 
/*
 * Сохранение полей
 */
add_action( 'woocommerce_process_product_meta', 'бла бла бла...'
  • Бонусом показал вам, как удалить стандартные вкладки настроек товара 😁
  • При указании параметров вкладки (строки 17-20) самый важный, понятно, это target, который должен совпадать с атрибутом ID на строке 33.
  • Меняя параметр priority, можно изменить порядок расположения вашей вкладки по отношению к другим.

Вот что у меня получилось:

Создание произвольной вкладки настроек товара в WooCommerce

Наверное последний вопрос, который тут можно задать это – «А как указать произвольную иконку, например из Dashicons?» И ответ максимально банален – «При помощи CSS».

Условия отображения полей

Когда вы работаете с товарами, вы не могли не заметить, что определённые вкладки и настройки появляются и исчезают в зависимости от например выбранного типа товара. Например вкладка настроек вариаций появляется только для вариативных товаров.

Можем ли мы это как-то использовать и для своих вкладок и полей?

Вот о чём я говорю:

Выбор типа товара в настройках товара WooCommerce

Да и ещё раз да! Вы можете отображать или скрывать свои вкладки настроек, поля или группы полей в зависимости от типа товара, от того, виртуальный товар или скачиваемый! 🚀

Для этого нужно лишь указать соответствующий CSS класс. И вот их список:

  • hide_if_simple, show_if_simple – скрываем / отображаем, если простой товар,
  • hide_if_grouped, show_if_grouped – если сгруппированный,
  • hide_if_external, show_if_external – если внешний,
  • hide_if_variable, show_if_variable – если вариативный,
  • hide_if_virtual, show_if_virtual – если виртуальный,
  • hide_if_downloadable, show_if_downloadable – если скачиваемый.

Также у вас есть возможность использовать несколько классов сразу!

Миша

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

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

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

Комментарии — 7

Комментирование этого поста более не доступно.
  • Дмитрий 29 апреля 2020 #

    Спасибо за статью!
    Есть ли способ как добавить свое поле в качестве второго sku, причем чтобы и для простых товаров и для вариаций оно было одним?

    • Миша 30 апреля 2020 #

      Мне вторая часть вопроса не до конца ясна. Для вариаций или для вариативных товаров?

      • Дмитрий 3 мая 2020 #

        Для вариаций. Нужно универсальное поле и для простых товаров и для вариаций, по сути аналог sku. Стандартное поле SKU есть же и у простых и у вариативных товаров и у их вариаций.

      • Миша 3 мая 2020 #

        Понял вас!

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

        • Дмитрий 3 мая 2020 #

          Спасибо, буду ждать. Сделал по отдельности для простых и для вариаций, но это два разных поля, а сделать общее поле не получается.

  • persol 17 июня 2020 #

    Большое спасибо, очень полезная статья 🙂

    Небольшая поправка, вместо этого:
    add_action( 'woocommerce_process_product_meta', 'бла бла бла...'
    Вот так:
    add_action( 'woocommerce_process_product_meta', 'бла бла бла...');

    • Миша 18 июня 2020 #

      Спасибо! 🙃

      Ну там специально так сделано, типо как незаконченный код