Новая вкладка-табы для товара в админке Woocommerce (MetaBox)

Загрузка...

Для системы управления контентом WordPress существует множество плагинов, но сегодня мы погорим об интернет магазине Woocommerce, в частности как создать новую вкладку в админке товара. Существует множество хуков, которые позволяют создавать вкладки или новые поля, в существующие ТАБы.

woocommerce_product_data_tabs — добавляет новую вкладку

Для добавления новых опций в существующие табы есть 5 хуков:

woocommerce_product_options_general_product_data — добавляет новые опции на вкладку General, там где расположены поля с ценами.

woocommerce_product_options_inventory_product_data — Вкладка Запасы

woocommerce_product_options_linked_product_data — Сопутствующие

woocommerce_product_options_product_attributes — Атрибуты

woocommerce_product_options_advanced_product_data — Дополнительно

Чтобы создавать новую вкладку, достаточно в файл темы function.php добавить следующий php код:

add_action('woocommerce_product_data_tabs','new_tab');

function new_tab($tab){
$tab['new_tab']=array('label'=>"Новая вкладка",'target'=>"new_tab");
return $tab;
}

Рассмотрим код:

Переменная $tab содержит массив со всеми вкладками, если сделать print_r($tab) мы увидим следующую картину

Если в функции new_tab вместо нашего кода вернуть пустое значение, то вкладки у товара буду временно скрыты.

function new_tab($tab){
return '';
}

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

function new_tab($tab){
$tab['general']=array('label'=>"Цены",target=>"general_product_data");
return $tab;
}

Всего в массиве содержится 6 табов со следующими ключами:

• general
• inventory
• shipping
• linked
• product_attributes
• advanced

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

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

Хук woocommerce_product_data_panels добавляет контент на указанную вкладку.

add_action('woocommerce_product_data_panels', 'new_tab_content');

Создаём контент внутри нового таба

<?php

add_action('woocommerce_product_data_panels', 'new_tab_content');

function new_tab_content(){
?>
<div id='new_tab' class = 'panel woocommerce_options_panel'>
<div class='options_group'>
</div>
</div>
<?php
}

?>

Мы лишь добавили HTML код который будет отображать контент на новой вкладке. Обязательным тегом для div элемента служит атрибут ID со значением «new_tab», именно это значение мы указали в функции new_tab()

$tab['general']=array('label'=>"Цены",target=>"new_tab");

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

<?php
add_action('woocommerce_product_data_panels', 'new_tab_content');
  
function new_tab_content(){
?>
<div id='new_tab' class = 'panel woocommerce_options_panel'>
  <div class='options_group'>
<?php woocommerce_wp_text_input( 
    array( 
      'id' => '_prim',
      'label' => 'Примечание',
      'placeholder' => '',
      'description' => 'примечание' )
      ); 
?>
  </div>
</div>
<?php
}

В Woocommerce существует несколько функций для создания полей, в данном случае я добавил текстовое поле, но можно использовать и другие:

• woocommerce_wp_textarea_input() — Большое текстовое поле
• woocommerce_wp_checkbox() — Чекбокс (птичка)
• woocommerce_wp_select() — Select(список)

Ключи в массиве:

• label -Необязательный параметр. Заголовок над полем
• id — Обязательный параметр. Уникальное название поля. В нашем случае это название поля «_prim»
• placeholder — Необязательный параметр. Можно использовать вместо label, отображает текст внутри поля

Сохраняем поле в БД

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

Если вы используете обычный товар, то для сохранения параметра используется хук:

woocommerce_process_product_meta_simple

Если вариативный

woocommerce_process_product_meta_variable

У меня вариативный товар поэтому добавляю следующий код:

add_action( 'woocommerce_process_product_meta_variable', 'new_tab_save' );

Для сохранения мета данных используется функция update_post_meta(‘id поста’,’имя поля’,’значение’);

function new_tab_save($id){
//$id- содержит id поста
update_post_meta($id,'_prim',esc_attr($prim));
}

Обратите внимание, что в качестве названия поля используется значение _prim, т.е с нижнем подчёркиванием перед названием. Зачем? Дело в том, что если не использовать «_», данное мета поле будет так же отображаться в «Произвольных полях».

На выходе мы получаем следующий код:

<?php

//Создаём новую вкладку

add_action('woocommerce_product_data_tabs','new_tab');

  function new_tab($tab){
  
    $tab['new_tab']=array('label'=>"Новая вкладка",'target'=>"new_tab");		
    return $tab;
  }

//Создание контента для вкладки

add_action('woocommerce_product_data_panels', 'new_tab_content');
  
function new_tab_content(){
?>
<div id='new_tab' class = 'panel woocommerce_options_panel'>
  <div class='options_group'>
<?php woocommerce_wp_text_input( 
    array( 
      'id' => '_prim',
      'label' => 'Примечание',
      'placeholder' => '',
      'description' => 'примечание' )
      ); 
?>
  </div>
</div>
<?php
}

//Сохранение поля в БД

add_action( 'woocommerce_process_product_meta_variable', 'new_tab_save' );

add_action( 'woocommerce_process_product_meta_simple', 'new_tab_save' );

function new_tab_save($id){

  //переменная ID содержит id текущего поста
  
  update_post_meta($id,'_prim',esc_attr($prim));
  
}

Добавляем его в /wp-content/themes/название темы/function.php вашей темы

Чтобы отобразить значение данного поля существует функция get_post_meta();

<?php

echo get_post_meta('id поста',"_prim",true);

?>