Como adicionar uma aba de configurações no WooCommerce?

O WooCommerce oferece um extenso conjunto de configurações, organizadas em várias abas no painel de administração do WordPress: Geral, Produtos, Entrega, Impostos, Pagamentos, Contas e Privacidade, E-mail, Integração, Extras. Neste artigo, vamos explicar como adicionar uma aba de configurações no WooCommerce.

Estas são as principais abas de configurações do WooCommerce. Dependendo da sua configuração específica e dos plugins adicionais que você pode estar utilizando, você também pode ver abas personalizadas adicionais.

Adicionar uma aba de configurações no WooCommerce.

Ao adicionar uma seção separada nas configurações do WooCommerce, você pode organizar suas configurações personalizadas e manter tudo arrumado e consistente. Isso não apenas melhora seu fluxo de trabalho, mas também simplifica o gerenciamento de suas opções para quaisquer futuros colaboradores.

Adicionar uma aba à página de configurações do WooCommerce

Usando o filtro woocommerce_get_settings_pages, podemos facilmente adicionar nossa própria aba às configurações do WooCommerce. Este filtro nos permite intervir no processo quando o WooCommerce está recuperando as páginas de configurações disponíveis e adicionar nossa própria aba.

Para adicionar uma nova aba, precisamos criar uma classe PHP que estenda a classe WC_Settings_Page.

O código abaixo adiciona uma aba personalizada com nosso próprio nome e um botão ‘Salvar alterações’ padrão:

add_filter( 'woocommerce_get_settings_pages', 'hedomi_custom_woocommerce_settings_tab' );
 
function hedomi_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 = 'Nova aba';
            parent::__construct();
         }
      }
      $settings[] = new WC_Settings_Custom_Tab(); 
   }
   return $settings;
}

Adicionar configurações à nossa aba na interface do WooCommerce

Agora que temos nossa aba, podemos usar a API de configurações do WooCommerce para incorporar configurações personalizadas.

A API de configurações do WooCommerce fornece uma maneira estruturada de criar e gerenciar páginas de configurações na área administrativa do WordPress para sua loja WooCommerce. Ela oferece funcionalidades para definir seções de configurações, campos e lidar com a salvaguarda e recuperação dessas configurações.

Mas antes de incorporarmos as configurações, precisamos dizer ao WooCommerce onde queremos inseri-las, e para isso, precisamos de um identificador que definimos anteriormente:

$this->id = ‘custom_tab’;

Para exibir as configurações na aba correta (a nossa personalizada), precisamos conectar ao filtro woocommerce_get_settings_($id), que permite manipular as configurações recuperadas para uma determinada aba de configurações, definida pelo parâmetro $id.

Agora que o WooCommerce sabe a aba correta, posso adicionar algumas configurações. No exemplo abaixo, você encontrará um campo de entrada de texto, uma caixa de seleção e um exemplo de campo de seleção. Os valores inseridos serão automaticamente salvos, essa é a mágica. A API fará isso.

add_filter( 'woocommerce_get_settings_custom_tab', 'hedomi_custom_woocommerce_settings_tab_settings', 10, 2 );
 
function hedomi_custom_woocommerce_settings_tab_settings( $settings, $current_section ) {
 
   $settings = array(
      array(
         'title' => 'Título da nova aba',
         'desc' => 'Descrição da nova aba',
         'type' => 'title',
      ),
      array(
         'name' => 'Um texto customizado',
         'type' => 'text',
         'id' => 'custom_tab_text_1',
         'default' => '',
         'desc' => 'Digite o texto',
         'desc_tip' => true,
         'autoload' => false,
      ),
      array(
         'name' => 'Caixa de seleção personalizada',
         'type' => 'checkbox',
         'id' => 'custom_tab_checkbox_1',
         'autoload' => false,
      ),
      array(
         'name' => 'Opções',
         'type' => 'select',
         'id' => 'custom_tab_select_1',
         'default' => 'a',
         'options'  => array(          
            'a' => 'Opção A',
            'b' => 'Opção B',
            'c' => 'Opção C',
         ),    
         'desc' => 'Selecione uma opção',
         'desc_tip' => true,
         'autoload' => false,
      ),
      array(
         'type' => 'sectionend',
      ),
   );
    
   return $settings;
    
}

Obtenção de novas configurações da aba do WooCommerce.

Como você pode ver, usei os seguintes identificadores para os campos de entrada personalizados:

‘id’ => ‘custom_tab_text_1’

‘id’ => ‘custom_tab_checkbox_1’

‘id’ => ‘custom_tab_select_1’

Bem, o WooCommerce automaticamente salvará os valores nas opções correspondentes do WordPress. Isso significa que você pode obtê-los, exibi-los e/ou usá-los em seu código personalizado (no painel de administração ou no front-end).

Por exemplo, vamos adicionar os valores das opções à página do produto, usando o gancho woocommerce_single_product_summary para exibi-los abaixo do título:

add_action( 'woocommerce_single_product_summary', 'hedomi_content_below_single_title', 6 );
 
function hedomi_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>";
}

Agora você sabe como pode adicionar nova aba no plugin Woocommerce