Agregar una pestaña personalizada en los ajustes de WooCommerce
WooCommerce ofrece una gran flexibilidad para personalizar su funcionalidad. Uno de los aspectos que se puede personalizar es la página de ajustes, donde puedes agregar pestañas personalizadas con tus propias configuraciones. Para ello, utilizaremos el hook woocommerce_get_settings_pages.
Crear una pestaña básica
Primero, vamos a agregar una pestaña básica en la página de ajustes de WooCommerce.
1) Añadir la función para registrar la página de ajustes personalizada:
<?php
add_filter('woocommerce_get_settings_pages', 'add_custom_settings_page');
function add_custom_settings_page($settings) {
$settings[] = include 'class-wc-settings-custom.php';
return $settings;
}
2) Crear el archivo class-wc-settings-custom.php:
Este archivo contendrá la clase que define nuestra pestaña personalizada.
<?php
if (!class_exists('WC_Settings_Page')) {
return;
}
class WC_Settings_Custom extends WC_Settings_Page {
public function __construct() {
$this->id = 'custom_settings';
$this->label = __('Custom Settings', 'woocommerce');
add_filter('woocommerce_settings_tabs_array', array($this, 'add_settings_page'), 20);
add_action('woocommerce_settings_' . $this->id, array($this, 'output'));
add_action('woocommerce_settings_save_' . $this->id, array($this, 'save'));
}
public function get_sections() {
$sections = array(
'' => __('General', 'woocommerce'),
'advanced' => __('Advanced', 'woocommerce')
);
return $sections;
}
public function get_settings($current_section = '') {
if ($current_section == 'advanced') {
return array(
'section_title' => array(
'name' => __('Advanced Section Title', 'woocommerce'),
'type' => 'title',
'desc' => '',
'id' => 'advanced_section_title'
),
'custom_text_field' => array(
'name' => __('Advanced Text Field', 'woocommerce'),
'type' => 'text',
'desc' => __('Enter some text', 'woocommerce'),
'id' => 'advanced_text_field'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'advanced_section_end'
),
);
} else {
return array(
'section_title' => array(
'name' => __('General Section Title', 'woocommerce'),
'type' => 'title',
'desc' => '',
'id' => 'general_section_title'
),
'custom_text_field' => array(
'name' => __('General Text Field', 'woocommerce'),
'type' => 'text',
'desc' => __('Enter some text', 'woocommerce'),
'id' => 'general_text_field'
),
'custom_number_field' => array(
'name' => __('General Number Field', 'woocommerce'),
'type' => 'number',
'desc' => __('Enter a number', 'woocommerce'),
'id' => 'general_number_field'
),
'section_end' => array(
'type' => 'sectionend',
'id' => 'general_section_end'
),
);
}
}
}
return new WC_Settings_Custom();
Usar las configuraciones en el Front-end
Ahora, vamos a utilizar estas configuraciones en el front-end de tu sitio WooCommerce.
1) Obtener el valor de las configuraciones:
<?php
$general_text_field = get_option('general_text_field');
$general_number_field = get_option('general_number_field');
$advanced_text_field = get_option('advanced_text_field');
2) Mostrar los valores en el front-end (por ejemplo, en el archivo header.phpo cualquier otra plantilla):
<?php if ($general_text_field) : ?>
<p><?php echo esc_html($general_text_field); ?></p>
<p><?php echo esc_html($general_number_field); ?></p>
<?php endif; ?>
<?php if ($advanced_text_field) : ?>
<p><?php echo esc_html($advanced_text_field); ?></p>
<?php endif; ?>
Agregar una pestaña personalizada en la página de ajustes de WooCommerce y dividirla en secciones utilizando el método get_sections es una excelente manera de organizar y ampliar la funcionalidad de tu tienda. Utilizando el hook woocommerce_get_settings_pages, puedes crear configuraciones personalizadas que se adapten a tus necesidades específicas y luego usar esos valores en el front-end para ofrecer una experiencia más personalizada a tus usuarios.
