Como personalizar a página do carrinho WooCommerce com Elementor

Você está procurando várias maneiras de personalizar sua página de carrinho WooCommerce? O Elementor é uma das melhores ferramentas para personalizar o WooCommerce. Você pode configurar e criar facilmente um design personalizado para sua página de carrinho para o seu Elementor em pouco tempo. É por isso que trouxemos para você nosso guia sobre Como personalizar a página do carrinho WooCommerce com o Elementor.

Mas primeiro, vamos dar uma olhada em por que você deve considerar usar o Elementor para personalizar sua página de carrinho.

Por que personalizar a página do carrinho com o Elementor?

Personalizar sua página de carrinho WooCommerce é uma parte crucial para melhorar suas taxas de conversão. A interface da página do carrinho pode determinar enormemente se seu cliente prosseguirá para o checkout ou não. Isso inclui adicionar opções para mostrar detalhes do carrinho, aumentar/diminuir a quantidade, adicionar miniaturas detalhadas para os itens do carrinho e assim por diante.

E embora existam muitas maneiras de personalizar sua página de carrinho, como usar plugins de carrinho ou programaticamente, usar um construtor de páginas pode ser uma das melhores maneiras de fazer isso.

O Elementor é um dos construtores de páginas WordPress mais populares disponíveis com integração completa com o WooCommerce. Você pode personalizar facilmente qualquer página do WooCommerce com ele em pouco tempo com vários designs bonitos, widgets profundamente personalizados, módulos e muito mais.

Além disso, você pode usar o Elementor para configurar facilmente suas páginas WooCommerce e usar modelos e módulos dedicados para configurá-los rapidamente. Cada módulo e elemento pode ser configurado de acordo com as necessidades do seu site. Eles podem ser feitos à mão para tudo o que você deseja adicionar às suas páginas de carrinho do WooCommerce.

Antes de começarmos:

Antes de começarmos com nosso tutorial, gostaríamos de observar que você precisará do Elementor e do Elementor Pro para seguir nosso tutorial.

Embora seja possível gerenciar e configurar páginas do WooCommerce usando a versão gratuita do Elementor, o procedimento é muito mais difícil com recursos limitados. Você não pode usar a opção de usar modelos e designs dedicados que são uma grande vantagem quando se trata de personalizar suas páginas de carrinho na versão gratuita. Portanto, recomendamos que você considere comprar o Elementor Pro, considerando toda a personalização do WordPress que você pode obter com ele.

Por 49 USD por ano , você pode desfrutar de recursos como:

• Totalmente opções de personalização, do zero ou usando modelos e do zero.
• Integração total e opções para criar e personalizar todas as páginas do WooCommerce, como página da loja, páginas de produtos, arquivos da loja, página do carrinho e muito mais.
• Mais de 50 widgets Pro com opções para widgets específicos do WooCommerce.
• Mais de 10 kits de sites detalhados com mais de 300 modelos que você pode configurar e configurar em movimento.
• Construtor de arrastar e soltar para iniciantes com opções de personalização incríveis para cada elemento do seu site.
• Suporte incrível para complementos e extensões.

Você também pode escolher entre vários planos, dependendo de suas necessidades. Cada plano também vem com um período de garantia de reembolso de 30 dias, perfeito caso você não esteja satisfeito com o uso do plug-in.

Da mesma forma, verifique se você configurou o WooCommerce corretamente e também usou um dos temas compatíveis do WooCommerce. Isso garantirá que você não tenha problemas de conflito ao personalizar a página do carrinho.

Agora que explicamos por que você deve considerar usar o Element para personalizar sua página de carrinho do WooCommerce, vamos em frente e veja como você pode fazer isso.

Como personalizar a página do carrinho WooCommerce com o Elementor?

Depois de instalar e ativar o Elementor Pro em seu site, crie uma nova página em seu painel do WordPress clicando em Páginas > Adicionar novo . Dê um nome à sua nova página personalizada e clique no botão Editar com Elementor .

Isso o levará ao construtor Elementor Page, onde agora você pode adicionar conteúdo à sua página de carrinho personalizada. Vamos em frente e adicionar alguns elementos básicos do WooCommerce para preencher seu carrinho.

Comece rolando para baixo no menu do widget à esquerda e clicando na opção suspensa WooCommerce . Clique no widget Carrinho e arraste-o para a seção Adicionar widget aqui no construtor.

Em seguida, configure seu widget de carrinho usando as opções Editar Widget à esquerda. Você pode usar a guia Conteúdo para configurar diferentes elementos, como:

• Layout de coluna (Uma coluna/duas colunas de check-out.)
• Atualize o texto do carrinho.
• Aplique o texto do cupom.
• Carrinho Personalização total.
• Opções de atualização automática do carrinho.

Claro, você também pode configurar o estilo, a fonte, as cores e muito mais para todos esses campos e elementos usando a guia Estilo .

Da mesma forma, a guia avançada permite configurar todas as animações personalizadas, planos de fundo, efeitos de movimento e muito mais.

Se você quiser configurar algumas opções de estilo, clique na guia Estilo . Neste tutorial, demos sombras de caixa de seções. Clique em Seções e depois no botão editar em Box Shadow . Em seguida, clique na opção Cor para dar ao seu box-shadow uma cor personalizada.

Agora, dê ao seu carrinho uma borda usando a opção Tipo de borda. Para nossa demonstração, definimos isso como Solid. Claro, você pode personalizar a borda e a sombra da caixa usando opções adicionais.

Da mesma forma, se você personalizar elementos adicionais, como Resumo do pedido, botão Checkout e Totais, deverá obter um carrinho como este:

Por enquanto, vamos manter este carrinho. Mas você sempre pode voltar e personalizar ainda mais a página do carrinho, se necessário.

Em seguida, mais alguns elementos podem ser adicionados à página do carrinho. Você pode adicioná-los usando a barra de widgets à esquerda usando o mesmo método acima.

Vamos adicionar um texto de isenção de responsabilidade, um vídeo e um formulário de contato. Todos esses são ótimos elementos a serem adicionados para ajudar seus clientes com perguntas e informações sobre notas de pedido, envio e muito mais.

Quando terminar, você pode publicar esta página personalizada e concluir a edição. No entanto, sugerimos adicioná-lo como um modelo personalizado para personalização futura, se desejar. Basta clicar no botão de seta ao lado do botão Publicar na parte inferior e clicar em Salvar como modelo. Em seguida, dê o nome do seu modelo de carrinho personalizado e clique em Salvar.

Por fim, você pode terminar de personalizar sua página de carrinho personalizada clicando em Publicar.

Configurando sua página de carrinho personalizada como a página de carrinho do WooCommerce

O processo acima simplesmente cria sua página de carrinho WooCommerce personalizada.

Depois de criar sua página de carrinho personalizada do WooCommerce no Elementor, você precisa definir essa nova página como a página de carrinho que o WooCommerce precisa usar. Você pode fazer isso abrindo as configurações do WooCommerce clicando em WooCommerce > Configurações no painel do WordPress. Em seguida, clique na guia Avançado para acessar suas opções de configuração de página .

Na opção da página do carrinho , vá em frente e pesquise o nome da página que você acabou de criar. Para nós, será a página do carrinho de demonstração. Clique na página do seu carrinho personalizado, role para baixo e clique em Salvar alterações.

Isso salvará sua página recém-personalizada como sua página padrão do carrinho WooCommerce.

Usando modelos WooCommerce para personalizar a página do carrinho WooCommerce no Elementor:

Você pode ver claramente que as etapas acima são apenas o básico para criar sua página de carrinho personalizada do WooCommerce. Claro, há muito trabalho envolvido quando se trata de personalizar sua página de carrinho WooCommerce com o Elementor. Mas você também é totalmente livre para usar um design simples de página de carrinho com um pouco mais de estilo e personalização, mas para obter o máximo de benefícios.

Se essa abordagem atender mais às suas necessidades, recomendamos o uso de modelos Elementor . Eles são feitos de toneladas de opções de modelo e plugins de modelo disponíveis para o Elementor.

Para configurar nossa página de carrinho do WooCommerce, também usaremos um Elementor Addon gratuito que vem com modelos de página de carrinho dedicados para nossa demonstração. Embora existam muitos plug-ins de complemento e modelo do Elementor disponíveis, usaremos o CoDesigner para esta demonstração. Essa é uma das maneiras mais fáceis e sem complicações de preparar uma página de carrinho perfeitamente elaborada para o seu site.

Então vamos começar instalando o plugin.

Instale o plug-in CoDesigner:

Abra o painel de administração do WordPress e vá para Plugins > Adicionar novo. Em seguida, use a barra de pesquisa no canto superior direito para procurar por ' CoDesigner ' e clique no botão Instalar agora para instalá-lo.

Quando a instalação estiver concluída, clique em Ativar para concluir o processo de instalação e ativação.

Ativando os widgets de carrinho do CoDesigner:

Antes de adicionar o widget do CoDesigner à página do carrinho, você precisa ativar o widget no painel do CoDesigner .

Então abra o CoDesigner no seu painel de administração do WP. Ele abrirá o painel do CodDesigner. Em seguida, clique em Widgets.

Em seguida, role para baixo nas seções do Carrinho e ative todos os widgets abaixo deles. Eles serão adicionados diretamente ao seu menu Elementor Widgets. Agora, você pode adicionar diretamente seu widget personalizado CoDesigner diretamente à sua página de carrinho.

Por fim, clique em Salvar configurações para ativar os widgets.

Usando widgets e modelos de carrinho do CoDesigner:

O processo para criar e personalizar a página do carrinho WooCommerce no Elementor usando o Codesigner é idêntico ao processo acima usando o Elementor.

Basta criar uma nova página clicando em Páginas > Adicionar nova e nomeá-la. Depois disso, clique em editar com Elementor como acima.

Depois de abrir sua nova página no construtor de páginas Elementor, você estará pronto para adicionar seus modelos CoDesigner. Basta clicar no ícone do CoDesigner na seção Arrastar Widgets aqui .

Em seguida, na guia Blocos , use o menu suspenso de categorias e selecione Carrinho . Use um design apropriado que seja perfeito para o seu site e clique em Inserir.

Se seus widgets CoDesigner foram ativados, seu modelo de página de carrinho deve aparecer perfeitamente. Claro, isso ainda é apenas um modelo, então você precisa personalizar o texto e outros elementos manualmente.

Vamos começar substituindo o texto Heading . Clique no widget Título t e use o menu de personalização à esquerda para adicionar seu próprio texto personalizado.

Da mesma forma, faça o mesmo para os campos de texto abaixo dele.

Você também pode clicar em cada widget de carrinho e personalizar opções adicionais , como miniatura, opções de subtotal de itens e campos de quantidade.

Assim como as etapas mencionadas anteriormente, você também pode estilizar e editar todos os campos e widgets e personalizar cores, tipografia, preenchimento e assim por diante. Basta clicar em qualquer widget e usar a guia de estilo e avançada . É tão fácil!

Quando terminar, clique no botão Publicar para salvar sua página de carrinho personalizada ou salve-a como um modelo da mesma maneira mencionada anteriormente.

Mais uma vez, vá para WooCommerce > Configurações > Avançado e selecione sua nova página do carrinho no campo Página do carrinho. Em seguida, clique em Salvar alterações para finalizar.

Agora você deve ver sua nova página de carrinho em seu frontend

Conclusão:

E isso termina nosso guia sobre como personalizar a página do carrinho WooCommerce com o elemento r. O Elementor é uma das construções de sites mais poderosas disponíveis para personalizar sites WooCommerce e WordPress. Se você usa widgets e modelos de complemento, tem uma infinidade de ferramentas disponíveis para personalizar todos os cantos do seu site.

Aqui estão algumas ótimas dicas para você ao personalizar a página do carrinho WooCommerce no Elementor:

• Certifique-se de que sua página de carrinho personalizada seja completamente utilizável em dispositivos móveis e computadores usando a opção responsiva.
• Use as opções de estilo de cores e tipografia do Elementor para garantir que a página do carrinho corresponda ao restante do design do tema.
• É uma ótima ideia personalizar sua página de carrinho e sua página de checkout para que elas correspondam.
• Considere elementos adicionais, como produtos relacionados , produtos em destaque , selos de confiança etc., em sua página de carrinho.

Você conseguiu descobrir como personalizar sua página de carrinho? Tem problemas com a configuração de seus complementos ou modelos? Deixe-nos saber nos comentários sobre como você conseguiu ou não personalizar sua página de carrinho. Adoramos ajudar nossos leitores com seus problemas e ouvir suas opiniões sobre as personalizações do WordPress e WooCommerce.

Se você está procurando outros guias para personalizar várias outras páginas do WooCommerce usando o Elementor, por que não verificar alguns de nossos outros artigos aqui:

• Como personalizar a página do produto WooCommerce com Elementor
• Criando um menu Mega com Elementor usando o plugin Nav Menu
• Como personalizar a página da loja WooCommerce no Elementor