Dominando os campos de pagamento personalizados do WooCommerce: um guia completo desde a criação até a validação

Por que é necessário personalizar os campos de pagamento?

O processo de pagamento padrão do WooCommerce coleta informações básicas e universais, como nome, endereço, telefone e e-mail. No entanto, quando o seu negócio possui necessidades específicas, essas informações se tornam insuficientes. Ao adicionar campos personalizados, você pode oferecer aos clientes uma experiência de compra mais personalizada e precisa.

Por exemplo, uma loja que vende bolos personalizados pode precisar que os clientes forneçam mensagens de desejo para o bolo ou indiquem se desejam velas; um negócio B2B pode precisar registrar o número de identificação fiscal da empresa do cliente ou o número do pedido; enquanto uma loja de ingressos para eventos pode precisar coletar informações de identidade dos participantes para verificação. Os campos personalizados permitem que você colete dados importantes que vão além dos processos padrão, e esses dados podem ser utilizados no processamento de pedidos, no agrupamento de clientes, em marketing personalizado e até na conformidade com as leis.

Do ponto de vista técnico, a página de pagamento do WooCommerce é um formulário composto por uma série de campos padrão, cuja estrutura é definida por ganchos de ação (Action Hooks) e ganchos de filtro (Filter Hooks). Isso significa que, através de plugins ou arquivos de funções do tema, podemos utilizar esses ganchos para “intervir” no processo de pagamento, adicionando, removendo ou modificando campos. Compreender esse mecanismo fundamental é a base para realizar qualquer tipo de personalização.

Leitura recomendada Guia completo para o desenvolvimento de um site de comércio eletrónico com o WooCommerce: desde a configuração até à implementação de funcionalidades avançadas.。

Três métodos para criar campos personalizados de pagamento

O WooCommerce oferece maneiras flexíveis de adicionar campos personalizados, e você pode escolher o método mais adequado de acordo com o seu nível técnico e suas necessidades.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Utilizar plugins para adicionar funcionalidades de forma rápida e sem a necessidade de escrever código.

Para administradores de websites que não têm familiaridade com código ou para projetos que precisam ser lançados rapidamente, o uso de plugins especializados é a maneira mais conveniente. No mercado, existem plugins excelentes como o “Checkout Field Editor for WooCommerce” ou o “WooCommerce Checkout Manager”.

Esses plugins geralmente oferecem uma interface administrativa intuitiva, que permite adicionar novos campos através de cliques e seleções. Você pode definir o tipo de campo (como caixa de texto, menu suspenso, caixa de seleção, botão de opção), rótulos, placeholders, se o campo é obrigatório, bem como a posição exata do campo na página de pagamento (na área do pedido ou na área de entrega). Não é necessário escrever nenhum código para utilizar esses plugins, o que reduz significativamente a barreira técnica e os torna adequados para a maioria das necessidades padrão. No entanto, é importante notar que eles podem aumentar a carga do site e podem não ser flexíveis o suficiente quando a lógica personalizada for muito complexa.

Adicionar campos personalizados através do código

Este é o método mais poderoso e flexível; ele permite a edição dos temas. functions.php Você pode criar um arquivo ou um plugin personalizado para implementar isso. O essencial é usar… woocommerce_checkout_fields Filter hook.

Esse hook permite que você modifique o array de campos de pagamento. Por exemplo, se você quiser adicionar um campo para inserir o nome da empresa na seção “Informações da Fatura”, pode escrever o código seguinte:

Leitura recomendada Como adicionar campos personalizados e metadados à página do produto no WooCommerce?。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

Este código adiciona um campo de texto obrigatório ao campo de fatura. O ponto-chave está no nome das chaves do array de campos (por exemplo…). billing_company_custom) e o conjunto de campos em que ele está localizado (['billing'] ou ['shipping']、['order']）。

Utilizar a funcionalidade de lógica condicional do WooCommerce

Às vezes, você deseja que um campo seja exibido apenas sob condições específicas. Por exemplo, o campo “Mensagem no Cartão de Presente” deve ser exibido somente quando o cliente escolher o serviço de “Embalagem de Presente”. Isso pode ser realizado combinando JavaScript ou utilizando plugins que suportam lógica condicional.

A implementação puramente em código geralmente requer a ajuda de… woocommerce_after_checkout_billing_form ou woocommerce_after_checkout_shipping_form É possível usar “ganchos” (hooks) para exibir a estrutura HTML dos campos e escrever scripts em jQuery para monitorar alterações em outros campos (como caixas de seleção), controlando assim a exibição ou ocultação do campo alvo. No entanto, esse método exige um certo nível de conhecimento em JavaScript. Uma maneira mais simples é utilizar plugins avançados de gerenciamento de campos que oferecem funcionalidades para definição de lógicas de condições de forma visual.

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

Verificar e salvar os dados dos campos personalizados.

Apenas exibir os campos na página não é suficiente; garantir a validade dos dados e salvá-los de forma segura no banco de dados é um passo de extrema importância.

Validação de dados no front-end e no back-end

Para evitar a submissão de dados inválidos ou maliciosos, é necessário realizar a validação no lado do servidor (back-end). Isso é feito através de… woocommerce_checkout_process Implementado através de ganchos de ação (action hooks).

Continuando com o exemplo anterior, se adicionarmos… billing_company_custom Este é um campo obrigatório; precisamos garantir que o cliente não o deixe em branco.

Leitura recomendada Desenvolvimento prático do WooCommerce: construir um site de comércio eletrónico profissional a partir do zero。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

wc_add_notice() A função exibirá uma mensagem de erro no topo da página de pagamento, impedindo o envio do pedido até que o usuário corrija o erro. Você pode implementar lógicas de validação mais complexas nessa função, como verificar o formato do e-mail, a faixa de números ou a correspondência com expressões regulares.

Salve os dados dos campos no pedido.

Após a validação, precisamos salvar o valor dos campos personalizados nos metadados do pedido (Order Meta), para que possam ser visualizados posteriormente no backend e em e-mails. Isso requer o uso de… woocommerce_checkout_update_order_meta Action Hook.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

update_post_meta() A função salva os valores dos campos após a limpeza na forma de pares de chave-valor. wp_postmeta Na tabela, os nomes das chaves geralmente começam com um underline (_), como por exemplo… _billing_company_customIsso ajuda a considerá-lo como metadados “ocultos” em certas interfaces de backend.

Exibir dados de campos no front-end e no back-end.

Após o salvamento dos dados, é necessário garantir que eles possam ser visualizados e gerenciados em várias localizações importantes.

Mostrar nos detalhes do pedido e no e-mail.

Para que tanto o dono da loja quanto os clientes possam ver as informações salvas, precisamos exibi-las na página de detalhes do pedido no painel de controle, bem como enviá-las por e-mail aos clientes e administradores.

Para modificar os detalhes de um pedido no painel de administração, você pode utilizar os recursos disponíveis nesse ambiente. woocommerce_admin_order_data_after_billing_address Gancho:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'\n'.__('Nome da empresa personalizado').':</strong> '. $company_custom '.'</p>';
    }
}

Da mesma forma, use… woocommerce_email_order_meta_fields O filtro pode adicionar esse campo ao conteúdo do e-mail de pedido.

Exibir no visualizador de pedidos de “Minha Conta”.

Quando os clientes visualizam os detalhes de seus pedidos anteriores na página da sua conta, eles também devem conseguir ver as informações que forneceram na época. Isso é possível através de… woocommerce_order_details_after_order_table Implementação de ganchos de ação (Action Hooks):

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'\n'.__('Informações adicionais').'</h2>'; echo '
        echo '<table class="woocommerce-table shop_table extra_info"><tbody>'; echo '
        echo '<tr><th>'\n'.__('Nome da empresa personalizado').':</th><td>'. $company_custom '.'</td></tr>'; echo '
        echo '</tbody></table>';
    }
}

resumos

Adicionar campos personalizados ao processo de checkout do WooCommerce é um processo que envolve desde a análise de requisitos, desenvolvimento e implementação até a gestão de dados. O ponto-chave é entender e utilizar o sistema de ganchos (hooks) do WooCommerce. woocommerce_checkout_fields Adicionar campos aos filtros e utilizá-los adequadamente. woocommerce_checkout_process A ação foi verificada e aprovada. woocommerce_checkout_update_order_meta Os dados são salvos após as ações serem realizadas e, em seguida, são exibidos em diferentes locais: no backend, por e-mail e no frontend do usuário, utilizando vários mecanismos de exibição. Para iniciantes, é recomendável começar com plugins confiáveis; no entanto, para desenvolvedores que buscam um alto nível de personalização e desempenho, a programação é a melhor opção. Independentemente do método escolhido, um design de fluxo de dados claro e verificações rigorosas são essenciais para garantir a estabilidade das funcionalidades e a melhoria da experiência do usuário.

Perguntas frequentes Perguntas frequentes

Por que os campos personalizados adicionados não são exibidos na página de pagamento?

Por favor, siga os passos abaixo para realizar a verificação: Primeiramente, confira se o seu código foi adicionado corretamente ao tema. functions.php O problema pode estar no arquivo ou no plugin personalizado, e também pode ser devido a erros de sintaxe. Em segundo lugar, verifique se as chaves do array de campos estão corretamente aninhadas. $fields['billing']、$fields['shipping'] ou $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

Como definir um campo personalizado como opcional ou obrigatório?

Ao adicionar campos através do código, você pode definir suas propriedades no array de campos. 'required' => true ou 'required' => falseSe um campo já é obrigatório, mas você deseja torná-lo opcional, basta alterar a configuração correspondente. woocommerce_checkout_fields Na função de filtro, esse campo foi processado (ou modificado) de alguma forma. required Basta alterar o parâmetro para `false`. Por favor, note que, após a alteração, também será necessário ajustar ou remover as partes relevantes do código de acordo com as novas configurações. woocommerce_checkout_process A lógica de validação contida nisso.

Onde os dados dos campos personalizados são armazenados no banco de dados?

Os valores dos campos personalizados são armazenados principalmente no banco de dados do WordPress. wp_postmeta Nos bancos de dados, as tabelas (cujos prefixos podem ser diferentes) contêm registros, e cada registro é identificado de forma única. post_id(Referente ao ID do pedido) e wp_posts Os registros de pedidos na tabela estão associados entre si através de… meta_key(O nome da chave que você utilizou ao salvar o arquivo, por exemplo…) _billing_company_custom) para identificar.meta_value Então, o valor real do campo de armazenamento é o que é armazenado. Você pode acessar esse valor através de ferramentas de gerenciamento de banco de dados ou do próprio WordPress. get_post_meta() A função consulta esses dados.

É possível exibir diferentes campos personalizados dependendo do produto?

Sim, mas isso requer uma lógica mais complexa. Um método comum é: primeiro, adicionar uma categoria personalizada ou um campo de metadados ao produto para identificar seu tipo. Em seguida, na página de pagamento, utilizar essa informação para processar a transação de forma adequada. woocommerce_after_checkout_form Gere o HTML de todos os campos personalizados possíveis de uma forma adequada (por exemplo, usando ganchos ou métodos semelhantes), mas oculte-os por padrão com CSS. Em seguida, escreva um script JavaScript que monitorize as alterações no conteúdo do carrinho de compras ou a seleção de produtos específicos, e exiba ou oculte dinamicamente os grupos de campos correspondentes de acordo com o tipo de produto no carrinho de compras atual. Por fim, ao realizar a validação e o salvamento no lado backend, também é necessário processar os dados dos campos de forma condicional, com base no tipo de produto.