O página de checkout é uma das mais importantes em qualquer e-commerce. Pois é exatamente neste momento em que o cliente vai concretizar a compra ou não. Então, muitas vezes esse último passo possui muitos campos – o que normalmente é necessário, e acaba desmotivando e chateando alguns clientes, fazendo-os desistir de comprar seus produtos.
Pensando nisso, diversas soluções foram criadas com o intuito de tornar o processo de finalizar a compra algo muito mais fácil e dinâmico. Assim, a ideia de separar os campos do checkout em etapas passa a ser uma ideia muito atraente de ser adicionado em nosso processo de checkout.
Dividir Em Etapas Checkout WooCommerce
Se você estiver afim de melhorar a experiência dos seus clientes em sua loja virtual, vai gostar desse post. O CanalWP escolheu e testou um plugin que vai te mostrar como dividir em etapas o checkout WooCommerce.
WooCommerce MultiStep Checkout Wizard
O plugin WooCommerce MultiStep Checkout Wizard propõe uma solução bastante interessante para descomplicar o processo de checkout da sua loja virtual. É a possibilidade de em poucos minutos, dividir em etapas o checkout do WooCommerce.
Já que muitos clientes costumam desistir da compra no momento do checkout, por acharem muito complicado o processo de finalizar uma compra, tornar o preenchimento de campos algo mais lúdico é o que o plugin WooCommerce MultiStep Checkout Wizard faz.
Essa ferramenta é capaz de transformar o checkout WooCommerce em algo mais simples, pois separa e organiza os campos de finalizar uma compra em algo mais prático e bonito. Além disso, o WooCommerce MultiStep Checkout Wizard traz uma solução 100% responsiva, customizável e com 3 estilos diferentes para o layout dos formulários.
Configurando O Sistema
Com o plugin WooCommerce MultiStep Checkout Wizard devidamente instalado e ativado em sua loja, podemos iniciar as configurações para dividir em etapas o checkout WooCommerce. Se você estiver com dúvidas sobre o processo de instalar e ativar plugins, não deixe de ler Como Instalar e Ativar um Plugin no WordPress.
Depois que o WooCommerce MultiStep Checkout Wizard está ativado no Painel Administrativo, um novo sub-menu é adicionado ao WooCommerce. Assim, acesse WooCommerce > Checkout Wizard.
Quando a página de configurações do plugin for carregada, você verá que ela é dividida em diferentes áreas – cada uma delas é referente a algum tipo de comportamento ou visual de como o plugin WooCommerce MultiStep Checkout Wizard deve funcionar ao implementar o checkout dividido em etapas para a loja.
Configurações Iniciais
As primeiras configurações apresentadas são referentes ao layout do checkout, quais campos e informações devem ser exibidas.
Assim, comece escolhendo qual o estilo para o layout do checkout. O WooCommerce MultiStep Checkout Wizard oferece 3 estilos, você pode testar cada um deles e escolher aquele mais gostou: Elegant, Classic e Modern.
As opções logo a seguir permitem que você escolha se deseja exibir no checkout o formulário de Login (Add Login to Wizard) e de Cupons (Add Coupon to Wizard). Você deve escolher se quer ou não exibi-los – Yes ou No.
Depois, informe se você deseja combinar as etapas com os campos de Cobrança e Entrega.
Agora, escolha se deseja ou não combinar as etapas com as Informações do Pedido e Informações de Pagamento.
Nas opções Animation e Orientation, você deve escolher o tipo de animação que será produzida ao passar de um passo para outro e qual a orientação do formulário de checkout. Detalhe: se você escolheu o estilo Modern para o layout do checkout, a orientação vertical não é aplicada a ele.
Deseja habilitar paginação para as etapas do checkout? Se sim, selecione a opção Yes, caso não queira, selecione No.
Selecione Yes ou No para respectivamente, exibir ou não exibir Numeração de cada etapa.
A última configuração dessa área é referente a validação do CEP. Aqui para o Brasil você deve utilizar o plugin WooCommerce Extra Checkout Fields for Brazil para essa validação. Então, deixe a opção No selecionada para que não haja conflito.
Customização das Etapas
Agora chegou a parte de escolher as cores que devem ser mostradas em cada etapa do checkout, como títulos e botões – é a área Steps Customization.
Em Steps Color você pode escolher a cor de fundo, o background, para a etapa ativa, ou seja, aquela em que o cliente se encontra.
Defina em Color for inactive steps a cor para aquela etapa que está inativa e em Completed steps color a cor para a etapa completa – aquela que o cliente já preencheu. Em
Active step font color é onde você vai escolher a cor para a fonte de cada etapa.
Buttons Color e Buttons Font color são respectivamente, as cores para os botões e cores para as fontes dos botões.
Para a cor dos labels do checkout – como título Nome, título Endereço, por exempl0 – você pode definir em Checkout form Labels.
Texto dos Botões
Em Buttons Text é possível definir, literalmente, os textos de cada botão que é mostrado no processo de checkout.
O plugin WooCommerce MultiStep Checkout Wizard pode trazer os textos em inglês e você deve alterá-los.
Títulos das Etapas
Após os textos dos botões, encontramos a área Step Titles, que é para a digitação dos títulos de cada Etapa do checkout WooCommerce.
Mensagens De Erro
Em Error Messages há a possibilidade de digitar as mensagens de erro que possivelmente serão exibidas aos clientes.
As mensagens de erro auxiliam no preenchimento dos campos de checkout quando o cliente esquece de preencher um campo ou digita algo errado.
Localização do Código
O WooCommerce MultiStep Checkout Wizard faz uso de arquivos JavaScript para que o checkout possa ser dividido e funcione em etapas.
Por isso, na última área de configuração do plugin nós temos a opção de escolher se esses arquivos de script JS sejam inseridos no Footer ou no Header (Rodapé ou Cabeçalho) do nosso site/loja.
Existe também um checkbox, que é a última opção da configuração do plugin, que é para que as configurações do plugin sejam restabelecidas. Assim, você deve marcá-lo apenas se quiser apagar, resetar, todas as configurações realizadas por você. Caso contrário, deixe-a desmarcada.
Após ter definido o layout, textos e comportamento das etapas para o checkout WooCommerce, clique no botão Salvar alterações para guardar suas configurações.
Checkout Dividido em Etapas
Agora que foram criadas todas as configurações para a divisão em etapas do checkout WooCommerce, você precisa verificar como o sistema começou a funcionar.
Olha só como o meu checkout, após as minhas configurações terem sido realizadas e salvas, ficou:
Conclusão
Uma loja virtual organizada e com navegabilidade intuitiva é essencial para proporcionar aos clientes, um ambiente confortável e estimular a realização de suas compras. Por isso, a utilização do plugin WooCommerce MultiStep Checkout Wizard pode ser uma ótima forma de otimizar as vendas dentro do seu site. Normalmente quando encontramos formulários e sistema de checkout dividido em etapas, temos a sensação de estar preenchendo menos campos.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
RafflePress
OptinMonster
Akismet
Olá, obrigado pelo tutorial, deu certo. Porém, depois que eu instalei isso, o preenchimento automático de endereço parou de funcionar. Existe algum outro modo de ativar o preenchimento? Obg
Olá legal seu artigo, saberia me orientar como configurar largura e posição do woocommerce bookings na página? pois já testei vários temas e fica horrível não tem como alterar pelo elementor pro, é preciso mexer no código fonte.