WooCommerce: Coloque carrinho e checkout na mesma página

Publicados: 2018-10-17

Este é o seu melhor guia - completo com códigos de acesso, trechos e soluções alternativas - para pular completamente a página do carrinho e ter a tabela do carrinho e o formulário de checkout na mesma página.

Mas primeiro... por que você quer fazer isso? Bem, se você vende produtos de alto valor (ou seja, em média, você vende aproximadamente um produto por pedido), se deseja salvar uma etapa adicional (duas etapas convertem melhor que três: “Adicionar ao carrinho” > ~~“Página do carrinho”~~ > “Página de Checkout” – e isso não é ciência de foguetes), se o seu fluxo de trabalho personalizado e os objetivos de comércio eletrônico exigirem que você gerencie o carrinho e o checkout todos juntos, bem, este tutorial é para você.

Há uma mistura de códigos de acesso, configurações e trechos de PHP que você pode usar para fazer isso funcionar fora da caixa. E acredite, isso é mais fácil do que você pensa.

Enquanto muitos desenvolvedores decidem transformar o processo de checkout em um “ Multi-Step Checkout ” (ehm, não sei por que – quanto mais etapas, maior a probabilidade de haver um abandono de carrinho), aqui veremos exatamente o oposto.

Então, como eles fazem isso?

Bem, aqui está o guia completo, fácil e passo a passo para colocar Carrinho e Finalizar Compra na mesma página . Experimente, faça alguns testes e rastreamento do WooCommerce e veja se converte melhor

Etapa 1: adicione o código de acesso do carrinho na página de checkout

Primeiro, você precisa adicionar o código de acesso “woocommerce_cart” à página Checkout. Dessa forma, estamos dizendo ao WooCommerce que queremos ter a tabela do carrinho na parte superior e o formulário de checkout abaixo dela .

Atualização: 19/10/2018. Na primeira versão deste tutorial, sugeri adicionar o shortcode [woocommerce_cart] acima do shortcode “woocommerce_checkout” na página Checkout (captura de tela). Infelizmente, isso cria um bug na “página de agradecimento” depois que um pedido é feito. Na verdade, uma mensagem de “carrinho vazio” é exibida lá, pois o conteúdo da página Checkout (que inclui o código de acesso do carrinho) também é exibido na página de agradecimento (não sei por quê!). Portanto, precisamos encontrar uma maneira de carregar o código de acesso [woocommerce_cart] na página Checkout, MAS não na página de agradecimento. Aqui está a correção, e sim, é um trecho de PHP puro.

PHP Snippet: Exiba a tabela do carrinho acima do formulário de checkout @ WooCommerce Checkout page

/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Com essa pequena alteração, sua nova página de Checkout ficará como na captura de tela a seguir. Observe - se você estiver familiarizado com o layout da página do carrinho, você pode se lembrar da seção "Cart Collaterals" (ou seja, " Totais do carrinho ", onde o subtotal, frete e totais são exibidos)... bem, isso é ocultado automaticamente apenas porque você ' está usando os dois códigos de acesso na mesma página. Isso não é maravilhoso?

Carrinho e finalização da compra na mesma página: visualização da página de finalização da compra

Etapa 2: Desativar a página do carrinho @ Configurações do WooCommerce (atualizado para Woo 3.7+)

Provavelmente, a alteração do código de acesso por si só é suficiente para obter o que você precisa (Cart e Checkout na mesma página). No entanto, alguns ajustes são necessários caso você realmente queira fazer isso direito.

Na verdade, se o Checkout for esvaziado (quer dizer, o carrinho for esvaziado na página Checkout), o WooCommerce redirecionará os usuários para a página do carrinho e exibirá a mensagem do carrinho vazio (“Retornar à loja”).

Agora, nosso objetivo é se livrar completamente da página Carrinho para que os usuários nunca a vejam.

Atualização: 21/08/2019. Até o WooCommerce 3.7 era possível definir a página “Checkout” como páginas “Cart” e “Checkout”. Isso não é mais possível, então basta seguir as novas instruções.

Por esse motivo, você precisa desmarcar a página do carrinho (em WooCommerce> Configurações> Avançado) – basta clicar no pequeno “x” e “Salvar alterações”. Aqui está a captura de tela atualizada desde o WooCommerce 3.7:

Desativando a página do carrinho das configurações do WooCommerce (a partir do WooCommerce 3.7)

Etapa 3: excluir a página do carrinho @ páginas do WordPress

Não há necessidade de uma captura de tela aqui.

Agora que a página do carrinho não é mais útil, é hora de excluí-la de suas páginas do WordPress . Os redirecionamentos já estão em vigor e sua tabela de carrinho já está na página Checkout, então não há necessidade de se preocupar.

Vá em frente e coloque a página do carrinho na lixeira!

Etapa 4 (bônus): redirecionar checkout vazio

Depois, há uma pequena solução caso você não queira mostrar uma página de Checkout vazia se os usuários a acessarem diretamente ou quando a tabela do carrinho estiver vazia.

Por exemplo, você pode querer redirecionar carrinhos vazios para a página inicial, ou talvez para a página da loja (ou melhor ainda, para o último produto visualizado), para que os clientes possam começar a comprar novamente.

Aqui está um pequeno trecho para você – um pequeno bônus – para que você possa redirecionar a página de checkout vazia para a página inicial, por exemplo. Experimente!

Snippet PHP: Redirecionar carrinho vazio @ WooCommerce Checkout com carrinho

/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_home() {
	if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
		wp_safe_redirect( home_url() );
		exit;
	}
}