Como adicionar campos personalizados à página de checkout do WooCommerce
Publicados: 2020-07-21Quer personalizar seu checkout ? Neste guia, mostraremos como adicionar campos personalizados à página de checkout no WooCommerce para levar sua loja ao próximo nível.
Por que personalizar o checkout do WooCommerce?
No QuadLayers, vimos anteriormente como personalizar a página da loja no WooCommerce. Hoje, veremos como fazer o mesmo e incluir campos personalizados no checkout. O checkout é uma das páginas mais importantes de qualquer loja online . É onde você quer levar seus compradores para que eles concluam a compra e você feche a venda. Portanto, para melhorar suas taxas de conversão e receita, é essencial otimizar o checkout com campos personalizados.
Como é a página de checkout perfeita? Isso depende muito do seu negócio. Por exemplo, o checkout de produtos físicos é diferente do de produtos digitais. Você escolhe um checkout de uma página ou várias páginas, exibe ou oculta campos, usa cores diferentes e assim por diante. Porém, o mais importante é que seu checkout gere confiança no usuário, não tenha distrações e seja otimizado para que o shopper gaste o menor tempo possível.
Como adicionar campos personalizados à página de checkout do WooCommerce?
Existem duas maneiras principais de adicionar ou ocultar campos personalizados na página de checkout no WooCommerce:
- Com plug-ins
- Programaticamente
Se você não tem habilidades de codificação, recomendamos que você confira estes plugins:
- WooCommerce Direct Checkout : É uma excelente ferramenta para simplificar o processo de checkout e redirecionar os usuários da página do produto para o checkout. Tem uma versão gratuita e planos premium que começam em 19 USD.
- WooCommerce Checkout Manager : Com mais de 90.000 instalações ativas, o Checkout Manager é um ótimo plugin para aumentar suas taxas de conversão. Ele permite que você adicione, personalize e exclua campos na página de checkout. É uma ferramenta freemium com versão gratuita e planos pro a partir de 19 USD.
Esses plugins de checkout são excelentes opções e farão o trabalho sem problemas. No entanto, se você não quiser instalar nenhum plug-in, poderá codificar sua solução. Neste guia, vamos nos concentrar em como você pode adicionar campos personalizados à página de checkout do WooCommerce com alguma codificação . 
Adicione campos personalizados ao checkout do WooCommerce programaticamente
Nesta seção, você aprenderá como adicionar campos personalizados à página de checkout do WooCommerce programaticamente . Vamos mostrar como incluir:
- Texto
- Caixa de seleção
- Tipos de entrada de rádio
Existem outros campos personalizados que você pode adicionar, mas esteja ciente de que eles podem precisar de algum tipo de validação. Portanto, neste tutorial, vamos nos concentrar nesses 3 tipos e pular campos que exigem validação dos valores inseridos. Além disso, exibiremos campos personalizados na lista de pedidos de back-end e nos modelos de email.
NOTA : Lembre-se de que se você deseja adicionar outros campos aos seus projetos, deve implementar uma validação de segurança.
Portanto, para adicionar campos personalizados à página de checkout do WooCommerce, existem duas opções:
- Você pode codificar seus scripts em um tema filho
- Criar um plug-in personalizado
Para construir uma solução mais escalável e bem organizada, vamos criar um plugin personalizado . Além disso, ao contrário da abordagem do tema filho, um plugin personalizado também pode ser o ponto de partida de um desenvolvimento adicional. No entanto, se você preferir usar um tema filho, recomendamos que você confira este guia.
Adicione campos personalizados ao checkout do WooCommerce com um plug-in personalizado
O plugin personalizado que vamos construir terá três arquivos.
- Principal
- A parte dianteira
- Processo interno
O arquivo principal atua como uma entrada de gateway para o arquivo de front-end, que usaremos para nossos scripts de front-end. Além disso, incluiremos o terceiro arquivo, onde estão os scripts de back-end. Vale a pena notar que este arquivo de front-end será o arquivo base principal e deve ser movido para um arquivo de hierarquia de baixo nível (assim como nosso arquivo de back-end) se você adicionar mais classes. Então agora, vamos ver como adicionar campos personalizados à página de checkout do WooCommerce usando um plugin personalizado .
1. Abra seu IDE favorito e crie uma pasta com três arquivos:
QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (arquivo de frontend) /__/__class_qlccf_back.php (arquivo de backend) /__QuadLayers_checkout_fields.php (arquivo principal)
2. Arquivo Principal
O arquivo principal é QuadLayers_checkout_fields.php :
<?php
/**
* @link https://quadlayers.com/
* @desde 1.0.0
* Nome do Plugin: Campos personalizados de Checkout QuadLayers
* URI do plug-in: https://quadlayers.com/
* Descrição: Plugin para criar campos personalizados na página de checkout do WooCommerce, imprimir em pedidos de back-end e modelos de e-mail
* Versão: 1.0.0
* Autor: Sebastopolys
* URI do autor: https://quadlayers.com/
* Domínio do texto: qlccf
*/
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
classe final run_init{
função estática pública run(){
return include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
}
}
run_init::run();
}
senão{
echo "<h3>ERRO - Classe run_init existente em QuadLayers_checkout_fields.php!</h3>";
}
Você pode alterar as informações do plug-in, a função e os nomes dos arquivos e colocar os seus próprios. Mas sugerimos que você primeiro copie e cole os scripts sem editar nada para entender melhor como eles funcionam.
3. Arquivo de classe de front-end
O arquivo de front-end é class_qlccf_base.php . É aqui que mora a classe principal e onde você pode incluir um número ilimitado de classes e funções. Uma classe abstrata não pode ser instanciada, então ela deve ser herdada por alguma outra classe. Aqui está o arquivo front-end e uma explicação detalhada após o código:
<?php
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('base_class')){
classe abstrata classe_base{
public const VERS = '1.1.0';// <-- Versão do plugin
public const PREFIX = 'qlccf';// <-- Plugin prefix
public const PLDIR = __DIR__ ;// <-- Plugin Dir path
public const PLPAT = __FILE__ ;// <-- Caminho do arquivo
função pública add_base_hooks(){
add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));
add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
}
//inserir caixa de seleção no checkout do woocommerce - gancho: after_order_notes
função pública quadlayers_subscribe_checkout($checkout) {
woocommerce_form_field( 'assinante', array(
'tipo' => 'caixa de seleção',
//'obrigatório' => verdadeiro,
'class' => array('campo personalizado form-row-wide'),
'label' => 'Assine nossa newsletter.'
), $checkout->get_value( 'assinante' ) );
}
// Inserir texto no checkout woocommerce - hook: after_billing_form
função pública quadlayers_email_checkout($checkout2){
woocommerce_form_field( 'altmail', array(
'tipo' => 'e-mail',
//'obrigatório' => verdadeiro,
'class' => array('campo personalizado form-row-wide'),
'label' => 'E-mail alternativo.'
), $checkout2->get_value( 'altmail' ) );
}
// Inserir campo personalizado de rádio no checkout woocommerce - hook: before_order_notes
função pública quadlayers_radio_checkout($checkout3){
woocommerce_form_field( 'feed', array(
'tipo' => 'rádio',
//'obrigatório' => verdadeiro,
'class' => array('campo personalizado form-row-wide'),
'label' => 'Como você nos encontrou?.',
'opções' => array(
'Google' => 'Google',
'Amigo' => 'Amigo',
'Facebook' => 'Facebook',
'Youtube' => 'YoutTube',
'Outro' => 'Outro'
)
));
}
// salva todos os valores de campos personalizados
função pública quadlayers_save_function( $order_id ){
if ( ! empty( $_POST['assinante'] ) ) {
update_post_meta( $order_id, 'assinante', sanitizar_text_field( $_POST['suscriptor']) );
}
if ( ! empty( $_POST['altmail'] ) ) {
update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}
}// Incluir classe de back-end
include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
senão{
echo "<h3>ERRO DE INICIALIZAÇÃO - Classe base_class existente!</h3>";
}
Após declarar a classe, definimos algumas constantes que podemos usar posteriormente. Em seguida, incluímos todos os ganchos do WooCommerce que vamos usar em um único método, que chamamos de add_base_hooks() .
Como uma classe abstrata não pode ser instanciada, executamos esse método de nosso arquivo de backend para que ele execute todos os ganchos declarados aqui. Usamos cada um dos ganchos para uma tarefa diferente, atribuindo um dos seguintes métodos a cada um deles. Ou seja , este gancho: woocommerce_after_order_notes em nosso método add_base_hooks() executa o método quadlayers_subscribe_checkout() , ambos definidos dentro da classe base_class .
Observe como usamos algumas das funções do WordPress e WooCommerce: woocommerce_form_field() Ele gera um campo personalizado no formulário de checkout do WooCommerce. update_post_meta() Esta função nativa do WordPress é amplamente usada para atualizar os metadados do banco de dados de postagens, produtos e outros tipos de postagem personalizados. Além disso, os tipos de campos de entrada disponíveis são:
| texto | selecionar | rádio |
| senha | data hora | datetime-local |
| encontro | mês | Tempo |
| semana | número | o email |
| URL | telefone |
4. O arquivo de back-end, class_qlccf_back.php
É aqui que a classe qlccf_back_class herda base_class previamente definida no class_qlccf_base.php file :
<?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
class qlccf_back_class estende base_class{
função pública __construct(){
parent::add_base_hooks();
if(is_admin()):
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
add_action( 'woocommerce_email_order_meta',array($this,'qlccf_email_template'));
fim se;
}
# exibe o valor dos campos personalizados na lista de pedidos de back-end
função pública qlccf_column_content($column){
global $post;
if ('assinante' === $coluna) { # Caixa de seleção
$pedido = wc_get_order( $post->ID);
$c_meta = $pedido->get_meta('subscritor');
if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
else:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
fim se;
echo '<img src="'.$img_url.'"/>';
}
elseif('altmail' === $column ){ # Email alternativo
$pedido = wc_get_order( $post->ID);
$e_meta = $pedido->get_meta('altmail');
echo $e_meta;
}
senão{}
}
# Definir coluna da caixa de seleção
função pública qlccf_checkbox($columns){
$columns['suscriptor'] = __( 'Suscritor');
retornar $colunas;
}
# Definir coluna de e-mail alternativo
função pública qlccf_email($columns1){
$columns1['altmail'] = __( 'Email alternativo');
return $colunas1;
}
# Incluir o campo Alt Mail no tamplate de email do WC
função pública qlccf_email_template($order_obj){
$is_set = get_post_meta( $order_obj->get_order_number());
// retorna se nenhum campo personalizado estiver definido
if(vazio($is_set))
Retorna;
// ok, vamos em frente e ecoamos o campo personalizado
$alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true);
echo '<h2>Meu campo personalizado</h2><p>E-mail alternativo:'.$alt_email.'</p>';
}
}
$run=new qlccf_back_class;
fim se;
Neste arquivo, definimos um construtor para executar os ganchos de front-end que declaramos em nosso outro arquivo. Em seguida, adicionamos os ganchos necessários para exibir os campos personalizados na lista de pedidos de back-end e modelos de e-mail WooCommerce usando um if() condicional e a função do WordPress is_admin() para aplicá-lo apenas se o usuário estiver na tela de back-end do administrador. O gancho manage_shop_order_posts_custom_column() insere uma coluna na lista de pedidos, para que possamos exibir campos em nossa função qlccf_column_content() .
Uma vez que estamos conectados ao loop WooCommerce, verificamos se o nome do campo pertence a um de nossos campos personalizados e, se pertencer, o imprimimos. Usando um if()else condicional, podemos verificar todos os nossos campos personalizados na mesma função.
Depois disso, criamos uma caixa de seleção e colunas de campo personalizado de texto na lista de pedidos de back-end. Precisamos definir nossas colunas personalizadas para exibir nossos campos personalizados do WooCommerce assim que o cliente concluir o processo de checkout e o pedido for criado.
Por fim, no último método, usamos o gancho woocommerce_email_order_meta para exibir nosso campo de texto personalizado no modelo de email do administrador. Funções do WordPress e WooCommerce usadas:
wc_get_order() : Obtém o objeto de pedido atual com todos os dados anexados a ele
get_meta() : Para obter os metadados do pedido
get_post_meta() : Obtém os valores de nossos campos personalizados salvos no banco de dados
get_order_number() : Para obter o número de identificação do pedido atual 
Empacotando
Em suma, personalizar a página de checkout é uma obrigação para qualquer loja online. Neste guia, mostramos como adicionar campos personalizados à página de checkout do WooCommerce programaticamente com um pouco de codificação. Você aprendeu como criar um plugin personalizado passo a passo para otimizar o checkout.
Além disso, se você quiser personalizar a página de checkout e levá-la ao próximo nível, recomendamos que você confira este guia passo a passo.
Você já tentou este método? Você pode pensar em maneiras de melhorá-lo? Por favor, compartilhe suas experiências conosco na seção de comentários abaixo!
Se você deseja melhorar suas conversões no WooCommerce, recomendamos que você dê uma olhada nestes guias:
- Melhores botões de compra rápida para WooCommerce
- Como otimizar o checkout no WooCommerce
- Como editar a página da loja no WooCommerce via codificação?