Como adicionar campos de produto personalizados no WooCommerce – Um guia completo

Os campos de produto personalizados são pontos de dados adicionais que podem ser adicionados aos produtos de uma loja virtual. Estes campos permitem aos proprietários de lojas recolher e apresentar mais informações sobre os seus produtos para além dos detalhes básicos normalmente incluídos (como o nome, o preço, a cor e a descrição).

Ao adicionar campos de produto personalizados do WooCommerce, os proprietários de lojas podem fornecer aos seus clientes informações mais detalhadas e precisas sobre os seus produtos, o que pode ajudar a melhorar a experiência do cliente e aumentar as vendas.

Neste tutorial, vou mostrar-te como podes adicionar campos de produto personalizados à tua loja WooCommerce.

O que são campos de produto personalizados no WooCommerce?

Os campos de produto personalizados do WooCommerce são uma ferramenta que permite costurar as informações do produto para atender a necessidades comerciais específicas. Estes campos permitem adicionar detalhes ou atributos adicionais aos produtos, para além dos dados de produto padrão do WooCommerce.

Os campos personalizados do WooCommerce permitem-te reunir e apresentar detalhes personalizados sobre os teus produtos, atendendo a requisitos ou especificações únicas.

Por que deves adicionar campos de produto personalizados no WooCommerce?

Os campos de produto personalizados oferecem flexibilidade na apresentação de informações sobre o produto. Os comerciantes podem criar campos para vários fins, como apresentar as dimensões do produto, os materiais utilizados, as instruções de manutenção ou quaisquer outros pormenores pertinentes que possam influenciar a decisão de compra de um cliente.

Os campos personalizados do WooCommerce podem melhorar significativamente a experiência do utilizador, oferecendo opções ou configurações personalizadas. Ao utilizar os campos personalizados na configuração do WooCommerce, capacita-te a ti e aos teus clientes com uma compreensão mais abrangente dos produtos oferecidos, facilitando as transacções.

Como adicionar campos de produto personalizados no WooCommerce (tutorial passo a passo)

A adição de campos de produto personalizados no WooCommerce envolve várias etapas, mas é relativamente simples. Aqui está um tutorial passo a passo para te guiar pelo processo:

Passo 1 – Personaliza a página de dados do produto

• Como na captura de ecrã abaixo, vou mostrar-te como editar o ficheiro functions.php (que se encontra na pasta do tema) para adicionar campos personalizados à página Product Data (Dados do produto ).

Passo 2 – Adiciona Hooks no WooCommerce

• O primeiro passo é ligar-te ao woocommerce_product_options_general_product_data. A função ligada a este gancho é responsável pela apresentação dos novos campos.
• Um segundo gancho, woocommerce_process_product_meta, guarda os valores dos campos personalizados.
• Ambas as acções são executadas no código seguinte:

// O código para mostrar os campos personalizados do produto WooCommerce
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' );  

// O código a seguir salva os campos personalizados do produto WooCommerce
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

Passo 3 – Adiciona campos de produto personalizados

• Para adicionar os campos personalizados, utilizarei as funções predefinidas do WooCommerce, incluindo:

woocommerce_wp_text_input

• Pacote: WooCommerce\Administração\Funções
• Localizado em: includes/admin/wc-meta-box-functions.php

woocommerce_wp_textarea_input

• Pacote: WooCommerce\Administração\Funções
• Localizado em includes/admin/wc-meta-box-functions.php

função woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo '<div class=" product_custom_field ">';
// Esta função tem a lógica de criar um campo personalizado
// Esta função inclui um campo de texto de entrada, uma área de texto e um campo numérico
ecoa '</div>';
}

Passo 3.1: Inclui a estrutura do campo

Nota: a utilização de desc_tip para mostrar aquelas pequenas bolhas à direita do campo em vez de mostrar a descrição do campo por defeito. Este atributo funciona para todos os tipos de campo.

// Campo de texto personalizado do produto
  woocommerce_wp_text_input(
  matriz(
  'id' => '_custom_product_text_field',
  'label' => __( 'O meu campo de texto', 'woocommerce' ),
  'placeholder' => 'Campo de texto de produto personalizado',
  'desc_tip' => 'true'
  )

  );

• O valor predefinido do passo é 1, com o mínimo definido para zero. Basicamente, isto significa que espero um valor positivo aqui (pelo menos maior que zero).

// Campo de número de produto personalizado
woocommerce_wp_text_input(
  matriz(
  'id' => '_custom_product_number_field',
  'placeholder' => 'Campo de número de produto personalizado',
  'label' => __('Campo de número de produto personalizado', 'woocommerce'),
  'tipo' => 'número',
  'custom_attributes' => array(
  'step' => 'any',
  'min' => '0'
  )
  )
);

• Utiliza o seguinte para criar um textarea.

// Campo de área de texto de produto personalizado
woocommerce_wp_textarea_input(
  matriz(
  'id' => '_custom_product_textarea',
  'placeholder' => 'Área de texto personalizada do produto',
  'label' => __('Área de texto personalizada do produto', 'woocommerce')
  )
);

• Utiliza o seguinte código para os campos de entrada personalizados. Tens de colar este código no ficheiro functions.php localizado na pasta do tema.

// Exibir campos
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Guarda os campos
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');


função woocommerce_product_custom_fields()
{
  global $woocommerce, $post;
  ecoa '

// Campo de texto personalizado do produto woocommerce_wp_text_input( matriz( ‘id’ => ‘_custom_product_text_field’, ‘placeholder’ => ‘Campo de texto de produto personalizado’, ‘label’ => __(‘Campo de texto personalizado do produto’, ‘woocommerce’), ‘desc_tip’ => ‘true’ ) ); //Campo de número de produto personalizado woocommerce_wp_text_input( matriz( ‘id’ => ‘_custom_product_number_field’, ‘placeholder’ => ‘Campo de número de produto personalizado’, ‘label’ => __(‘Campo de número de produto personalizado’, ‘woocommerce’), ‘tipo’ => ‘número’, ‘custom_attributes’ => array( ‘step’ => ‘any’, ‘min’ => ‘0’ ) ) ); /Área de texto do produto personalizado woocommerce_wp_textarea_input( matriz( ‘id’ => ‘_custom_product_textarea’, ‘placeholder’ => ‘Área de texto personalizada do produto’, ‘label’ => __(‘Área de texto personalizada do produto’, ‘woocommerce’) ) ); ecoa ”; }

Passo 3.2: Guarda os dados na base de dados

Depois de teres criado os campos de produto personalizados, é necessária outra função para guardar os valores para o botão de atualização ou publicação.

Vou criar uma função woocommerce_product_custom_fields_save. Esta função está ligada ao woocommerce_process_product_meta. Verifica primeiro se o campo está vazio ou preenchido. Se não estiver, cria um post meta usando update_post_meta(). Utilizei esc_attr() e esc_html() para proteger os dados.

Aqui tens o código para guardar o valor de todos os campos:

função woocommerce_product_custom_fields_save($post_id)
{
  // Campo de texto personalizado do produto
  $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
  Se (!empty($woocommerce_custom_product_text_field))
  update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// Campo de número de produto personalizado
  $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
  Se (!empty($woocommerce_custom_product_number_field))
  update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// Campo de área de texto de produto personalizado
  $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
  Se (!empty($woocommerce_custom_procut_textarea))
  update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));

}

Passo 3.3: Obtém os valores da base de dados

Agora que os campos foram criados e os seus valores guardados, vou apresentá-los no frontend. Neste caso, recomendo-te que trabalhes com os modelos personalizados do WooCommerce.

Vou utilizar a popular função get_post_meta() para obter esses valores.

<?php while (have_posts()) : the_post(); ?>
<?php wc_get_template_part('content', 'single-product'); ?>
<?php
// Mostra o valor do campo de texto personalizado do produto
  echo get_post_meta($post->ID, '_custom_product_text_field', true);
// Mostra o valor do campo personalizado do número do produto
  echo get_post_meta(get_the_ID(), '_custom_product_number_field', true);
// Mostra o valor da área de texto do produto personalizado
  echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
  ?>
<?php endwhile; // fim do ciclo. ?>

Passo 4: Adiciona campos personalizados na página do produto

O que é bom é que estes campos personalizados podem ser facilmente adicionados através do backend. Estas alterações são depois reflectidas no frontend como campos personalizados nas páginas de produtos, páginas de carrinho e áreas semelhantes. De facto, estes campos personalizados também podem aparecer nas páginas de estado das encomendas.

Para isso, vou mostrar-te como adicionar um novo campo personalizado na secção Product Data (Dados do produto) de uma página de produto do WooCommerce:

  função woocommerce_product_custom_fields()
{
  $args = array(
  'id' => 'woocommerce_custom_fields',
  'label' => __('Adicionar campos personalizados do WooCommerce', 'cwoa'),
  );
  woocommerce_wp_text_input($args);
}
 
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

Vê aqui como o snippet apareceria no frontend. Como podes ver, o campo personalizado tem a mesma etiqueta que a mencionada no conjunto $args.

Passo 5: Guardar os dados do campo personalizado

• Utiliza o seguinte fragmento de código para adicionar campos personalizados às páginas de produtos.
• O que é importante notar sobre o snippet é que ele usa funções e ações padrão do WooCommerce.

função save_woocommerce_product_custom_fields($post_id)
{
  $product = wc_get_product($post_id);
  $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : ''; 
  $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title));
  $product->save();
}


add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');

Como exibir campos personalizados na página do produto no WooCommerce

O seguinte snippet exibe os campos personalizados. O processo é simples; primeiro verifica o valor do campo personalizado e confirma que tem um valor. Se o caso for verdadeiro, apresenta o valor como o título do campo.

função woocommerce_custom_fields_display()
{
  global $post;
  $product = wc_get_product($post->ID);
  $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields');
  Se ($custom_fields_woocommerce_title) {
  imprime(
  '

‘, esc_html($custom_fields_woocommerce_title) ); } } add_action(‘woocommerce_before_add_to_cart_button’, ‘woocommerce_custom_fields_display’);

Como podes ver na imagem seguinte, o campo personalizado é visível na página do produto. Repara que o título do campo é “WooCommerce product custom fields“, o mesmo que o valor de id no snippet.

Utilizar plug-ins para campos de produto personalizados

Como apoio para quem não gosta de codificação ou precisa de uma solução fácil, existem vários plugins que podes utilizar para te ajudar a utilizar campos de produtos personalizados no WooCommerce sem codificação. Alguns deles incluem:

1. Campos personalizados avançados (ACF)

O ACF é um plugin muito poderoso que te permite criar campos personalizados para qualquer objeto do WordPress, incluindo produtos do WooCommerce. Tem uma interface de campo simples de usar e dá-se bem com o WooCommerce.

• Caraterísticas: Oferece uma incrível coleção de tipos de campos (texto, imagem, data, etc.), lógica condicional e integração nativa do WooCommerce.
• Prós: Muito flexível, suporta estruturas de campo complexas e possui uma excelente documentação.
• Contras: Demasiado para casos de utilização simples, existe uma curva de aprendizagem.

2. Add-ons de produtos WooCommerce

Este plugin permite-te adicionar campos personalizados aos teus produtos, que podes utilizar para obter mais informações dos clientes ou oferecer variações de produtos.

• Caraterísticas: Oferece suporte para campos de texto, caixa de verificação, rádio e seleção, e suporta o checkout do WooCommerce.
• Prós: Fácil de usar, suporta WooCommerce e oferece lógica condicional.
• Contras: Menos centrado nas variações dos produtos do que nos campos de informação.

3. YITH WooCommerce Product Add-ons & Extra Options

Este plugin oferece uma vasta gama de opções para adicionar campos e opções personalizados aos produtos WooCommerce com suporte de lógica condicional.

• Caraterísticas: Suporta muitos tipos de campos, incluindo campos de texto, caixa de verificação e seleção, e é compatível com o WooCommerce.
• Prós: Extremamente flexível, compatível com a lógica condicional e é compatível com o WooCommerce.
• Contras: Preço fora do alcance das pequenas lojas e a interface pode ser desorganizada.

Como utilizar estes plug-ins

• Instala o plugin, indo ao teu painel de controlo do WordPress, Plugins > Adicionar novo, e procurando o plugin que queres implementar.
• Clica em Instalar agora e depois em Ativar.
• Agora configura os campos personalizados como quiseres. A maioria dos plug-ins é simples e permite que os campos sejam colocados diretamente nos teus produtos WooCommerce.

Depois, há os campos nas páginas de produtos que podem ser apresentados. Alguns plugins mostram os campos nas páginas de produtos sem que precises de o pedir. Com outros plugins, poderás ter de usar shortcodes ou widgets para mostrar os campos onde quiseres. A utilização de um plug-in é uma forma rápida de adicionar campos personalizados aos produtos do WooCommerce sem ter de codificar nada. Cada plugin tem vantagens e desvantagens, pelo que deves escolher um que responda às tuas necessidades específicas. Verifica sempre se o plugin é compatível com a tua versão do WordPress e do WooCommerce.

Conclusão

É importante que os proprietários de lojas considerem cuidadosamente os tipos de campos de produto personalizados do WooCommerce que desejam adicionar e como eles serão usados e exibidos na página do produto. Isso pode ajudar a melhorar a experiência do cliente e aumentar as vendas, pois é mais provável que os clientes comprem se tiverem todas as informações necessárias sobre um produto.

add_action('woocommerce_product_options_general_product_data', 'your_custom_function');

add_action('woocommerce_single_product_summary', 'display_custom_field');

get_post_meta($product_id, 'custom_field_name', true);

Salwa Mujtaba

Salwa Mujtaba é redatora de conteúdo técnico na Cloudways. Com uma sólida formação em Ciência da Computação e experiência anterior como líder de equipe em Operações da Cloudways, ela traz uma profunda compreensão da Plataforma Cloudways para sua escrita. Salwa cria conteúdo que simplifica conceitos complexos, tornando-os acessíveis e envolventes para os leitores. Quando não está a escrever, podes encontrá-la a apreciar boa música, a ler um livro ou a passar tempo de qualidade com a sua família.

Get Connected on: Twitter Community Forum