03 Май
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 точно по вашим требованиям и упростить процесс управления им.
