Cómo agregar campos personalizados a la página de pago de WooCommerce

¿Quieres personalizar tu pago ? En esta guía, le mostraremos cómo agregar campos personalizados a la página de pago en WooCommerce para llevar su tienda al siguiente nivel.

¿Por qué personalizar el pago de WooCommerce?

En QuadLayers, hemos visto anteriormente cómo personalizar la página de la tienda en WooCommerce. Hoy veremos cómo hacer lo mismo e incluir campos personalizados en el pago. La caja es una de las páginas más importantes de cualquier tienda online . Es donde desea llevar a sus compradores para que completen la compra y usted cierre la venta. Por lo tanto, para mejorar sus tasas de conversión e ingresos, es imprescindible optimizar el proceso de pago con campos personalizados.

¿Cómo es la página de pago perfecta? Eso depende mucho de tu negocio. Por ejemplo, el pago de productos físicos es diferente al de productos digitales. Puede elegir un pago de una página o de varias páginas, mostrar u ocultar campos, usar diferentes colores, etc. Sin embargo, lo más importante es que tu checkout genere confianza en el usuario, no tenga distracciones y esté optimizado para que el comprador pase el menor tiempo posible.

¿Cómo agregar campos personalizados a la página de pago de WooCommerce?

Hay dos formas principales de agregar u ocultar campos personalizados en la página de pago en WooCommerce:

• Con complementos
• Programáticamente

Si no tiene habilidades de codificación, le recomendamos que consulte estos complementos:

• Pago directo de WooCommerce : es una excelente herramienta para simplificar el proceso de pago y redirigir a los usuarios de la página del producto al pago. Tiene una versión gratuita y planes premium que comienzan en 19 USD.
  
• Administrador de pago de WooCommerce : Con más de 90,000 instalaciones activas, el Administrador de pago es un excelente complemento para aumentar sus tasas de conversión. Le permite agregar, personalizar y eliminar campos en la página de pago. Es una herramienta freemium con versión gratuita y planes pro desde 19 USD.

  

Esos complementos de pago son excelentes opciones y harán el trabajo sin problemas. Sin embargo, si no desea instalar ningún complemento, puede codificar su solución. En esta guía, nos centraremos en cómo puede agregar campos personalizados a la página de pago de WooCommerce con algo de codificación .

Agregue campos personalizados al pago de WooCommerce mediante programación

En esta sección, aprenderá cómo agregar campos personalizados a la página de pago de WooCommerce mediante programación . Te mostraremos cómo incluir:

• Texto
• Caja
• Tipos de entrada de radio

Hay otros campos personalizados que puede agregar, pero tenga en cuenta que pueden necesitar algún tipo de validación. Entonces, en este tutorial, nos centraremos en esos 3 tipos y omitiremos los campos que requieren la validación de los valores ingresados. Además, vamos a mostrar campos personalizados en la lista de pedidos de back-end y en las plantillas de correo electrónico.

NOTA : Tenga en cuenta que si desea agregar otros campos a sus proyectos, debe implementar una validación de seguridad.

Entonces, para agregar campos personalizados a la página de pago de WooCommerce, hay dos opciones:

• Puede codificar sus scripts en un tema secundario
• Crear un complemento personalizado

Para crear una solución más escalable y mejor organizada, crearemos un complemento personalizado . Además, a diferencia del enfoque de tema secundario, un complemento personalizado también puede ser el punto de partida de un mayor desarrollo. Sin embargo, si prefiere utilizar un tema secundario, le recomendamos que consulte esta guía.

Agregue campos personalizados al pago de WooCommerce con un complemento personalizado

El complemento personalizado que vamos a construir tendrá tres archivos.

1. Principal
2. Interfaz
3. back-end

El archivo principal actúa como una puerta de entrada al archivo de interfaz de usuario, que vamos a utilizar para nuestros scripts de interfaz de usuario. Además, incluiremos el tercer archivo, donde se encuentran los scripts de backend. Vale la pena señalar que este archivo de front-end será el archivo base principal y debe moverse a un archivo de jerarquía de bajo nivel (al igual que nuestro archivo de back-end) si agrega más clases. Entonces, ahora, veamos cómo agregar campos personalizados a la página de pago de WooCommerce usando un complemento personalizado .

1. Abra su IDE favorito y cree una carpeta con tres archivos:

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (archivo frontend) /__/__class_qlccf_back.php (archivo backend) /__QuadLayers_checkout_fields.php (archivo principal)

2. Archivo principal

El archivo principal es QuadLayers_checkout_fields.php :

 <?php
/**
 * @enlace https://quadlayers.com/
 * @desde 1.0.0
 * Nombre del complemento: QuadLayers Checkout campos personalizados 
 * URI del complemento: https://quadlayers.com/
 * Descripción: complemento para crear campos personalizados en la página de pago de WooCommerce, imprimir en pedidos backend y plantillas de correo electrónico
 * Versión: 1.0.0
 * Autor: Sebastopolys
 * URI del autor: https://quadlayers.com/
 * Dominio de texto: qlccf
 */
if(!definido('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
	clase final run_init{	
		ejecución de función estática pública () {
			devuelve include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	ejecutar_init::ejecutar();
}
demás{
	echo "<h3>ERROR - Clase run_init existente en QuadLayers_checkout_fields.php !</h3>";
}

Puede cambiar la información del complemento, la función y los nombres de los archivos y poner los suyos propios. Pero le sugerimos que primero copie y pegue los scripts sin editar nada para que comprenda mejor cómo funcionan.

3. Archivo de clase de front-end

El archivo frontal es class_qlccf_base.php . Aquí es donde vive la clase principal y donde puede incluir un número ilimitado de clases y funciones. Una clase abstracta no se puede instanciar, por lo que debe ser heredada por alguna otra clase. Aquí está el archivo frontal y una explicación detallada después del código:

 <?php
if(!definido('ABSPATH')){die('-1');}
elseif(!class_exists('base_class')){

clase abstracta clase_base{   

    public const VERS = '1.1.0';// <-- Versión del complemento
    public const PREFIX = 'qlccf';// <-- Prefijo del complemento
    public const PLDIR = __DIR__ ;// <-- Ruta del directorio del complemento
    public const PLPAT = __FILE__ ;// <-- Ruta del archivo  

    función 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' ));
    }
    // insertar casilla de verificación en el pago de woocommerce - enlace: after_order_notes
    función pública quadlayers_subscribe_checkout ($ checkout) {
            woocommerce_form_field('suscriptor', array(
                'tipo' => 'casilla de verificación',
                //'requerido' => verdadero,
                'clase' => array('formulario de campo personalizado-fila-ancho'),
                'label' => ' Suscríbete a nuestro boletín.'                   
            ), $pago->get_value( 'suscriptor' ) );              
    }
    // Insertar texto en woocommerce de pago - gancho: after_billing_form
    función pública quadlayers_email_checkout($checkout2){
        woocommerce_form_field('correo alternativo', matriz(
            'escribir' => 'correo electrónico',
            //'requerido' => verdadero,
            'clase' => array('formulario de campo personalizado-fila-ancho'),
            'etiqueta' => ' Correo electrónico alternativo.'                             
        ), $pago2->get_value( 'altmail' ) );  
    }
    // Insertar campo personalizado de radio en el pago de woocommerce - enlace: before_order_notes
    función pública quadlayers_radio_checkout($checkout3){
        woocommerce_form_field('alimentar', matriz(
            'tipo' => 'radio',
            //'requerido' => verdadero,
            'clase' => array('formulario de campo personalizado-fila-ancho'),
            'label' => '¿Cómo nos encontraste?.',            
                'opciones' => arreglo(
                    'Google' => 'Google',                  
                    'Amigo' => 'Amigo',
                    'Facebook' => 'Facebook',
                    'Youtube' => 'Youtube',
                    'Otro' => 'Otro'            
                )
        ));
    }
    // guarda todos los valores de los campos personalizados
    función pública quadlayers_save_function ($ order_id ) { 
        if ( ! vacío( $_POST['suscriptor'] ) ) {
            update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
        }
        if ( ! vacío( $_POST['altmail'] ) ) {
            update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
        }
        if ( ! vacío( $_POST['feed'] ) ) {
            update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
        }      
    }
}// Incluir clase de back-end
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
demás{
	echo "<h3>ERROR DE INICIALIZACIÓN - ¡Clase base_class existente!</h3>";
}         
   

Después de declarar la clase, definimos algunas constantes que podemos usar más adelante. Luego, incluimos todos los ganchos de WooCommerce que vamos a usar en un solo método, al que llamamos add_base_hooks() .

Dado que no se puede crear una instancia de una clase abstracta, ejecutamos este método desde nuestro archivo backend para que ejecute todos los ganchos declarados aquí. Usamos cada uno de los ganchos para una tarea diferente, asignando uno de los siguientes métodos a cada uno de ellos. Es decir , este gancho: woocommerce_after_order_notes en nuestro método add_base_hooks() ejecuta el método quadlayers_subscribe_checkout() , ambos definidos dentro de la clase base_class .

Tenga en cuenta cómo usamos algunas de las funciones de WordPress y WooCommerce: woocommerce_form_field() un campo personalizado en el formulario de pago de WooCommerce. update_post_meta() Esta función nativa de WordPress se usa ampliamente para actualizar los metadatos de la base de datos de publicaciones, productos y otros tipos de publicaciones personalizadas. Además, los tipos de campos de entrada disponibles son:

4.El archivo backend, class_qlccf_back.php

Aquí es donde la clase qlccf_back_class hereda base_class previamente definida en class_qlccf_base.php file :

 <?php
if(!definido('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
    clase qlccf_back_class extiende base_class{

        función pública __construir(){       
            padre::add_base_hooks(); 
            si(es_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'));
            terminara si;
        }             
        # mostrar el valor de los campos personalizados en la lista de pedidos de back-end 
        función pública qlccf_column_content($columna){
                publicación global $; 
                if ( 'suscriptor' === $columna) { # Casilla de verificación
                    $pedido = wc_get_order( $post->ID );     
                    $c_meta = $pedido->get_meta('suscriptor');       
                    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';
                    terminara si;                       
                    echo '<img src="'.$img_url.'"/>';
                } 
                elseif('altmail' === $columna){ # Correo alternativo
                    $pedido = wc_get_order( $post->ID );     
                    $e_meta = $pedido->get_meta('altmail');
                    echo $e_meta;
                }   
                demás{}     
        }    
        # Establecer columna de casilla de verificación
        función pública qlccf_checkbox($columnas){
                $columnas['suscriptor'] = __( 'Suscriptor');            
                devolver $columnas;
        }
        # Establecer columna de correo alternativo
        función pública qlccf_email($columns1){
                $columns1['altmail'] = __( 'Correo alternativo');            
                devuelve $columnas1;
        }
        # Incluir el campo Alt Mail en la placa de correo electrónico de WC
        función pública qlccf_email_template($order_obj){
            $is_set = get_post_meta( $order_obj->get_order_number());           
                // regresa si no se establece un campo personalizado
            if( vacío( $is_set ) )
		    regreso; 
	        // ok, continuamos y hacemos eco del campo personalizado
            $alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );            
            echo '<h2>Mi campo personalizado</h2><p>Correo electrónico alternativo:'.$alt_email.'</p>';            
        }              
    }    
  $ejecutar=nuevo qlccf_back_class;    
terminara si;

En este archivo, definimos un constructor para ejecutar los ganchos frontales que hemos indicado en nuestro otro archivo. Luego, agregamos los ganchos necesarios para mostrar los campos personalizados en la lista de pedidos de backend y las plantillas de correo electrónico de WooCommerce usando un if() condicional y la función de WordPress is_admin() para aplicarlo solo si el usuario está en la pantalla de backend de administración. El gancho manage_shop_order_posts_custom_column() inserta una columna en la lista de pedidos, para que podamos mostrar campos en nuestra función qlccf_column_content() .

Una vez que estamos enganchados en el bucle de WooCommerce, verificamos si el nombre del campo pertenece a uno de nuestros campos personalizados y, si es así, lo imprimimos. Usando un condicional if()else, podemos verificar todos nuestros campos personalizados en la misma función.

Después de eso, creamos una casilla de verificación y columnas de campo personalizadas de texto en la lista de pedidos de back-end. Necesitamos configurar nuestras columnas personalizadas para mostrar nuestros campos personalizados de WooCommerce una vez que un cliente complete el proceso de pago y se cree el pedido.

Finalmente, en el último método, usamos woocommerce_email_order_meta hook para mostrar nuestro campo de texto personalizado en la plantilla de correo electrónico del administrador. Funciones de WordPress y WooCommerce utilizadas:

wc_get_order() : Obtiene el objeto de pedido actual con todos los datos adjuntos

get_meta() : Para obtener los metadatos del pedido

get_post_meta() : Obtiene los valores de nuestros campos personalizados guardados en la base de datos

get_order_number() : Para obtener el número de identificación del pedido actual

Terminando

Con todo, personalizar la página de pago es imprescindible para cualquier tienda en línea. En esta guía, le mostramos cómo agregar campos personalizados a la página de pago de WooCommerce mediante programación con un poco de codificación. Ha aprendido cómo crear un complemento personalizado paso a paso para optimizar el pago.

Además, si desea personalizar la página de pago y llevarla al siguiente nivel, le recomendamos que consulte esta guía paso a paso.

¿Has probado este método? ¿Se te ocurren formas de mejorarlo? ¡Comparta sus experiencias con nosotros en la sección de comentarios a continuación!

Si quieres mejorar tus conversiones en WooCommerce, te recomendamos echar un vistazo a estas guías:

• Los mejores botones de compra rápida para WooCommerce
• Cómo optimizar el pago en WooCommerce
• ¿Cómo editar la página de la tienda en WooCommerce mediante codificación?