WooCommerce: Como personalizar o checkout para conversões

Tive a honra de falar no WCEU 2020 graças ao WooCommerce, que me hospedou em sua faixa de patrocinador. Foi uma curta e doce palestra relâmpago no primeiro dia (sexta-feira), chamada “ Personalizando o checkout do WooCommerce para melhorar as conversões ”, seguida de uma sessão de codificação ao vivo no sábado.

Aqui está a gravação em vídeo da palestra relâmpago, bem como alguns trechos de PHP e CSS que você pode copiar/colar para melhorar seu WooCommerce Checkout e esperar imediatamente um aumento na taxa de conversão. Então, curta o vídeo e depois vá testar os trechos que você encontra abaixo!

Vídeo: Personalizando o Checkout WooCommerce para melhorar as conversões

O WooCommerce Checkout é a página mais importante do seu site. O que significa que você precisa otimizá-lo.

Nesta apresentação, dou uma olhada em sites de comércio eletrônico B2C de sucesso e vejo o que eles fazem. Talvez possamos identificar tendências e fraquezas e começar a trabalhar nisso.

Observe que há legendas disponíveis. Basta clicar no botão “CC” no canto inferior direito do player de vídeo.

10 snippets de otimização de taxa de conversão de PHP e CSS WooCommerce Checkout

Na sessão de acompanhamento, compartilhei minha tela e comecei a codificar ao vivo o que aprendemos durante a palestra relâmpago. Em poucas palavras, decidimos agir nos seguintes pontos:

1. Remova o cabeçalho, a barra lateral, o rodapé para que não haja distrações e o cliente fique totalmente focado na única chamada para ação restante - o botão "PAGAR"
2. Mova a seleção de resumo do pedido, envio e forma de pagamento para o lado direito para que fique sempre visível
3. Divida o layout longo feito de faturamento, envio, notas de pedido, formulário de cupom etc. em etapas visuais
4. Mova o formulário de cupom para a parte inferior para evitar fraude de cupom
5. Mantenha o formulário de envio sempre “aberto”, pois essa é a seção mais importante para B2C
6. Mova o formulário de cobrança abaixo do formulário de envio
7. Remova campos de cobrança/envio desnecessários; quanto mais campos, menor sua taxa de conversão!
8. Faça a seleção do método de envio se destacar mais, porque o layout padrão é bastante ruim
9. Adicione um link "editar carrinho" para que os usuários possam voltar à página do carrinho e editar seu pedido
10. Adicione crachás de segurança / telefone / perguntas frequentes para permitir que o cliente confie em seu negócio online

Mas antes de codificar, vamos dar uma olhada na pilha de ferramentas.

Tema : usei o tema oficial do WooCommerce, Storefront. Isso já vem com alguma customização CSS embutida para o checkout. Outro favorito meu poderia ter sido o Shoptimizer, um tema criado para velocidade e conversões do WooCommerce. De qualquer forma, como um dos snippets trata da remoção de cabeçalho e rodapé da página de checkout, usei meu guia de gancho visual do tema Storefront, para saber quais ganchos usar.

Ganchos : além de usar meu guia visual de ganchos para o Storefront, também precisamos conhecer todos os ganchos do WooCommerce Checkout. Meu Guia Visual Hook do WooCommerce para a Página de Checkout é perfeito para o que precisamos.

Docs : WooCommerce tem um bom documento que explica como personalizar os campos de checkout. Em um dos snippets, removeremos alguns dos campos de cobrança/envio, portanto, esta é uma referência obrigatória.

1. PHP Snippet: Remova o cabeçalho, a barra lateral e o rodapé @ WooCommerce Checkout Page

Este snippet é válido apenas para o tema Storefront . Você precisará ajustar o código para o seu tema personalizado.

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

No Storefront, depois de remover a barra lateral com a chamada remove_action acima, o layout não se ajustará automaticamente à largura total. A barra lateral desaparecerá, mas seu “espaço” permanecerá lá e empurrará o formulário de checkout para a esquerda.

Isso significa que também precisamos de um pouco de CSS para corrigir isso:

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

2. CSS Snippet: Mover a revisão do pedido para o canto superior direito @ WooCommerce Checkout Page

O tema Storefront já faz isso de imediato! Então, parece que eles também estudaram as tendências de comércio eletrônico e decidiram que era a escolha certa.

Claro, a maioria dos temas não faz isso por padrão. Para inspiração, você pode tentar copiar o CSS do Storefront (talvez seja necessário alterar alguns seletores):

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

Agora, eu também gostaria de tornar toda a Revisão de Pedidos “pegajosa”. O que significa que, uma vez que um usuário rola para baixo para preencher os campos de checkout, por exemplo, a caixa Order Review (agora no canto superior direito) deve permanecer visível e “fixa” na parte superior do navegador.

Eu tentei o seguinte CSS, mas infelizmente não parece funcionar (tema Storefront). Você pode ajudar talvez?

#order_review {
    position: sticky;
    top: 0;
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

3. PHP Snippet: Mova o formulário de cupom para a parte inferior @ WooCommerce Checkout Page

Podemos usar o guia Visual hook para o checkout para isso. Primeiro, nós o removemos, depois o lemos na parte inferior.

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

4. PHP Snippet: Mantenha o formulário de envio sempre “aberto” @ WooCommerce Checkout Page

Felizmente, se você observar o arquivo de modelo form-shipping.php, o WooCommerce nos fornece um filtro aqui:

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

O que significa que agora posso codificar um snippet PHP simples para substituir esse comportamento:

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

5. CSS Snippet: Mova o formulário de cobrança abaixo do formulário de envio @ WooCommerce Checkout Page

Em primeiro lugar, os formulários de Cobrança e Envio devem ser feitos em largura total. O tema Storefront já faz isso, então caso você esteja usando outro tema, tente com este:

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

Uma vez que você tenha Faturamento e Remessa um acima do outro, queremos agora apresentar o formulário de Remessa primeiro (superior) e o formulário de Faturamento depois (inferior). Fazer isso com PHP é possível, mas há uma maneira muito mais simples de fazer isso: CSS flex .

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

Em poucas palavras, estou declarando que os detalhes do cliente (invólucro de formulários de cobrança e envio) são exibidos como “flex”. Dessa forma, posso usar a propriedade “order” e alternar a ordem vertical dos divs Billing e Shipping.

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

6. Snippet PHP: Divida o layout longo feito de faturamento, envio, revisão de pedidos em etapas visuais @ WooCommerce Checkout Page

Aqui usamos mais uma vez o guia visual do gancho e imprimimos 3 novas divs em posições específicas (acima do envio, acima do faturamento, acima da revisão do pedido).

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

Claro que também precisamos de algum CSS:

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

7. PHP Snippet: Remova campos de cobrança/envio desnecessários @ WooCommerce Checkout Page

Aqui, a referência de documentação que compartilhei acima vem em socorro. O filtro “ woocommerce_checkout_fields ” nos permite “desmarcar” campos que não precisamos.

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

8. PHP Snippet (Ideia): Faça com que a seleção do método de envio se destaque mais @ WooCommerce Checkout Page

Este é o trecho mais difícil, e isso ocorre porque o WooCommerce não é realmente flexível nesse sentido. Para demonstrar isso, primeiro precisamos descobrir como o formulário do método de envio é gerado.

No modelo de “revisão de pedido” de checkout encontramos este PHP:

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

   <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

   <?php wc_cart_totals_shipping_html(); ?>

   <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

É evidente que precisamos estudar como funciona a função wc_cart_totals_shipping_html() , para ver se existem filtros que nos permitem personalizar a saída.

Infelizmente, essa função simplesmente chama o arquivo de modelo cart-shipping.php graças à função wc_get_template() ; Digo infelizmente porque esse mesmo modelo também é usado na página do carrinho.

Agora, isso está ficando mais complicado do que eu, mas se quisermos tirar o formulário do método de envio dessa tabela de revisão de pedidos, basicamente precisamos escrever ou possuir um modelo personalizado (por exemplo, checkout-shipping.php), colocá-lo no / woocommerce do nosso tema filho e, em seguida, use o filtro wc_get_template para carregar nosso modelo alternativo apenas na página de checkout. Meio complexo, mas factível - vou deixar isso para você

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

9. Snippet PHP: Adicione um link “editar carrinho” @ WooCommerce Checkout Page

Como removemos todos os links da página de Checkout, é justo dar ao usuário a chance de voltar à página do Carrinho caso queira alterar quantidades ou remover produtos.

Você pode escolher qualquer gancho do WooCommerce Checkout, mas neste caso eu selecionei o “woocommerce_checkout_before_order_review”, que está posicionado logo abaixo do título “Your Order”.

/**
 * @snippet       Add edit cart link @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );

function bbloomer_edit_cart_checkout() {
	echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}

Com um pouco de CSS, você também pode posicioná-lo na mesma linha de “Your Order” e economizar espaço.

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

10. PHP Snippet: Adicione o número de telefone @ WooCommerce Checkout Page

Você pode adicionar o conteúdo que desejar à página do Checkout, principalmente se isso ajudar os clientes em potencial a confiar em sua empresa.

Normalmente, você adicionaria crachás de pagamento seguros, perguntas frequentes ou links de contato, além de uma maneira imediata de entrar em contato com você (chat ao vivo e número de telefone).

Então, é assim que você adiciona um número de telefone logo abaixo do botão “POR ENCOMENDA” na página de checkout.

/**
 * @snippet       Phone Number @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );

function bloomer_phone_checkout_page() {
	?>
	<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
	<?php
}

Precisa de uma prova visual? Clique aqui para ver as capturas de tela de personalização da página do WooCommerce Checkout “antes” e “depois”.

Personalização da página de checkout do WooCommerce: capturas de tela “Antes” e “Depois”

Antes da

Depois