Como editar os detalhes de cobrança da página de checkout do WooCommerce
Publicados: 2021-02-22
Existem várias maneiras de editar os detalhes de cobrança no WooCommerce. Neste tutorial, quero destacar a maneira como você pode editar os detalhes de cobrança para remover os campos ou remover o requisito.
No post anterior, compartilhei como desabilitar o campo CEP/Código Postal na página de checkout ou como remover a validação do CEP/Código Postal .
Como editar detalhes de cobrança WooCommerce (Remover campos, desativar validação, adicionar espaços reservados personalizados e adicionar rótulos de formulário personalizados)
Hoje, quero mostrar como editar os detalhes de cobrança e remover os campos que você não deseja que sejam exibidos aos seus clientes.
WooCommerce Editar detalhes de cobrança usando plug-in gratuito
Existem mais de uma dúzia de plugins gratuitos e premium que você pode usar para editar os detalhes de cobrança do WooCommerce. 
Cada um desses plugins possui recursos exclusivos e design de interface. O melhor plugin gratuito para editar detalhes de cobrança no WooCommerce é o Checkout Field Editor (Checkout Manager) para WooCommerce.
Este plug-in permite que você edite os campos principais de cobrança, envio e adicionais no checkout do WooCommerce.
No formulário de edição, você pode adicionar opções de campos personalizados, como: Nome, Tipo, Etiqueta, Espaço reservado, Classe, Classe de etiqueta, regras de validação etc. (a disponibilidade dessas opções pode mudar com base nos tipos de campo).
WooCommerce Editar detalhes de cobrança usando snippet de código
Você também pode editar os detalhes de cobrança na página de checkout do WooCommerce adicionando um trecho de código ao arquivo functions.php do seu tema.
Remover campos de cobrança do WooCommerce Checkout
Primeiro, você pode remover os campos de faturamento que não gosta usando o snippet de código abaixo:
/**
* Editar detalhes de cobrança para remover campos que você não deseja
**/
function njengah_remove_checkout_fields( $fields ) {
// Campos de cobrança
unset( $fields['billing']['billing_company']);
unset( $fields['billing']['billing_email']);
unset( $fields['billing']['billing_phone']);
unset( $fields['billing']['billing_state']);
unset( $fields['billing']['billing_first_name']);
unset( $fields['billing']['billing_last_name']);
unset( $fields['billing']['billing_address_1']);
unset( $fields['billing']['billing_address_2']);
unset( $fields['billing']['billing_city']);
unset( $fields['billing']['billing_postcode']);
retornar $ campos;
}
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields' );
Você pode remover todos os campos e adicionar campos personalizados ou remover do snippet de código abaixo daqueles que deseja manter.
Esta é a maneira mais rápida de remover campos de cobrança da página de checkout do WooCommerce sem usar um plug-in.
Por exemplo, se quisermos mostrar apenas o nome, sobrenome e e-mail apenas nos detalhes de faturamento, alteraremos o código para o snippet de código abaixo:
function njengah_remove_checkout_fields_keep_email_name( $fields ) {
// Campos de cobrança
unset( $fields['billing']['billing_company']);
unset( $fields['billing']['billing_phone']);
unset( $fields['billing']['billing_state']);
unset( $fields['billing']['billing_address_1']);
unset( $fields['billing']['billing_address_2']);
unset( $fields['billing']['billing_city']);
unset( $fields['billing']['billing_postcode']);
retornar $ campos;
}
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_keep_email_name' );
Remover campos de cobrança e campos de envio do WooCommerce Checkout
Você também pode estender essa lógica para remover os campos de envio, bem como os campos de cobrança . O código completo que removeria os campos de cobrança e os campos de envio é o seguinte:
function njengah_remove_checkout_fields_billing_shipping( $fields ) {
// Campos de cobrança
unset( $fields['billing']['billing_company']);
unset( $fields['billing']['billing_email']);
unset( $fields['billing']['billing_phone']);
unset( $fields['billing']['billing_state']);
unset( $fields['billing']['billing_first_name']);
unset( $fields['billing']['billing_last_name']);
unset( $fields['billing']['billing_address_1']);
unset( $fields['billing']['billing_address_2']);
unset( $fields['billing']['billing_city']);
unset( $fields['billing']['billing_postcode']);
// Campos de envio
unset( $fields['shipping']['shipping_company']);
unset( $fields['shipping']['shipping_phone'] );
unset( $fields['shipping']['shipping_state'] );
unset( $fields['shipping']['shipping_first_name'] );
unset( $fields['shipping']['shipping_last_name'] );
unset( $fields['shipping']['shipping_address_1'] );
unset( $fields['shipping']['shipping_address_2'] );
unset( $fields['shipping']['shipping_city']);
unset( $fields['shipping']['shipping_postcode'] );
retornar $ campos;
}
add_filter('woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping');
Remover campos de cobrança do WooCommerce Checkout, campos de envio e notas de pedido
Você também pode remover o campo de nota do pedido localizado abaixo da seção de cobrança e da seção de envio usando a mesma lógica, mas adicionando a opção de remoção order_comments como no snippet de código combinado abaixo:
function njengah_remove_checkout_fields_billing_shipping_order( $fields ) {
// Campos de cobrança
unset( $fields['billing']['billing_company']);
unset( $fields['billing']['billing_email']);
unset( $fields['billing']['billing_phone']);
unset( $fields['billing']['billing_state']);
unset( $fields['billing']['billing_first_name']);
unset( $fields['billing']['billing_last_name']);
unset( $fields['billing']['billing_address_1']);
unset( $fields['billing']['billing_address_2']);
unset( $fields['billing']['billing_city']);
unset( $fields['billing']['billing_postcode']);
// Campos de envio
unset( $fields['shipping']['shipping_company']);
unset( $fields['shipping']['shipping_phone'] );
unset( $fields['shipping']['shipping_state'] );
unset( $fields['shipping']['shipping_first_name'] );
unset( $fields['shipping']['shipping_last_name'] );
unset( $fields['shipping']['shipping_address_1'] );
unset( $fields['shipping']['shipping_address_2'] );
unset( $fields['shipping']['shipping_city']);
unset( $fields['shipping']['shipping_postcode'] );
// Campos de pedido
unset( $fields['order']['order_comments']);
retornar $ campos;
}
add_filter( 'woocommerce_checkout_fields', 'njengah_remove_checkout_fields_billing_shipping_order');
Requisito ou validação de detalhes de cobrança do WooCommerce Editar
Quando um dos campos de cobrança não é preenchido, o WooCommerce gera um erro como o erro mais comum – Código postal de cobrança não é um código postal / CEP válido.
Isso ocorre porque, por padrão, há um recurso de validação nos campos de checkout de cobrança do WooCommerce.
Para resolver esse problema e evitar que esses erros apareçam quando o campo fica vazio, você precisa remover a validação dos detalhes de cobrança.
O trecho de código abaixo irá remover a validação do campo Telefone de cobrança, este código deve ser adicionado ao arquivo functions.php do seu tema ativo.
/**
* Exemplo para remover a validação do campo de cobrança
**/
add_filter( 'woocommerce_billing_fields', 'njengah_remove_phone_field_validation');
function njengah_remove_phone_field_validation( $fields ) {
$fields['billing_phone']['required'] = false;
retornar $ campos;
}
Você pode estender essa lógica para mais campos como nome, email e assim por diante. Você simplesmente precisa substituir a seguinte linha de código pelos ids de campo do campo do qual deseja remover a validação.
$fields['billing_phone']['required'] = false;
WooCommerce Editar detalhes de cobrança placeholders e rótulos
Outra maneira de editar os detalhes de cobrança do WooCommerce é alterar os rótulos e os marcadores de formulário da página de checkout padrão do WooCommerce. Você pode conseguir isso usando o snippet de código abaixo:
add_filter('woocommerce_checkout_fields', 'njengah_edit_checkout_placeholders_labels');
function njengah_edit_checkout_placeholders_labels($fields){
$fields['billing']['billing_company']['placeholder'] = 'Espaço reservado personalizado';
$fields['billing']['billing_company']['label'] = 'Etiqueta personalizada';
retornar $ campos;
}
Conclusão
Neste tutorial, destacamos as várias maneiras de editar os detalhes de cobrança do WooCommerce para personalizar a página de checkout do WooCommerce para atender às suas necessidades. É importante lembrar que esses snippets de códigos funcionam da mesma forma que os plugins que editam os detalhes de cobrança, detalhes de envio e as notas do pedido.
Também é aconselhável que você sempre adicione esses trechos de código a um tema filho do tema ativo. Se você não tem um tema filho, você pode aprender sobre como criar um tema filho usando este post – criar tema filho do Storefront.
Existem várias maneiras de personalizar o WooCommerce, mas o mais comum é ocultar os recursos que você não gosta, compartilhei um guia abrangente sobre como ocultar a maioria dos recursos em sua loja WooCommerce, Ultimate WooCommerce Hide Guide. Este pode ser um ótimo lugar para você começar com a personalização do WooCommerce.
Se você estiver usando o tema padrão do WooCommerce – tema Storefront, você pode aprender com as mais de 80 dicas de personalização do Storefront sobre como fazer com que sua loja WooCommerce tenha uma aparência profissional.
Por fim, estou sempre disponível para ajudá-lo com qualquer problema do WooCommerce ou corrigir quaisquer erros em seu site, se você precisar contratar um especialista em WordPress ou um desenvolvedor de WooCommerce.
Artigos semelhantes
- Como adicionar um campo oculto na página de checkout do WooCommerce
- Como obter detalhes do pedido após o checkout no WooCommerce
- Como ocultar o preço quando estiver esgotado no WooCommerce
- Como limpar o carrinho ao sair no WooCommerce
- Como remover o campo de número de telefone do checkout WooCommerce
- Como remover os detalhes de cobrança do WooCommerce Checkout
- Como estilizar a página de checkout do WooCommerce
- Como obter o ID do produto na página de checkout ou na página de pedidos no WooCommerce
- Lista de Hooks WooCommerce » Global, Carrinho, Checkout, Produto
- Como corrigir o código postal de cobrança não é um código postal / CEP válido
- Como usar do_shortcode no WordPress (PHP)
- WooCommerce Ocultar Informações Adicionais Checkout
- Como obter a lista suspensa do país de checkout do WooCommerce
- Como adicionar o país padrão do WooCommerce Checkout
- Como alterar os endpoints de checkout WooCommerce
- Como verificar se é página de checkout WooCommerce
- Como remover o título da categoria do produto WooCommerce
- Como obter o ID do pedido na página de checkout WooCommerce
- Como adicionar produtos ao carrinho programaticamente no WooCommerce