Как добавить вкладку настроек на WooCommerce?

WooCommerce предлагает обширный набор настроек, организованных в несколько вкладок в панели управления администратора WordPress: Общие, Товары, Доставка, Налоги, Оплата, Учетные записи и конфиденциальность, Электронная почта, Интеграция, Дополнительно. В этой статье рассмотрим как добавить вкладку настроек на WooCommerce.

Это основные вкладки настроек WooCommerce. В зависимости от вашей конкретной настройки и дополнительных плагинов, которые вы можете использовать, вы также можете видеть дополнительные пользовательские вкладки.

Добавить вкладку настроек на WooCommerce

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

Добавление вкладки на страницу настроек WooCommerce

При помощи фильтра woocommerce_get_settings_pages мы можем легко добавить свою собственную вкладку в настройки WooCommerce. Этот фильтр позволяет нам встраиваться в процесс, когда WooCommerce извлекает доступные страницы настроек, и добавить свою собственную вкладку.

Для добавления новой вкладки нам необходимо создать PHP-класс, который расширяет класс WC_Settings_Page.

Приведенный ниже код добавляет пользовательскую вкладку с нашим собственным названием и кнопкой “Сохранить изменения” по умолчанию:

add_filter( 'woocommerce_get_settings_pages', 'genius_custom_woocommerce_settings_tab' );
 
function genius_custom_woocommerce_settings_tab( $settings ) {
  if ( ! class_exists( 'WC_Settings_Custom_Tab' ) ) {
      class WC_Settings_Custom_Tab extends WC_Settings_Page {
         function __construct() {
            $this->id = 'custom_tab';
            $this->label = 'Моя Вкладка';
            parent::__construct();
         }
      }
      $settings[] = new WC_Settings_Custom_Tab(); 
   }
   return $settings;
}

Добавление Настроек в нашу Вкладку в Панели WooCommerce

Теперь, когда у нас есть вкладка, мы можем использовать API настроек WooCommerce для внедрения пользовательских настроек.

API настроек WooCommerce предоставляет структурированный способ создания и управления страницами настроек в административной панели WordPress вашего магазина WooCommerce. Он предоставляет функционал для определения секций настроек, полей и обработки сохранения и извлечения этих настроек.

Но прежде чем мы внедрим настройки, нам нужно сказать WooCommerce, куда их внедрять, и для этого нам нужен идентификатор, который мы определили выше:

$this->id = 'custom_tab';

Чтобы вывести настройки в правильной вкладке (нашей пользовательской), нам нужно подключиться к фильтру woocommerce_get_settings_($id), который позволяет вам манипулировать настройками, извлеченными для определенной вкладки настроек, определенной параметром $id.

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

add_filter( 'woocommerce_get_settings_custom_tab', 'genius_custom_woocommerce_settings_tab_settings', 10, 2 );
 
function genius_custom_woocommerce_settings_tab_settings( $settings, $current_section ) {
 
   $settings = array(
      array(
         'title' => 'Заголовок пользовательской вкладки',
         'desc' => 'Описание пользовательской вкладки',
         'type' => 'title',
      ),
      array(
         'name' => 'Пользовательский текст',
         'type' => 'text',
         'id' => 'custom_tab_text_1',
         'default' => '',
         'desc' => 'Введите текст',
         'desc_tip' => true,
         'autoload' => false,
      ),
      array(
         'name' => 'Пользовательский флажок',
         'type' => 'checkbox',
         'id' => 'custom_tab_checkbox_1',
         'autoload' => false,
      ),
      array(
         'name' => 'Пользовательский выбор',
         'type' => 'select',
         'id' => 'custom_tab_select_1',
         'default' => 'a',
         'options'  => array(          
            'a' => 'Опция A',
            'b' => 'Опция B',
            'c' => 'Опция C',
         ),    
         'desc' => 'Выберите опцию',
         'desc_tip' => true,
         'autoload' => false,
      ),
      array(
         'type' => 'sectionend',
      ),
   );
    
   return $settings;
    
}

Получение новых Настроек из Вкладки WooCommerce

Как видите, я использовал следующие идентификаторы для пользовательских полей ввода:

'id' => 'custom_tab_text_1'

'id' => 'custom_tab_checkbox_1'

'id' => 'custom_tab_select_1'

Хорошо, WooCommerce автоматически сохранит значения в соответствующие опции WordPress. Это означает, что вы можете получать их, выводить и/или использовать в своем пользовательском коде (административной панели или на фронтенде).

Например, давайте добавим значения опций на страницу товара, используя хук woocommerce_single_product_summary для отображения под заголовком:

add_action( 'woocommerce_single_product_summary', 'genius_content_below_single_title', 6 );
 
function genius_content_below_single_title() {
   $custom_tab_text_1 = get_option( 'custom_tab_text_1' );
   $custom_tab_checkbox_1 = get_option( 'custom_tab_checkbox_1' );
   $custom_tab_select_1 = get_option( 'custom_tab_select_1' );
   echo "<p>{$custom_tab_text_1}</p>";
   echo "<p>{$custom_tab_checkbox_1}</p>";
   echo "<p>{$custom_tab_select_1}</p>";
}

Заключение

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

Теперь у вас есть возможность настроить свой магазин WooCommerce точно по вашим требованиям и упростить процесс управления им.

Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.