Checkout Inteligente
Tema e layout
Básico

Tema e layout

O checkout possui um layout padrão, otimizado para ser fácil e simples. Por isso, no momento não é possível modificar essa estrutura.

Você pode, no entanto, alterar as cores e alguns elementos visuais de forma muito prática!

Para isso, é só ir até seu painel -> Aparência -> Personalizar -> selecione Checkout Inteligente e fazer as modificações do seu interesse.

A recomendadação é: Mantenha Simples! Mas se você quiser muito, é possível criar cabeçalhos e rodapés usando Elementor. Essa ação, no entanto, não é recomendada. O cabeçalho padrão é mais do que suficiente. Ao ativar o Elementor no checkout, o tempo de carregamento pode subir em até 50%.

Cores

Você pode modificar praticamente tudo nas configurações do plugin. Caso queira modificar outras cores padrão, é possível utilizando CSS. Nas configurações há um campo para inserir CSS Personalizado.

Caso tenha dúvidas na modificação de cores padrão, entre em contato.

Para personalizações específicas, veja a seção Quero personalizar mais.

Cabeçalho

Você pode ajustar seu logotipo, cores e espaçamentos diretamente nas configurações.

Rodapé

Você pode precisar inserir algumas informações no rodapé como Políticas de privacidade, trocas e copyright, por exemplo.

Para textos simples, você pode adicionar na seção Rodapé da área de personalização. Para menus (Políticas, termos etc) você pode fazê-lo ainda na área de personalização no item 'Menus' ou em seu painel -> Aparência -> Menus escolhendo como destino o checkout.

Layout quebrado

Se você está vendo algum "conteúdo extra" no checkout quer dizer que isso foi adicionado por algum tema do seu site. Como não é para estar lá, acaba quebrando o layout. É possível ocultar isso nas configurações do plugin na opção divs para ocultar. Caso tenha dificuldades em identificar qual a opção correta, basta solicitar ajuda.

Mesmo que você consiga ocultar, favor informar este problema. Às vezes é possível adicionar uma melhor integração, otimizando o checkout ainda mais.

O mesmo pode ocorrer em alguns métodos de pagamento que não possuem um layout que segue as padrões do WooCommerce, deixando o visual quebrado. Nesse caso, também entre em contato solicitando ajuda.

Elementor

Rapidamente: Caso você esteja usando o Elementor Pro, é possível ativar cabeçalhos personalizados nas opções do plugin. Ative a opção Carregar estilos do Elementor para que este recurso funcione.

💡

Recurso não recomendado! o Elementor é execelente e por isso tem essa integração. Mas ele aumenta em até 10x o número de scripts/estilos carregados na página do checkout. Então não é recomendado. Mas, quando possível, que se utilize o recurso de edição avançada, copiando o arquivo para o tema e editando.

Caso decida utilizar, algumas dicas:

  • Menos é mais. Utilize um cabeçalho e rodapés simples. Evite distrações.
  • Evite fontes personalizadas e muitas imagens pesadas
  • Prefira um cabeçalho exclusivo para o checkout, assim você consegue deixar ele mais clean e com menos elementos desnecessários.

Pode ser tentador achar que o layout padrão do checkout é simples demais... mas faça o teste. Deixe-o por alguns dias e analise as conversões :)

Quero personalizar mais

Embora não recomendado, você pode fazer com CSS e edições de nível intermediária utilizando o sistema de templates do WooCommerce.

⚠️

Lembre-se: não há suporte para este tipo de personalização.