Como editar a página de checkout do WooCommerce (código + plugins)

Publicados: 2023-02-11
Índice ocultar
1. O que personalizar na página de checkout do WooCommerce?
2. Como editar a página de checkout do WooCommerce usando código?
2.1. Customização via tema (modelo de checkout)
2.2. Customizando via CSS
2.3. Personalizando usando ganchos de checkout WooCommerce
2.4. Código personalizado
2.4.1. Remova o campo do número de telefone de cobrança
2.4.2. Adicione o campo de número de telefone de envio
2.4.3. Alterar o espaço reservado do campo
3. Como personalizar a página de checkout do WooCommerce usando um plugin?
4. Encerramento

A página de checkout padrão do WooCommerce é boa, mas não otimizada para conversões.

A página de checkout que é visualmente atraente e possui campos mínimos, mas obrigatórios, estimulará mais visitantes a fazer uma compra.

Então, como editar a página de checkout do WooCommerce para obter mais vendas?

Vejamos o código e alguns plugins populares para personalizar a página de checkout.

O que personalizar na página de checkout do WooCommerce?

A página de checkout padrão do WooCommerce pode não ser tão irritante para os clientes, mas tem suas próprias desvantagens. Aqui está o que você pode personalizar na página de checkout:

  • Substitua as fontes, cores, logotipo e estilos padrão do WooCommerce para combinar com sua marca.
  • Acelere o processo ativando o checkout de uma página
  • Adicione campos de checkout personalizados relevantes ou remova algumas informações adicionais.
  • Adicione aumentos de pedidos para promover produtos relacionados
  • Modifique as opções de envio
  • Adicione opções de impostos e cupons na finalização da compra
  • Habilitar ou desabilitar gateways de pagamento
  • Edite o texto do botão CTA e o texto do campo predefinido

e mais alguns…

Aqui está um exemplo de checkout de uma página usando o plugin Cashier.

Caixa WooCommerce checkout de uma página

Como editar a página de checkout do WooCommerce usando código?

Vamos ver como editar a página de checkout do WooCommerce gratuitamente, ou seja, com algum código.

Na codificação, podemos personalizá-lo das seguintes maneiras:

  1. Através do tema
  2. Usando CSS
  3. Ganchos (ações e filtros)
  4. Código personalizado

Customização via tema (modelo de checkout)

Você pode fazer a maior parte da personalização usando ganchos, mas para editar a marcação na página de checkout, você também pode fazer isso em um tema.

Agora, de acordo com a documentação do WooCommerce, copie o modelo de checkout para o seu tema em uma estrutura de pastas como esta: woocommerce/checkout/form-checkout.php .

Você pode personalizar o form-checkout.php conforme desejado e ele será carregado em vez do modelo padrão.

Customizando via CSS

As classes CSS podem mudar com base no seu tema ou plugins, mas as classes padrão geralmente estão disponíveis.

Você pode personalizar essas classes usando CSS personalizado em um tema filho ou o personalizador. Aqui estão as principais tags de alto nível, com classes e IDs que você pode usar.

  • <body class="woocommerce-checkout">
  • <div class="woocommerce">
  • <form class="woocommerce-checkout"> <div id="customer_details" class="col2-set">
  • <div class="woocommerce-billing-fields">
  • <p class="form-row">
  • <div class="woocommerce-shipping-fields">
  • <p class="form-row">
  • <div class="woocommerce-additional-fields">
  • <div id="order_review" class="woocommerce-checkout-review-order"><table class="woocommerce-checkout-review-order-table">
  • <div id="payment"> <ul class="wc_payment_methods payment_methods method"><div class="form-row place-order">

Por exemplo:

form.woocommerce-checkout input[type="text"] {
    raio da borda: 3px;
    cor de fundo: #ccc;
    cor: #444;
}

Personalizando usando ganchos de checkout WooCommerce

Existem 28 ganchos de ação disponíveis para adicionar ou remover elementos da página de checkout.

Ganchos de checkout do WooCommerce visuais
  1. woocommerce_before_checkout_form
  2. woocommerce_checkout_before_customer_details
  3. woocommerce_checkout_billing
  4. woocommerce_before_checkout_billing_form
  5. woocommerce_after_checkout_billing_form
  6. woocommerce_before_checkout_registration_form
  7. woocommerce_after_checkout_registration_form
  8. woocommerce_checkout_shipping
  9. woocommerce_before_checkout_shipping_form
  10. woocommerce_after_checkout_shipping_form
  11. woocommerce_before_order_notes
  12. woocommerce_after_order_notes
  13. woocommerce_checkout_after_customer_details
  14. woocommerce_checkout_before_order_review_heading
  15. woocommerce_checkout_order_review
  16. woocommerce_checkout_before_order_review
  17. woocommerce_review_order_before_cart_contents
  18. woocommerce_review_order_after_cart_contents
  19. woocommerce_review_order_before_shipping
  20. woocommerce_review_order_after_shipping
  21. woocommerce_review_order_before_order_total
  22. woocommerce_review_order_after_order_total
  23. woocommerce_review_order_before_payment
  24. woocommerce_review_order_before_submit
  25. woocommerce_review_order_after_submit
  26. woocommerce_review_order_after_payment
  27. woocommerce_checkout_after_order_review
  28. woocommerce_after_checkout_form

Por exemplo, para adicionar um formulário ou campo após os detalhes de cobrança na página de checkout , você pode usar o seguinte gancho:

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
function storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
	// Adicione seu formulário ou campo aqui
}

Para obter mais detalhes sobre como usar cada gancho, consulte nosso guia de ganchos de checkout WooCommerce.

Código personalizado

Isso é mais complicado, mas se você for um desenvolvedor, veja como fazê-lo:

WooCommerce tem vários filtros disponíveis para editar campos de checkout, incluindo woocommerce_checkout_fields , woocommerce_billing_fields e woocommerce_shipping_fields .

Você pode usar o filtro 'woocommerce_checkout_fields' para manipular todos os campos de checkout.

Remova o campo do número de telefone de cobrança

add_filter('woocommerce_checkout_fields', 'storeapps_modify_checkout_fields');
função storeapps_modify_checkout_fields( $fields ) {
	unset($fields['billing']['billing_phone']);
	retornar $campos;
}

Adicione o campo de número de telefone de envio

add_filter('woocommerce_checkout_fields', 'storeapps_modify_checkout_fields');
função storeapps_modify_checkout_fields( $fields ) {
	$fields['shipping']['shipping_phone'] = array(
		'rótulo' => __('Telefone', 'woocommerce'),
		'espaço reservado' => _x('Telefone', 'espaço reservado', 'woocommerce'),
		'obrigatório' => falso,
		'class' => array('form-row-wide'),
		'claro' => verdadeiro
	);
	retornar $campos;
}

/**
 * Para exibir o valor do campo na página de edição do pedido
 */
add_action( 'woocommerce_admin_order_data_after_shipping_address', 
'storeapps_custom_checkout_field_display_admin_order_meta');
função storeapps_custom_checkout_field_display_admin_order_meta($ordem){
	global $post_id;
	$ordem = wc_get_order($post_id);
	echo '<p><strong>'.__('Valor do campo', 'woocommerce').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

Para editar um campo, você pode acessar os atributos do campo. Por exemplo, vamos alterar o espaço reservado para CEP para CEP.

Alterar o espaço reservado do campo

add_filter( 'woocommerce_checkout_fields', 'storeapps_modify_checkout_fields' );
função storeapps_modify_checkout_fields( $fields ) {
	$fields['billing']['billing_postcode']['placeholder'] = __( 'Código Postal', 'woocommerce' );
	retornar $campos;
}

Sugerimos que você consulte nosso blog sobre como adicionar snippets de código com segurança.

Como personalizar a página de checkout do WooCommerce usando um plugin?

Se você não quiser ter problemas de codificação, usar um plug-in do editor de campo de checkout é a melhor e mais fácil opção.

E Cashier for WooCommerce é o plugin que você precisa.

O Cashier fornece uma interface do usuário simples para editar/adicionar/remover os principais campos do WooCommerce e também adicionar campos personalizados para um checkout otimizado nas três seções – Cobrança, Frete e Adicional.

Editor de campo de checkout de caixa WooCommerce

Você pode editar, habilitar, desabilitar e remover os campos de checkout padrão; reorganize-os, valide-os, altere os rótulos, redefina os padrões e também adicione classes CSS personalizadas … tudo isso com uma interface fácil e amigável.

Obtenha as informações necessárias dos compradores adicionando novos campos à sua página de checkout do WooCommerce.

Não apenas o editor de campo de checkout, o Cashier também fornece check-out em uma página, check-out direto usando os botões Comprar agora, carrinho lateral, frequentemente comprados juntos e outras melhorias.

Acabando

Esperamos que este artigo tenha ajudado você a personalizar facilmente a página de checkout do WooCommerce.

Para qualquer dúvida ou sugestão, deixe seus comentários abaixo.