Como personalizar a página de checkout da vitrine
Publicados: 2020-10-29
O processo de checkout em qualquer loja online é o mais importante na jornada do comprador. Isso ocorre porque é a última chance que você tem de convencer os compradores a fazer uma compra. Além disso, vale ressaltar que muitos carrinhos de compras são abandonados quando os usuários mudam de ideia na última etapa.
Personalizar a página de checkout da vitrine
Fatores como custos de envio e opções de pagamento são a principal causa de abandono de carrinho. No entanto, a página de checkout também desempenha um papel importante. Se o formulário de checkout for muito complicado ou demorar muito para ser concluído, os clientes podem comprá-lo em outro lugar. Além disso, recomendo remover os campos de checkout que solicitam informações confidenciais.
A melhor maneira de otimizar o formulário de checkout é ter os campos obrigatórios. Eles devem ser baseados na necessidade do seu negócio e no público-alvo.
Esta postagem orientará você sobre como personalizar a página de checkout para atender ao seu público-alvo e às necessidades de negócios.
Personalizando os campos de check-out
A página de checkout solicita aos clientes:
- Detalhes de faturamento
- Primeiro nome
- Último nome
- Nome da empresa
- País
- Endereço
- Cidade Cidade
- Distrito
- Código de Endereçamento Postal / CEP
- Telefone
- Endereço de e-mail
- Notas de pedidos
A melhor maneira de personalizar os campos de checkout é usando snippets de código. Para ver todas as classes e seletores, use o inspetor do navegador em seu site para encontrar o elemento exato que deseja personalizar.
<body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div id="customer_details" class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div id="order_review" class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div id="pagamento"> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">
Etapas para alterar a cor de fundo e o layout das caixas de entrada de texto e dar-lhes cantos arredondados
Aqui estão os passos simples que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Customize .
- Navegue até CSS adicional na barra lateral esquerda que aparece.
- Adicione o CSS
input[type="text"] {
raio da borda: 10px !importante;
cor de fundo: aqua !importante;
}- Este é o resultado:
- Para alterar o layout dos campos, adicione o seguinte código CSS:
/****************CONFIRA***************/
.woocommerce formulário .form-row {
largura: 100% !importante;
}
.woocommerce-checkout #pagamento div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
largura: 100% !importante;
preenchimento: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
largura: 100%;
altura: 30px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
flutuar: esquerda;
largura: 100%;
}
.custom-checkout h3 {
cor de fundo: #165f1c; /**** MUDAR A COR QUE DESEJA USAR PARA O FUNDO DO TÍTULO ****/
largura: 45%;
alinhamento de texto: centro;
preenchimento: 10px;
raio da borda: 5px;
margem superior: 50px;
cor: #FFF;
flutuar: direita;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
preenchimento: .6180469716em;
cor de fundo: #f2f2f2;
cor: #43454b;
contorno: 0;
borda: 0;
-webkit-aparência: nenhum;
raio da borda: 2px;
dimensionamento de caixa: caixa de borda;
peso da fonte: 400;
border:solid 2px #e4e4e4;
}
#wc_checkout_add_ons {
largura: 45%;
flutuar: direita;
alinhamento de texto: centro;
}
@media tela e (largura mínima: 980px) {
.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {width:100%;}
.woocommerce .col2-set, .woocommerce-page .col2-set {
largura: 45%;
flutuar: esquerda;
}
.woocommerce-checkout-review-order{
largura: 45%;
flutuar: direita;
}
}
@media tela e (largura máxima: 979px) {
.custom-checkout h3 {
largura: 100%;
}
}- Este é o resultado:
Etapas para remover um campo de checkout
Aqui estão os passos que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema para remover o campo de checkout.
- Adicione o seguinte código ao arquivo php . No entanto, colar o código inteiro removerá todos os campos da página de checkout, portanto, inclua apenas os campos que deseja remover .
/**
Remova todos os campos possíveis
**/
function wc_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']);
// 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', 'wc_remove_checkout_fields');Vale ressaltar que o campo país é obrigatório. Se você remover este campo, os pedidos dos clientes não poderão ser concluídos. Isso ocorre porque você receberá um erro dizendo: "Digite um endereço para continuar".
Etapas para tornar um campo obrigatório não obrigatório
Neste exemplo, editarei o campo Telefone de cobrança. Aqui estão os passos que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema para tornar um campo obrigatório não obrigatório.
- Adicione o seguinte código à função. arquivo php
add_filter('woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
retornar $ campos;
}- Este é o resultado:
Etapas para alterar rótulos e marcadores de campo de entrada
Aqui estão os passos simples que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página do Editor de Temas for aberta, procure o arquivo de funções do tema para alterar os rótulos dos campos de entrada e os espaços reservados.
- Adicione o seguinte código ao arquivo php
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
função custom_override_checkout_fields($fields)
{
unset($fields['billing']['billing_address_2']);
$fields['billing']['billing_company']['placeholder'] = 'Nome da empresa';
$fields['billing']['billing_company']['label'] = 'Nome da empresa';
$fields['billing']['billing_first_name']['placeholder'] = 'Nome';
$fields['shipping']['shipping_first_name']['placeholder'] = 'Nome';
$fields['shipping']['shipping_last_name']['placeholder'] = 'Sobrenome';
$fields['shipping']['shipping_company']['placeholder'] = 'Nome da empresa';
$fields['billing']['billing_last_name']['placeholder'] = 'Sobrenome';
$fields['billing']['billing_email']['placeholder'] = 'Endereço de e-mail ';
$fields['billing']['billing_phone']['placeholder'] = 'Telefone ';
retornar $ campos;
}- Este será o resultado:
Conclusão
Em resumo, compartilhei como você pode personalizar os campos de checkout na página de checkout. Otimizar esta página é importante, pois é a última chance que você tem de convencer os compradores a fazer uma compra.
Além disso, você precisa coletar as informações necessárias com base na necessidade do negócio e no público-alvo. Isso ajudará você a reduzir o abandono de carrinho e melhorar significativamente as vendas em sua loja.
No entanto, se você não puder modificar os trechos de código que compartilhei, contrate um desenvolvedor para que você não destrua seu site.
Artigos semelhantes
- Como adicionar um campo extra no formulário de checkout do WooCommerce
- Como ocultar o produto WooCommerce dos resultados da pesquisa
- Como vender produtos digitais com WooCommerce
- Como adicionar números GTIN em produtos no WooCommerce
- Como adicionar status de pedido personalizado no WooCommerce
- Ocultar ou remover o campo de quantidade da página do produto WooCommerce
- Como ocultar a categoria WooCommerce Storefront Theme
- Como desativar o método de pagamento para uma categoria específica
- Como ocultar o rodapé móvel do Storefront WooCommerce
- Como alterar o tema da vitrine da cor do botão
- Como alterar o número de produtos da vitrine por linha
- Como desativar as próximas guias de produtos no WooCommerce Storefront
- Como remover o tema WooCommerce Storefront de produtos relacionados
- Snippet PHP de logout do WooCommerce para criar botão de logout
- Como alterar os produtos por página WooCommerce Storefront Theme
- Como adicionar ícones de pagamento WooCommerce no rodapé [HTML]
- Como remover o carrinho do cabeçalho do tema Storefront
- Como alterar a ordem dos produtos do tema da vitrine
- Como alterar o tamanho da fonte WooCommerce Storefront Theme
- Como renomear mensagens de status de pedidos no WooCommerce