2 maneiras eficazes de personalizar as páginas de checkout do WooCommerce
Publicados: 2021-03-29Todos os anos, as marcas de comércio eletrônico perdem US$ 18 bilhões em receita de vendas devido ao abandono de carrinho. Uma das causas principais está no complicado processo de checkout.
A página de checkout serve como um portão final para transformar navegadores em clientes. Uma página de checkout ideal deve garantir uma transação tranquila para os usuários do início ao fim. Se você deseja gerar mais conversões e melhorar os resultados de suas lojas, otimizar sua página de checkout do WooCommerce é uma obrigação!
Neste artigo, explicaremos por que você deve personalizar as páginas de checkout do WooCommerce. Além disso, 2 maneiras eficazes de estilizar e alavancar sua página de checkout também são apresentadas.
Vamos começar!
- Conheça as páginas de checkout do WooCommerce
- Por que você deve personalizar as páginas de checkout do WooCommerce
- Como personalizar manualmente as páginas de checkout do WooCommerce com código
- Editar páginas de checkout do WooCommerce usando plugins
Conheça as páginas de checkout do WooCommerce
Por padrão, a página de checkout do WooCommerce parece bastante monótona e simples. Seu dever não é mais do que exigir que os compradores insiram algumas informações básicas, incluindo nome e sobrenome, endereço, números de telefone, endereço de e-mail, notas de pedido e detalhes de cobrança, etc. 
Embora esses detalhes sejam essenciais para que os sites processem os dados de pagamento e para que os clientes concluam a compra, eles não ajudam a aumentar a conversão ou reduzir o abandono do carrinho de compras.
Além disso, a página de checkout padrão não visa as principais informações, além de não apresentar nenhuma ordem estratégica. É por isso que você precisa fazer alguns ajustes na sua página de checkout, tanto no design quanto no conteúdo.
Antes de mergulharmos em 2 maneiras eficazes de personalizar as páginas de checkout do WooCommerce, vamos discutir mais os benefícios da personalização da página de checkout.
Por que você deve personalizar as páginas de checkout do WooCommerce
O primeiro e mais importante benefício é fornecer compras rápidas e fáceis, que proporcionam uma experiência de compra on-line perfeita para os clientes.
Ao personalizar a página de checkout, você pode varrer toda a penugem e se concentrar apenas nos detalhes essenciais. Pedir aos clientes que concluam o processo de checkout com muitas entradas de campo em várias páginas pode deixá-los sem fôlego. Isso levará a uma grande chance de queda de página.
Além disso, tentar personalizar as páginas de checkout do WooCommerce dá à sua loja uma aparência única e profissional. Permanecer o padrão faz com que seu site afunde como uma pedra entre milhares de lojas WooCommerce por aí. Otimizar sua página de checkout, incluindo o design, fará com que sua loja se destaque da multidão e cause um alvoroço nos clientes.
Em suma, essas ideias estão trabalhando para o mesmo objetivo: matar o abandono de carrinho.
Embora dificilmente os compradores em lojas físicas abandonem seus carrinhos, o abandono em carrinhos de compras online é bastante frequente. Em que, as taxas médias de abandono de carrinho para páginas de checkout chegam a 87%.
E de acordo com a pesquisa do instituto Baymard, entre os motivos de abandono durante o checkout, o processo de checkout muito longo ou complicado leva 27%. 
Como resultado, para diminuir a taxa de desistência do carrinho de compras, você deve prestar atenção à experiência do usuário no processo “antes da finalização da compra”.
Existem várias maneiras de fornecer uma melhor experiência ao usuário, como:
- Alterando modelos e designs de checkout
- Adicionando, removendo e reorganizando campos
- Tornando os campos obrigatórios opcionais
- Otimizando placeholder e rótulos
- Acionando custos de frete grátis
- Criando o checkout de uma página
Neste tutorial, vamos nos concentrar na otimização dos campos de checkout. Continue lendo nas próximas seções para saber como personalizar as páginas de checkout do WooCommerce com e sem códigos.
Como personalizar manualmente as páginas de checkout do WooCommerce com código
Se você é um especialista em tecnologia do WordPress e se sente confiante ao tocar em arquivos PHP e Javascript, pode editar livremente sua página de checkout usando códigos personalizados.
Forneceremos alguns snippets de código para editar os campos de checkout, incluindo alterar o texto do placeholder, adicionar e remover campos, bem como tornar um campo obrigatório opcional. Não se preocupe, ele não vai bater seu cérebro para fora!
Editar os campos de check-out
Fazendo uso do arquivo functions.php do seu site e filtros WooCommerce para editar seus campos de checkout. Como você pode não saber, o WooCommerce oferece uma lista de ações e filtros que permitem personalizar os campos de checkout quase como desejar, a saber:
- woocommerce_checkout_fields
- woocommerce_billing_fields
- Woocommerce_shipping_fields
- woocommerce_checkout_before_order_review
- woocommerce_checkout_before_customer_details
- woocommerce_after_checkout_form
Em seguida, como usar o filtro woocommerce_checkout_fields permitirá que você substitua qualquer campo, mostraremos como se conectar a ele e alterar o texto exibido, adicionar e remover campos completamente.
Alterar texto do espaço reservado
Supondo que vamos alterar o texto do placeholder nos campos order_comments. Aqui está o que parece por padrão:
_x('Notas sobre seu pedido, por exemplo, notas especiais para entrega.', 'placeholder', 'woocommerce')Para alterá-lo, adicione este trecho de código ao seu arquivo functions.php:
// Enganchar
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Nossa função hooked in - $fields é passada através do filtro!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'Meu novo placeholder';
retornar $ campos;Adicionar campos à página de checkout do WooCommerce
- Insira o seguinte código em seu arquivo function.php para começar a editar sua página de checkout:
<?php
/**
* Adicione o campo à página de checkout
*/
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
função customize_checkout_field($checkout)
{
echo '<div><h2>' . __('Cabeçalho') . '</h2>';
woocommerce_form_field('customized_field_name', array(
tipo' => 'texto',
'classe' => array(
'my-field-class form-row-wide'
),
'label' => __('Personalizar campo adicional'),
'placeholder' => __('Orientação'),
'obrigatório' => verdadeiro,
), $checkout->get_value('customized_field_name'));
echo '</div>';
} Um campo adicional aparecerá na sua página de checkout após adicionar este código: 
2. Adicione o código abaixo para validação dos dados.
<?php
/**
* Processo de checkout
*/
add_action('woocommerce_checkout_process', 'customise_checkout_field_process');
função customize_checkout_field_process()
{
// se o campo estiver definido, caso contrário, mostra uma mensagem de erro.
if (!$_POST['customised_field_name']) wc_add_notice(__('Digite o valor.') , 'error');
}3. Adicionamos campos à página de checkout, bem como a verificação de validação. É hora de garantir que todas as entradas do cliente sejam salvas corretamente.
Isso pode ser feito usando o seguinte código:
<?php
/**
* Atualizar valor do campo
*/
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');
função customize_checkout_field_update_order_meta($order_id)
{
if (!empty($_POST['customised_field_name'])) {
update_post_meta($order_id, 'Algum campo', repair_text_field($_POST['customised_field_name']));
}
}Remover campos da página de checkout do WooCommerce
Usando o código abaixo:
// Enganchar
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Nossa função hooked in - $fields é passada através do filtro!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);
retornar $ campos;Tornar um campo obrigatório opcional
Digamos que você venda os produtos virtuais e queira tornar opcional o campo "Endereço" na seção Faturamento. Simplesmente adicione o seguinte código ao arquivo functions.php do seu tema filho.
add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
function wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['required'] = false;
retornar $ campos;
}Nota: Considerando que quaisquer erros deixados no arquivo function.php podem fazer com que seu site seja desabilitado, você deve fazer backup do seu site antes de fazer qualquer alteração. Recomendamos uma maneira livre de riscos, que se refere ao uso do arquivo function.php do seu tema filho.
Edite a página de checkout do WooCommerce usando plugins
Caso você não seja um técnico, buscar a ajuda de plugins poderosos sempre será uma ideia inteligente.
Entre milhares de plugins de otimização do WooCommerce, o WooCommerce Checkout Manager é um hotshot para personalizar as páginas de checkout do WooCommerce. 
Desenvolvido pela Quadlayers, este plugin gratuito e poderoso é definitivamente aquele que você não quer deixar na mesa.
O plug-in permite que você personalize livremente as páginas de checkout do WooCommerce incluindo/excluindo campos, tornando os campos obrigatórios/opcionais e estendendo os dados de cobrança com facilidade. Você pode melhorar a experiência do usuário e aumentar as vendas criando campos condicionais. Fora isso, não limita você ao número de tipos de upload de arquivo. Você pode permitir que os clientes carreguem qualquer arquivo de vários tipos sem esforço/sem esforço.
Além disso, sua interface de usuário também merece um polegar para cima, pois todas as modificações são feitas simplesmente ativando as opções do menu.
Então, como otimizar sua página de checkout do WooCommerce com o WooCommerce Checkout Manager?
#1 Adicionar novos campos à página de checkout
O WooCommerce Checkout Manager permite que você crie campos personalizados para a página de checkout nas seções Faturamento, Envio e Campos adicionais.
Depois de ter o plugin instalado e ativado, no seu painel de administração, vá para WooCommerce > Checkout > Billing.
- Selecione “Adicionar novo campo”.
- Preencha o nome do campo, o rótulo e o espaço reservado.
- Escolha os tipos de campo.
- Clique em “Salvar” para atualizar todas as alterações.
#2 Excluir campos das páginas de checkout
Você pode remover campos livremente alternando o botão “Desativar”. 
#3 Reorganizar a posição do campo de check-out
Alterando a ordem padrão dos campos de checkout:
- No campo que deseja mover, clicando no botão de 3 linhas verticais.
- Segure esse botão, arraste e solte o campo na posição desejada.
- Clique em “Salvar alterações” na parte inferior da página.
Otimize sua página de checkout do WooCommerce agora!
Modificar a página de checkout do WooCommerce pode fazer uma enorme diferença em suas lojas e levar seu processo de checkout para o próximo nível. Mesmo a menor personalização também abre caminho para acelerar o processo de checkout, melhorar a experiência de compra e aumentar as vendas.
Neste post, mostramos 2 maneiras de personalizar as páginas de checkout do WooCommerce. Você pode escolher uma solução de plug-in ou inserir trechos de código diretamente no arquivo function.php.
Caso você queira adicionar mais otimização à sua loja, confira este guia sobre como adicionar campos personalizados às páginas de produtos WooCommerce para obter mais informações.
Se você tiver alguma dúvida sobre a otimização da página de checkout do WooCommerce, deixe um comentário e entraremos em contato com você o mais rápido possível.