Como fazer o checkout do WooCommerce como Shopify

Deseja alterar seu checkout e torná-lo parecido com Shopify? Temos o tutorial perfeito para você. Neste guia, mostraremos como fazer seu checkout WooCommerce como Shopify.

WooCommerce é uma das plataformas de comércio eletrônico mais flexíveis, com inúmeras opções de personalização. Mas, às vezes, todas essas vantagens podem ser esmagadoras para administradores e clientes do site. Por exemplo, já vimos que uma página de checkout complicada com muitos campos pode afetar suas taxas de conversão. É por isso que você deve remover campos desnecessários e manter seu checkout limpo e simples.

Isso pode ser uma vantagem para outras plataformas como Shopify que possuem uma página de checkout muito simples. Mesmo que você possa personalizar seu checkout e criar um checkout de uma página, por exemplo, alguns usuários ainda preferem ter uma página de checkout semelhante à Shopify. A boa notícia é que a imensa flexibilidade do WooCommerce permite que você faça um checkout como o que Shopify oferece.

Antes de vermos como fazer isso, vamos dar uma olhada nas diferenças entre as páginas de checkout WooCommerce e Shopify.

WooCommerce Checkout vs Shopify Checkout

Você já sabe que pode adicionar muitos campos de checkout no WooCommerce. Mas se você adicionar muitos, poderá acabar com uma página de checkout longa e complicada . Isso pode aumentar o abandono do carrinho e afetar sua taxa de conversão, pois os usuários podem achar tedioso preencher tantos campos.

Por outro lado, se você observar a página de checkout padrão da Shopify, ela tem um design simples e bonito, com apenas os campos de checkout necessários. Em comparação, a página de checkout do WooCommerce certamente pode ser melhorada para torná-la mais eficiente.

A boa notícia é que, como o WooCommerce tem muitas opções de personalização, você pode facilmente fazer com que seu checkout WooCommerce pareça Shopify.

Como fazer o WooCommerce Checkout como Shopify

A maneira mais fácil de criar um checkout da Shopify no WooCommerce é usar um plugin . O WordPress oferece muitos plugins que você pode usar para personalizar seu checkout. Nesta seção, analisaremos algumas das melhores ferramentas para tornar seu checkout WooCommerce parecido com Shopify.

Blocos WooCommerce

WooCommerce Blocks é um plugin gratuito desenvolvido pela Automattic. Possui muitos blocos Gutenberg projetados especificamente para WooCommerce e um dedicado ao checkout.

Com a ajuda do bloco de checkout, você pode facilmente fazer com que seu checkout WooCommerce se pareça com o checkout Shopify. Ele ainda possui layouts e seções de conteúdo semelhantes por padrão, tornando a transformação bastante fácil. Essa ferramenta também oferece uma variedade de opções para o bloco de checkout, para que você possa personalizá-lo de acordo com suas necessidades.

Características principais

• Bloco de checkout simplificado
• Várias opções de bloqueio de produto
• Revisões por categoria e blocos de produtos
• Suporte incrível

Preço

Este é um plugin gratuito que você pode baixar do repositório do WordPress.

CheckoutWC

CheckoutWC é um dos plugins mais populares para personalizar seu checkout WooCommerce. Ele vem com vários modelos inspirados no Shopify, para que você possa usá-los para fazer o checkout do WooCommerce parecer o Shopify.

Este plugin também possui um design responsivo, além de ótimas opções de compatibilidade com a maioria dos principais plugins e temas do WordPress. Além disso, ele vem com opções convenientes para seus clientes, como geradores de senhas, recurso de preenchimento automático de endereços e muito mais.

Características principais

• Vários modelos de página de checkout
• Design totalmente responsivo
• Autocompletar endereço
• Edição de carrinho

Preço

CheckoutWC é um plugin premium que começa em 15 USD por mês ou 149 USD por ano. Ele também inclui uma garantia de reembolso de 30 dias, atualizações gratuitas e suporte para um site.

Crie um Shopify Checkout no WooCommerce com um plug-in

Para este tutorial, usaremos o WooCommerce Blocks para fazer o checkout do WooCommerce como Shopify. É um excelente plugin gratuito com muitos recursos para editar sua loja WooCommerce e um bloco de checkout dedicado.

Antes de começarmos, verifique se você configurou corretamente o WooCommerce em seu site. Lembre-se também de que usaremos o tema Divi, portanto, algumas das páginas e opções podem ser diferentes em seu site se você usar outro tema. No entanto, você deve ser capaz de seguir as etapas sem problemas.

1. Instale e ative os blocos WooCommerce

Primeiro, instale e ative o plugin. Para isso, vá para Plugins > Adicionar Novo no seu painel do WordPress e procure o plugin WooCommerce Blocks. Depois de encontrá-lo, instale-o clicando em Instalar agora .

Após a conclusão da instalação, ative o plugin. Se você precisar de mais informações sobre esse processo, consulte nosso guia sobre como instalar um plugin do WordPress manualmente.

2. Configure e personalize a página de checkout

Agora, tudo o que você precisa fazer é acessar Páginas em seu painel, encontrar a página Checkout e pressionar Editar .

Em seguida, você verá o código de acesso padrão da página de checkout do WooCommerce aqui. Como queremos que o checkout do WooCommerce pareça Shopify, você precisa remover o código de acesso. Para removê-lo, basta clicar no shortcode e abrir as opções pressionando os três pontos verticais .

Em seguida, clique em Remover bloco para remover o código de acesso. Alternativamente, você pode clicar no bloco e pressionar Ctrl+Alt+Z como mostrado no atalho de opções.

Após isso, clique no ícone ' + ' ou digite ' / ' para adicionar um novo bloco e procure por “ Checkout ”. Selecione o bloco de checkout e atualize a página. Você poderá ver sua nova página de checkout inspirada no Shopify no WooCommerce.

Agora você tem duas opções: deixar como está ou personalizar. Vamos dar uma olhada em como editá-lo.

Primeiro, abra o ícone de configurações no canto superior direito da tela. As configurações de página e bloco aparecerão na barra lateral direita. Em seguida, clique em um dos blocos e você pode começar a editar o bloco específico na barra lateral de configuração do bloco .

Por exemplo, se você quiser editar os campos do endereço de entrega, basta pressionar o bloco de endereço de entrega e você verá todas as configurações disponíveis na barra lateral direita. A partir daí, você pode mostrar ou ocultar os editores de campo da sua página de checkout.

Depois de fazer todas as alterações necessárias, atualize a página. Confira seu checkout no front-end e você verá sua nova página de checkout inspirada no Spotify.

Dica profissional: combine a página do carrinho com a página de checkout

Se você tiver uma página de carrinho, poderá repetir o processo acima para a página de carrinho e combinar o estilo da página de checkout e da página de carrinho.

No painel do WordPress, basta acessar Páginas , encontrar a página do carrinho e remover o código de acesso padrão da página do carrinho do WooCommerce. Em seguida, adicione um novo bloco de carrinho com a página do carrinho e atualize-o.

Depende do tipo de produto ou serviço que você possui, mas como regra geral, recomendamos pular a página do carrinho para tornar o processo de checkout mais curto. Se você quiser saber mais sobre isso, confira nosso guia sobre como pular a página do carrinho no WooCommerce.

Outra maneira de fazer seu Checkout WooCommerce como Shopify

Se você acha que personalizar a página de checkout editando-a dá muito trabalho, há outra alternativa para você. Você pode usar o CheckoutWC , um plugin premium, para fazer seu checkout WooCommerce parecer Shopify.

Para isso, você precisará assinar um de seus planos, pois é um produto pago. Você também pode usar a avaliação gratuita de 7 dias para testar se a ferramenta oferece o que você precisa.

Agora vamos dar uma olhada no processo para criar um checkout do Shopify no WooCommerce com o CheckoutWC.

1. Instale e ative o CheckoutWC

Primeiro, você precisa ativar e instalar o plugin para começar a usá-lo. Em seu painel, vá para Plugins > Adicionar Novo e clique em Carregar Plugin . Carregue o arquivo zip que você baixou durante a compra e, quando o upload estiver concluído, pressione Instalar agora .

Após a conclusão da instalação, ative o plugin. Mais uma vez, você pode dar uma olhada no nosso guia para instalar um plugin WordPress manualmente se tiver dúvidas sobre esse processo.

2. Selecione um modelo de checkout

A principal vantagem deste plug-in é que ele possui modelos de checkout projetados especificamente com a página de checkout da Shopify em mente. Existem 4 modelos, então escolha o que você mais gosta para sua loja.

Basta acessar Configurações> Checkout para WooCommerce> Modelos no painel do WordPress e você verá quatro opções de modelo:

• Padrão
• Futurista
• Copiar
• Vidro

O modelo Copify é o mais parecido com a página de checkout da Shopify, mas os outros três também possuem alguns elementos da Shopify.

Depois de escolher o modelo, é hora de personalizá-lo com seu logotipo. Abra a guia Design e clique em Carregar logotipo . Depois de carregar a imagem, certifique-se de salvar as alterações.

É isso! Agora, verifique seu checkout no front-end e você verá a página de checkout do Shopify em sua loja WooCommerce .

Bônus: Remova os campos de checkout do WooCommerce

Por fim, vamos ver como você pode remover alguns campos do checkout.

Digamos que você não queira fazer seu checkout do WooCommerce exatamente como Shopify, mas ainda quer simplificar a página de checkout e ocultar alguns campos desnecessários. Como isso torna o processo de checkout mais rápido, isso ajudará você a aumentar suas taxas de conversão e diminuir o abandono de carrinho.

A maneira mais fácil de remover o checkout é usar o plugin WooCommerce Checkout Manager .

Essa ferramenta permite que você personalize facilmente sua página de checkout adicionando, ocultando e editando campos de checkout de acordo com suas necessidades.

Instalar e ativar o plug-in

Primeiro, vá para Plugins > Adicionar Novo e procure o plugin. Em seguida, instale-o e ative -o. Esta é a ferramenta freemium para que você possa baixar a versão gratuita ou obter um dos planos premium que vêm com recursos mais avançados e começam em apenas 19 USD (pagamento único).

Editar a página de checkout

Depois de instalar o plugin, vá para WooCommerce > Configurações e abra a guia Checkout . Você verá todas as opções para editar sua página de checkout do WooCommerce.

Além disso, vá para a guia Faturamento, pois a maioria dos campos de checkout está lá. Basta acessar a guia Faturamento e usar o botão Desativado para remover os campos de checkout desejados. Você também pode torná-los obrigatórios ou não usando a alternância Obrigatório .

Quando estiver satisfeito com sua seleção, não se esqueça de salvar suas alterações . Em seguida, dê uma olhada no checkout do front-end e você verá sua nova página de checkout.

Se você precisar de mais ajuda com esse processo, consulte nosso guia para remover os campos de checkout do WooCommerce. Se você deseja apenas remover campos sem adicionar ou editar campos existentes, você pode usar outro plugin chamado Direct Checkout.

Conclusão

Em resumo, o checkout padrão do Shopify é mais limpo e simples que o do WooCommerce. Neste guia, vimos como você pode fazer o checkout do WooCommerce parecer Shopify em sua loja. O método mais conveniente para fazer isso é usar plugins e mostramos o processo usando duas ferramentas diferentes.

O WooCommerce Blocks é gratuito e usa blocos para editar a página de checkout, enquanto o CheckoutWC é um plugin premium que vem com vários modelos de checkout para ajudá-lo a personalizar sua página de checkout. Ambos os plugins fazem o trabalho e são muito fáceis de usar, então escolha o que melhor se adapta às suas necessidades.

Além disso, também mostramos como remover os campos de checkout do WooCommerce para personalizar ainda mais sua página de checkout e melhorar suas taxas de conversão. Isso tornará sua página de checkout mais simples e acelerará o processo de checkout.

Para saber mais sobre como aproveitar ao máximo o checkout, veja como editar a página de checkout do WooCommerce. Se você gostou deste post, confira os seguintes tutoriais:

• Como criar um checkout de uma página WooCommerce
• Diferentes maneiras de adicionar taxas ao checkout
• Como adicionar campos condicionais ao checkout do WooCommerce