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 para ficarem de acordo com sua marca.

Você pode, também, 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 as cores principais nas configura√ß√Ķes do plugin. Caso queira modificar outras cores padr√£o, √© poss√≠vel utilizando o filtro wc_smart_checkout_colors.

As cores disponíveis são:

--column-border-color: #999;
--input-border-color: #d0d0d0;
--input-focus-border-color: #333;
--button-background-color: #576975;
--button-text-color: #fff;
--header-background-color: var(--button-background-color);
--header-text-color: var(--button-text-color);

Exemplo de código:

add_filter( 'wc_smart_checkout_colors', function( $colors ) {
// cor de fundo do cabeçalho
$colors['--header-background-color'] = '#000';
return $colors;
});

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

Nas configura√ß√Ķes do plugin √© poss√≠vel informar a URL do seu logotipo ou usar o nome da loja por escrito. Utilize uma imagem com fundo transparente e que d√™ bom contraste com a cor de fundo do tema.

Rodapé

Configure o menu do rodapé em seu painel -> Aparência -> Menus

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.

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

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.

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.