Новая вкладка-табы для товара в админке 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); ?>