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.

Baixar Demo | Hospedagem

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.