Como editar a página de checkout do WooCommerce sem o Elementor?
Publicados: 2022-10-18Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado? Bem, este pode ser o momento certo para editar sua página. Dessa forma, seus clientes podem fazer pedidos rapidamente, o que também pode ajudar a gerar mais conversões.
Mas como exatamente você personaliza sua página de checkout do WooCommerce? Como se vê, existem 3 maneiras eficazes, incluindo edição manual, uso de plugins e construtor de páginas Elementor. No entanto, o melhor método depende de qual você acha fácil de trabalhar.
Agora, sem mais delongas, vamos primeiro descobrir por que você pode querer personalizar sua página de checkout. Depois disso, podemos ver como editar sua página de checkout do WooCommerce usando uma combinação de Elementor e Shopready .
Índice
Por que você pode querer editar sua página de checkout do WooCommerce
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
Sua página de checkout do WooCommerce pode fazer uma grande diferença no processo de compra do pedido. Por causa disso, existem muitas razões pelas quais você pode querer editá-lo. Esses incluem:
Melhore a experiência do usuário
O processo de checkout em qualquer WooCommerce padrão é bastante demorado. Portanto, você pode optar por editar a página e tornar o processo de checkout mais curto. Dessa forma, seus clientes terão uma melhor experiência de compra.
Faça o checkout seguro e
Se seus clientes sentirem que suas informações pessoais e de cobrança não são seguras, provavelmente sairão sem fazer uma compra. Portanto, você deve considerar editar seu modelo de página de checkout para incluir um gateway de pagamento seguro.
Permitir compras rápidas e fáceis
Outro motivo pelo qual você pode querer personalizar a página de checkout do WooCommerce é ajudar seus clientes a fazer seus pedidos rapidamente. Por exemplo, você pode incluir a opção de preenchimento automático de detalhes.
Melhorar a marca
Sente que a sua marca não se destaca da multidão? Você pode querer editar sua página de checkout do WooCommerce para dar uma aparência profissional. Uma maneira de fazer isso seria alterar seu design e até mesmo o modelo da página.
Como editar o WO Elementor da página de checkout do WooCommerce?
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
Existem muitos métodos para editar sua página de checkout do WooCommerce. Você pode optar por fazê-lo manualmente, usando uma combinação de elementor e Shopready ou usando plugins. A escolha é sua. Então, vamos discutir como cada método funciona.
Método 1: edição manual
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
Esse método envolve o uso de um código para editar seu modelo de página de checkout . Como resultado, oferece mais controle sobre a personalização em comparação com o uso de outros métodos de edição. Abaixo estão os passos simples sobre como fazê-lo.
Etapa 1: escolha filtros para personalizar os campos de checkout
Para editar seus campos de checkout, você usará o arquivo functions.php em seu site de comércio eletrônico . Isso deve ser fácil porque o WooCommerce fornece uma lista de filtros para permitir que você personalize os campos de checkout. Por exemplo, existe o:
- WooCommerce_shipping_fields
- WooCommerce_after_checkout_form
- WooCommerce_billing_fields
- WooCommerce_checkout_after_terms_and_conditions
Etapa 2: editar o texto do espaço reservado
Em seguida, comece personalizando o texto do placeholder em order_comments_fields. Você pode fazer isso simplesmente adicionando o seguinte trecho de código ao seu arquivo functions.php.
Etapa 3: remover campos
Se você deseja remover um campo, basta adicionar o código abaixo ao seu arquivo functions.php.
Etapa 4: adicione os campos necessários
Para adicionar campos à sua página de checkout do WooCommerce, basta inserir o código abaixo no seu arquivo function.php.
Após inserir o código, você notará que um campo extra aparecerá. Nada para se preocupar, no entanto. Você acabou de copiar o código a seguir para a validação dos dados.
Etapa final: salve seus dados
Por fim, insira o código a seguir para garantir que todos os detalhes inseridos por seus clientes na página de checkout sejam salvos.
Método 2: usando o Elementor Page Builder
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
Editar manualmente sua página de checkout requer que você tenha experiência em codificação. Felizmente, se você não é um cara experiente em tecnologia, pode usar o elementor, um dos melhores construtores de páginas do WordPress. A seguir estão as etapas sobre como fazer a edição usando o elementor.
Etapa 1: localize a página de checkout
Primeiro, vá ao seu painel do WordPress e encontre a lista de páginas. Na lista Páginas, você pode encontrar a página de checkout padrão. Basta clicar no botão Editar para iniciar o editor do WordPress. Em seguida, escolha a opção Editar com Elementor para habilitar o Elementor e, em seguida, inicie o editor do Elementor.
Etapa 2: adicionar o widget de checkout do Elementor
Em seguida, abra a página de checkout padrão no elementor e exclua o widget ou shortcode de checkout do WooCommerce existente. Em seguida, adicione o widget de checkout no Elementor Editor. Você deve poder ver uma visualização ao vivo da sua página de checkout.
Etapa 3: editar o conteúdo na página de checkout
Na guia Conteúdo localizada na barra lateral do Elementor, clique em Configurações gerais. Nas configurações, você pode decidir selecionar um layout de uma ou duas colunas para editar e personalizar o conteúdo .
Além disso, você pode editar detalhes de cobrança e envio, informações adicionais, seu pedido, cupom e detalhes de pagamento. E se você quiser adicionar uma caixa de cupom , também é possível.
Etapa 4: edite o estilo da página de checkout
Ao lado da guia Conteúdo, clique na guia Estilo para personalizar ainda mais o estilo da sua página de checkout. Você deseja garantir que o design da sua página de checkout personalizada corresponda ao da sua loja.
Na guia Estilo, você pode selecionar diferentes opções de design, incluindo Seções, Tipografia, Formulários, Resumo do pedido e botão Comprar. Basta ajustar e experimentar as diferentes opções para encontrar um estilo que destaque sua página de checkout.
Etapa 5: salve suas alterações
Quando terminar de personalizar o estilo do seu modelo de página de checkout , salve todas as alterações. Em seguida, visualize as alterações antes de finalmente publicar sua página.
Método 3: usando plug-ins
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
Outra maneira fácil e rápida de editar sua página de checkout do WooCommerce é usar um plug-in. Agora, há um punhado de opções de plugins para escolher. No entanto, neste artigo, vamos nos concentrar no uso de uma combinação de Elementor e Shopready .
Etapa 1: instale o complemento Shopready para elementor
Antes de instalar este plugin, certifique-se de que seu WordPress tenha um construtor de páginas Elementor. Isso ocorre porque Shopready não pode trabalhar sozinho. Em seguida, no painel do WordPress, clique em plugins e selecione Adicionar novo. Em seguida, encontre Shopready na caixa de pesquisa e clique no botão Ativar.
Etapa 2: personalize o conteúdo da sua página de checkout do Shopready
No seu painel do WordPress, escolha abrir o Shopready. Você será direcionado para o painel do Shopready. Sob o painel, há opções de Widgets, Módulos e Modelos para ajudá-lo a personalizar sua página. Você pode escolher qualquer opção para editar e personalizar o conteúdo .
Etapa 3: ativar widgets
Clique na opção widgets e selecione a guia Ativar tudo. Em seguida, selecione Salvar alterações. Mas se você não quiser habilitar todos os campos, basta escolher suas opções preferidas e salvar as alterações.
Etapa 4: habilitar módulos
Em seguida, escolha a opção Modules e clique em Enable All. Você também pode selecionar a opção Desativar todos ou ativar seletivamente apenas alguns. Depois de terminar, clique no botão Salvar alterações.
Etapa 5: ativar modelos
Nesta seção, você encontrará opções como Loja, página de checkout, carrinho, página de detalhes do produto e muito mais. Clique na guia Ativar nas opções de modelo de sua preferência e depois em Salvar.
Etapa 6: ativar a API de moeda
Clique na guia API e insira sua chave de API de moeda no campo vazio fornecido. Em seguida, selecione a opção Salvar alterações para concluir o processo.
Por que usar o Shopready para editar a página de checkout do WooCommerce
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
ShopReady é simplesmente um complemento para Elementor. Desenvolvido pela QuomodoSoft, este plugin oferece muitos benefícios ao usá-lo para editar sua página de checkout personalizada do WooCommerce. Esses incluem:
Grande variedade de widgets
Este plug-in fornece mais de 100 widgets de página de loja que você pode adicionar facilmente à sua página Elementor. Consequentemente, você pode personalizar rapidamente a página de checkout do WooCommerce de acordo com suas necessidades.
Modelos pré-criados
Se você é um novo usuário do WooCommerce, considere usar o Shopready para editar suas páginas de checkout. Isso ocorre porque o plug-in apresenta modelos pré-projetados para facilitar a personalização.
Funcionalidades orientadas para o cliente
Outra razão pela qual você deve usar este plugin para editar sua página WooCommerce é por causa de seus recursos orientados para o cliente. Alguns deles incluem página de agradecimento, adicionar uma opção de caixa de cupom e comparações de produtos.
Compatível com dispositivos móveis
Este plugin permite que você edite sua página de checkout e a torne compatível com dispositivos móveis. Como resultado, seus clientes podem ter uma excelente experiência de compra, independentemente do dispositivo que usam.
Conclusão
Não gosta da sua página de checkout padrão do WooCommerce porque parece monótona e o processo de checkout também é demorado?
No geral, existem muitas razões pelas quais você pode querer editar sua página de checkout do WooCommerce. Pode ser que você queira melhorar a experiência do usuário do seu cliente, tornar a página segura ou melhorar sua marca. Seja qual for o caso, você pode optar por editar usando plugins, elementor ou fazê-lo manualmente.
Claro, usar plugins ou uma combinação de elementor e Shopready é o método mais fácil. Isso ocorre porque o Shopready oferece uma ampla variedade de widgets para você escolher. Consequentemente, você pode editar sua página de checkout e torná-la tão personalizada quanto desejar. No entanto, se você tiver experiência em codificação, sempre poderá editar suas páginas manualmente.
Como adicionar lista de desejos no WooCommerce W/O Plugin