Como editar a página de checkout do WooCommerce
Publicados: 2021-07-21
Deseja editar a página de checkout em sua loja WooCommerce? Continue lendo, pois forneceremos uma solução para você.
É importante observar que a página de checkout é onde os clientes pagam pelo produto ou serviço que você está oferecendo em sua loja. Portanto, você deve obtê-lo apenas para a direita.
No entanto, o WooCommerce fornece uma configuração padrão, mas pode ser necessário personalizá-la por necessidade, pois não possui uma aparência profissional. Isso ajudará você a aumentar suas taxas de conversão.
Como editar a página de checkout do WooCommerce
Existem duas maneiras de personalizar a página:
- Modelo de checkout personalizado – a documentação do WooCommerce afirma claramente que você pode copiar o modelo de checkout para o seu tema em uma estrutura de pastas como esta: woocommerce/checkout/form-checkout.php. Isso significa que você pode personalizar form-checkout.php dependendo de seus requisitos.
- Plugins – Há uma variedade de extensões disponíveis para personalizar a página de checkout. Alguns deles estão disponíveis gratuitamente, enquanto alguns são extensões pagas.
- Código personalizado – Este método é um pouco complicado e requer algum conhecimento técnico para você implementar as soluções. No entanto, esta é uma solução perfeita se você quiser apenas fazer uma pequena edição e não quiser comprar um plugin. Vamos usar este método neste tutorial.
Etapas para editar a página de checkout do WooCommerce
Antes de começarmos, vale a pena mencionar que o WooCommerce possui ganchos de ação em todas as páginas. Ganchos de ação podem ser usados para adicionar ou remover elementos da página de checkout. Existem 9 ganchos de ação na página de checkout:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
Além disso, existem 7 ganchos adicionais que podem estar disponíveis, dependendo do layout do seu tema. Você pode vê-los aqui.
Decidimos compartilhar alguns exemplos para ajudá-lo. Aqui estão os passos que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página do Editor de Temas for aberta, procure o arquivo de funções do tema onde adicionaremos a função que adicionará uma mensagem ao cliente sobre os detalhes de envio .
- Adicione o seguinte código ao arquivo php :
add_action( 'woocommerce_before_checkout_shipping_form', function() {
echo 'Don\'t forget to include your unit number in the address!';
});
- Este é o resultado:
- Se você quiser manipular qualquer campo, pode usar o filtro woocommerce_checkout_fields. Por exemplo, para remover o campo de número de telefone de cobrança, adicione o seguinte código ao mesmo arquivo:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_phone']); return $fields; }
- Para adicionar um campo de número de telefone de envio, adicione o seguinte código:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'placeholder'=> _x('Phone', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );
function njengah_custom_checkout_field_display_admin_order_meta($order){
global $post_id;
$order = new WC_Order( $post_id );
echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}
- Para alterar o espaço reservado do campo CEP ou Código Postal, adicione o seguinte código:
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
return $fields;
}
Conclusão
Em resumo, compartilhamos como você pode usar os ganchos de ação do WooCommerce para editar a página de checkout. É importante observar que você pode visualizar a documentação do WooCommerce aqui.
Se você não estiver familiarizado com a codificação, recomendamos o uso de um plugin. Você também pode consultar um desenvolvedor WordPress qualificado.
Esperamos que este tutorial tenha ajudado você a encontrar uma solução para o seu problema.
Artigos semelhantes
- Como configurar o arquivo de upload do WooCommerce no checkout
- Como adicionar conteúdo abaixo do título do produto em destaque Storefront
- Como adicionar verificação de e-mail de registro WooCommerce
- Como criar paginação numérica no WordPress sem usar plugin
- Guia completo para usar ganchos personalizados do WordPress do_action & apply_filters com exemplos
- Como configurar o carrinho e o checkout do WooCommerce na mesma página
- Como personalizar a página de categoria de produto no WooCommerce
- WooCommerce Criar página de produto único personalizado
- Como adicionar a calculadora de envio WooCommerce na página do carrinho
- WooCommerce Aceitar Termos e Condições Caixa de seleção no formulário de registro
- Como adicionar o botão Visualizar carrinho no WooCommerce
- Como obter o produto atual WooCommerce
- Como adicionar campos de produtos personalizados WooCommerce
- Como alterar o modelo de e-mail no WooCommerce
- Como configurar o WooCommerce Compre um e ganhe um
- Como adicionar o PayPal Express Checkout ao WooCommerce
- Como alterar o texto do placeholder do campo de checkout do WooCommerce