Como você adiciona campos personalizados a produtos WooCommerce?

Dependendo do seu modelo de negócios, talvez seja necessário adicione campos personalizados ao seu WooCommerce produtos.

Podem ser campos de texto, caixas de seleção, botões de opção ou qualquer outro tipo de entrada que você possa imaginar. Você pode adicioná-los para que apareçam apenas no backend ao gerenciar seus pedidos, ou pode exibi-los em seu site e em e-mails. Nossos campos personalizados não serão adicionados em uma metacaixa personalizada como de costume. Eles serão exibidos na área “Dados do produto”, ao lado dos campos normais do produto.

Neste artigo, orientarei você na adição de um campo personalizado a um produto WooCommerce – para um SKU personalizado. Explicarei como você pode adicionar esse campo às notificações por email do administrador para novos pedidos. Neste exemplo, você dirige uma empresa de dropshipping.

Por que você deseja adicionar campos personalizados aos produtos WooCommerce

Ter campos personalizados do WooCommerce permitirá que você insira os SKUs do seu fornecedor enquanto mostra seus próprios SKUs aos seus clientes. Dessa forma, você pode processar novos pedidos com mais rapidez e também pesquisar no back-end do WooCommerce seus SKUs personalizados.

WooCommerce é um dos plugins mais fáceis de estender e desde que foi adquirido pela Automattic em 2015, não vai a lugar nenhum. Portanto, é seguro dizer que os ganchos e funções que usaremos neste artigo estarão disponíveis no futuro.

Venda seus produtos online, sem preocupações

Oficialmente recomendada pela WooCommerce, nossa hospedagem é feita para negócios online como o seu

O que é um gancho?

O WordPress fornece ganchos como uma forma de adicionar funcionalidades ou designs personalizados ao seu site em locais predefinidos (por exemplo, no cabeçalho ou rodapé) ou em ações predefinidas (por exemplo, adicionar um produto ao carrinho). Eles permitem que os desenvolvedores implementem facilmente novos recursos sem ter que reescrever todo o tema ou código do plugin.

Ler:  Como a velocidade da página afeta o SEO

Ganchos podem ser usados ​​como Ações (esses ganchos fazem alguma coisa) ou Filtros (esses ganchos manipulam dados). Usaremos alguns ganchos de ação hoje.

Como adicionar meta de produto personalizado WooCommerce

Veja como adicionar uma meta box personalizada em um produto WooCommerce. Iremos mergulhar no código primeiro. A API WooCommerce nos permite aproveitar funções integradas que adicionam todos os tipos de campos de entrada à área do produto. Especificamente, você pode adicionar seis tipos diferentes de entradas:

  • Campos de texto
  • Selecione caixas
  • Caixas de seleção
  • Botões do rádio
  • Áreas de texto
  • Campos ocultos

Cada um desses campos pode ser adicionado às guias regulares de produtos do WooCommerce várias vezes ou em qualquer combinação que você escolher. Essas guias são:

  • Em geral
  • Inventário
  • Envio
  • Produtos vinculados
  • Atributos
  • Variações
  • Avançado

Qualquer uma dessas guias vem com ganchos específicos que podemos usar para adicionar nossos campos personalizados a essa guia. Descreverei esses ganchos com mais detalhes em breve, mas primeiro quero salientar que nem todas as guias são exibidas para cada tipo de produto. Por exemplo, a guia “Variações” não é exibida para tipos de produtos “Simples” e a guia “Envio” está ausente se o seu produto for “Externo”.

Você pode usar vários ganchos para adicionar seus campos a qualquer uma destas guias:

Guia geral
woocommerce_product_options_pricing
woocommerce_product_options_downloads
woocommerce_product_options_tax
woocommerce_product_options_general_product_page

Guia Inventário
woocommerce_product_options_sku
woocommerce_product_options_stock
woocommerce_product_options_stock_fields
woocommerce_product_options_stock_status
woocommerce_product_options_sold_individually
woocommerce_product_options_inventory_product_data

Guia Envio
woocommerce_product_options_dimensions
woocommerce_product_options_shipping

Guia Produtos Vinculados
woocommerce_product_options_relacionado

Guia Atributos
woocommerce_product_options_attributes

Guia Variações
woocommerce_variable_product_bulk_edit_actions

Guia Avançado
woocommerce_product_options_reviews
woocommerce_product_options_advanced

Você pode encontrar o gancho apropriado para usar navegando pelos arquivos HTML dentro da pasta woocommerce/includes/admin/views. Esses arquivos constituem as metacaixas que você vê na interface de administração ao editar seus produtos.

Em nosso exemplo, usaremos o gancho woocommerce_product_options_sku para adicionar um campo para um segundo SKU logo abaixo do campo SKU existente. Para fazer isso, implementaremos funções fornecidas pela API WooCommerce.

Ler:  Como incorporar e tweetar um vídeo no Twitter

Cada função recebe uma série de argumentos, que descrevi nos pontos principais a seguir. Você pode copiar e colar cada um deles diretamente no arquivo functions.php do seu tema (certifique-se de usar um tema filho).

Adicionando um campo de texto:
https://gist.github.com/jan-koch/cfa2731ff5755fe297990269dd816e2b

Adicionando uma área de texto:
https://gist.github.com/jan-koch/7fbec8d1a0b89fd6761343a9245e77e0

Adicionando uma caixa de seleção:
https://gist.github.com/jan-koch/5dd8897b974969ed66204e92f6a05ef4

Adicionando botões de opção:
https://gist.github.com/jan-koch/c0efab4f2ec7222eab50e4646be01971

Adicionando uma caixa de seleção:
https://gist.github.com/jan-koch/312cfc891e7118f29a2fc99f13af7612

Adicionando um campo oculto:
https://gist.github.com/jan-koch/d28d02ed4885eb096642501ddcc20245

Você provavelmente já deve adivinhar que usaremos o campo de texto para armazenar nosso SKU personalizado. Para fazer isso, implementaremos a seguinte função no arquivo functions.php do tema filho:

função jk_add_custom_sku() {
$args = array(
‘label’ => __( ‘SKU personalizado’, ‘woocommerce’ ),
‘placeholder’ => __( ‘Insira o SKU personalizado aqui’, ‘woocommerce’ ),
‘id’ => ‘jk_sku’,
‘desc_tip’ => verdadeiro,
‘descrição’ => __( ‘Este SKU é apenas para uso interno.’, ‘woocommerce’ ),
);
woocommerce_wp_text_input($args);
}
add_action(‘woocommerce_product_options_sku’, ‘jk_add_custom_sku’);

Ao usar este snippet de código, você verá o campo SKU personalizado na guia “Inventário” logo abaixo do campo SKU original. Sinta-se à vontade para adaptar o rótulo e a descrição conforme necessário.

Porém, tenha cuidado ao editar o ID ‘jk_sku’, pois as funções de salvamento e exibição dependem desse ID e também precisariam ser ajustadas.

Salvando o meta do produto personalizado WooCommerce

Depois de adicionarmos o campo para o SKU personalizado, precisamos informar WooCommerce o que fazer com isso quando o produto for salvo. Por si só, o código acima não fará nada e não salvará o valor. Obviamente não é isso que queremos, então vamos estender esse código e adicionar a função de salvamento.

Para fazer isso, aproveitaremos o gancho woocommerce_process_product_meta. Com a seguinte função, seu A loja WooCommerce salvará o novo campo SKU personalizado quando você salva o produto:

função jk_save_custom_sku($post_id) {
// pega o SKU personalizado de $_POST
$custom_sku = isset( $_POST[ ‘jk_sku’ ] ) ? sanitize_text_field($_POST[ ‘jk_sku’ ] ) : ”;

// pega o produto
$produto = wc_get_produto( $post_id );

//salva o SKU personalizado usando funções integradas do WooCommerce
$produto->update_meta_data( ‘jk_sku’, $custom_sku );
$produto->salvar();
}

add_action(‘woocommerce_process_product_meta’, ‘jk_save_custom_sku’);

Aqui está uma essência contendo os dois trechos de código. Você pode adicionar o código diretamente ao seu arquivo functions.php.

Deixe-me explicar a função começando com seu ponto de gatilho, o gancho woocommerce_process_product_meta. Ele se conecta à função WC_Meta_Box_Product_Data::save, que nos permite atualizar metacampos do produto sem chamar as funções regulares “add_post_meta” ou “update_post_meta”.

Prefiro essa abordagem a usar funções regulares para manipular metacampos do WooCommerce, pois garantimos que todos os dados do produto sejam processados ​​corretamente ao salvar nossos campos personalizados do WooCommerce.”

Processamento seguro de dados e higienização de dados

Como nós, como desenvolvedores, não podemos esperar saber como o usuário usará esse novo campo, ou quão bem o site será gerenciado no futuro (por exemplo, mantendo um site atualizado ou aplicando senhas fortes), precisamos ter cuidado com o que armazenamos neste campo.

Para garantir que nossa função armazene apenas dados válidos, estamos executando o valor do campo em sanitize_text_field antes de adicioná-lo ao banco de dados.”

Acessando metacampos personalizados do produto WooCommerce no front-end ou em e-mails

Agora que implementamos com sucesso a funcionalidade de back-end do campo SKU personalizado, vamos usá-la no dia a dia de administração da loja de comércio eletrônico.

Ler:  Como usar o editor de blocos Kadence

Em nosso exemplo, usaremos o SKU personalizado e o exibiremos nos e-mails de notificação de “novo pedido” que são enviados ao administrador da loja. Isso ajudará o dono da loja a encaminhar os pedidos ao fornecedor de dropshipping e economizará muito tempo, em comparação com o gerenciamento de algum tipo de planilha, mapeando os nomes dos produtos para o SKU do fornecedor.

Para adicionar o SKU personalizado no frontend, aproveitaremos o poderoso sistema de modelos do WooCommerce. Primeiro, copiamos o arquivo email-order-items.php de wp-content/plugins/woocommerce/emails/ para wp-content/themes/your-child-theme/woocommerce/emails. Se essa pasta não existir no seu tema filho, você deverá criá-la através de FTP/SFTP.

A capacidade de substituir modelos de e-mail (assim como outros modelos, como a página de detalhes do produto) é um dos grandes benefícios de usar WooCommerce.

Simplesmente copiando o arquivo que contém o modelo da lista de itens do pedido em e-mails para a pasta de temas, você pode usar seu próprio estilo e conteúdo. Esteja ciente de que futuras atualizações do WooCommerce podem exigir que você atualize seus modelos personalizados também.

Após copiar o arquivo do template, abra-o em um editor de sua preferência (estou apenas migrando do PHPStorm para o VS Code). Você verá o modelo mostrando uma estrutura de tabela com os elementos do corpo representando cada posição do pedido. É nesse contexto que precisamos carregar o SKU personalizado de cada produto para exibi-lo.

Ler:  Principais vantagens do React JS para construir aplicativos da Web prósperos [Updated]

Felizmente para nós, o WooCommerce mostra o SKU apenas em e-mails de administrador por padrão, então não precisamos cuidar disso sozinhos.

Para exibir o campo personalizado, usaremos a função get_post_meta regular:

// carrega o SKU personalizado
$custom_sku = get_post_meta( $produto->get_id(), ‘jk_sku’, true);
if ( is_string( $custom_sku ) ) { // mostra apenas o SKU personalizado
// se estiver definido
//altere esta linha se necessário
eco “
” .wp_kses_post(“SKU personalizado: $custom_sku”);
}

Aqui está um Essência do Github contendo o modelo de e-mail completo, que você pode baixar diretamente e adicionar à pasta do seu tema.

Depois que o arquivo for adicionado, você verá este formato nos e-mails do administrador:

O SKU personalizado agora é adicionado logo abaixo do nome do produto. Você pode, é claro, alterar a posição e também o rótulo ajustando o modelo de e-mail acima para o layout de sua preferência.

Comece a adicionar campos personalizados

Neste artigo, exploramos um pouco da flexibilidade que o WooCommerce traz para a mesa. Ser capaz de adicionar campos personalizados com tanta facilidade é um dos motivos pelos quais você pode considere WooCommerce em vez de Shopify.

A aquisição pela Automattic só aumentará a importância do WooCommerce no espaço WordPress. E os esforços de empresas como a Hostinger para oferecer suporte aos usuários do WooCommerce com planos de hospedagem personalizados apenas confirmam essa tendência.

Se você quiser saber mais sobre como estender o WooCommerce, confira o Trechos de código WP Mastery página e comece a experimentar os exemplos que forneço nessa página.

Obtenha WooCommerce totalmente gerenciado da Hostinger

Com Hostinger, .

Com uma solução dedicada para hospedagem WooCommerce, você obtém:

  • Dimensionamento automatizado para manter seu site rápido durante picos de tráfego.
  • Imagens otimizadas automaticamente para tempos de carregamento rápidos.
  • Tempos de carregamento extremamente rápidos graças ao nosso CDN integrado.
  • E mais!

Veja por que os usuários nos deram um 4,6 de 5 estrelas na Trustpilot. Experimente hoje mesmo a hospedagem WooCommerce otimizada para sua loja.

Novas publicações:

Recomendação