Análisis en profundidad de los campos de pago personalizados de WooCommerce: guía de desarrollo completa

Resumen del sistema de campos de pago de WooCommerce

La página de pago de WooCommerce es un punto clave en el proceso de compra online para la recopilación de información del cliente. Su flexibilidad y escalabilidad se deben en gran medida a su sistema de campos modular. Este sistema organiza todos los elementos que el usuario debe completar (nombre, dirección, datos de contacto, etc.) en un arreglo multidimensional y estructurado. Este arreglo no solo define las etiquetas y tipos de los campos, sino que también controla el orden en el que se muestran, si son obligatorios, las reglas de validación y las clases CSS asociadas a ellos.

El núcleo de todo el sistema es… class-wc-checkout.php El archivo y todo lo que contiene dentro de él. WC_Checkout Las clases. Todos los campos se agrupan en varios “conjuntos de campos” principales, según su uso; los más comunes son… billing(Campo del recibo)shipping(Campo de envío) y order(Campos como las notas del pedido, etc.). Cada conjunto de campos en sí mismo es un array que contiene la definición de múltiples campos. Comprender esta estructura jerárquica es el primer paso para realizar cualquier operación personalizada, ya que todas las modificaciones se centran en este conjunto de campos en su conjunto. Los desarrolladores no necesitan modificar los archivos principales directamente, sino que pueden intervenir en el proceso a través de una serie de acciones y ganchos de filtro cuidadosamente diseñados. Esto asegura la sostenibilidad de las funciones personalizadas y su compatibilidad con futuras versiones.

Usar los ganchos integrados para agregar y modificar campos.

WooCommerce ofrece un potente y sencillo sistema de ganchos (hooks) que permite a los desarrolladores agregar, eliminar, modificar o consultar los campos relacionados con el proceso de pago de manera segura. Esta es la práctica estándar para el desarrollo personalizado, ya que evita los problemas de mantenimiento que podrían surgir al modificar directamente los archivos de plantilla del código fuente.

Lecturas recomendadas Guía práctica para la optimización del rendimiento de sitios web de comercio electrónico con WooCommerce y el desarrollo de plugins avanzados。

¿Cómo agregar nuevos campos a un formulario de pago?

Para agregar un nuevo campo a la página de pago, como un cuadro de selección que permita a los clientes elegir el “tipo de entidad emisora de la factura”, es necesario utilizar los siguientes pasos: woocommerce_checkout_fields Filtro: Este filtro transmite el array completo de campos de pago a la función desarrollada, lo que te permite acceder a cualquier conjunto de campos (por ejemplo…). billingAñadir una nueva entrada dentro de ( ).

Servidor de WordPress de UltaHost

Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).

página de acceso

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

El código anterior crea un cuadro desplegable de selección en la zona de los campos de la factura. Cada definición de campo es un array asociado, que contiene la información necesaria para configurar el cuadro desplegable. type, label, required Los pares de clave-valor determinan el comportamiento y la apariencia de los campos.priority Los parámetros son de vital importancia, ya que controlan el orden en el que se muestra ese campo en el formulario. Cuanto menor sea el número, más adelante en la lista aparecerá el campo.

Modificar o eliminar las propiedades de los campos existentes.

Las necesidades del negocio pueden requerir que se ajusten los campos predeterminados. Por ejemplo, en algunas áreas, es posible hacer que el campo “Código Postal” sea opcional o ocultar el campo “Estado/Provincia”. Esto también se realiza a través de las operaciones que se transmiten. woocommerce_checkout_fields Se implementa mediante un arreglo de filtros.

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'adjust_default_fields' );

A través de unset() Las funciones pueden eliminar por completo un campo de un dato. En la mayoría de los casos, se hace sobrescribiendo el valor de un atributo dentro de un array. required, label, class) para modificar el comportamiento de los campos.

Validación de campos y persistencia de datos

Mostrar los campos en la interfaz frontal es solo el primer paso. Para garantizar la calidad de los datos, es necesario verificar la información introducida por el usuario y guardar de manera fiable los datos que hayan pasado la verificación en el pedido. Este proceso se divide en dos etapas: la verificación instantánea en la interfaz frontal (opcional, pero que mejora la experiencia del usuario) y la verificación al enviar el formulario desde el lado del servidor (obligatoria).

Lecturas recomendadas Guía definitiva para optimizar el rendimiento de los sitios web de comercio electrónico de WooCommerce: desde la configuración hasta el almacenamiento en caché, todo explicado al detalle.。

Implementar la lógica de validación en el lado del servidor (backend).

Cuando un usuario hace clic en el botón “Realizar pedido”, WooCommerce ejecuta el proceso de verificación para completar el pago. Los desarrolladores pueden aprovechar esta funcionalidad para... woocommerce_checkout_process Se utilizan ganchos de acción para insertar reglas de validación personalizadas. En caso de que la validación fallen, se debe realizar una llamada correspondiente. wc_add_notice() La función muestra un mensaje de error al usuario e impide la creación del pedido.

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

Guardar los valores de los campos en los metadatos del pedido.

Después de que la verificación tenga éxito, el siguiente paso es guardar de manera permanente los valores de los campos personalizados al crear un pedido. Esto se logra mediante… woocommerce_checkout_update_order_meta El hook de acción se ha completado. Este hook se activa después de que se genera un pedido y transmite el ID del pedido. Deberías utilizarlo en WordPress. update_post_meta() La función almacena los datos del formulario como información de un pedido.

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

Al almacenar datos, se utilizan nombres de clave que comienzan con un prefijo de guion bajo (por ejemplo: _my_key_). _billing_invoice_typeSe trata de un acuerdo que sirve para evitar que ese campo se muestre en el cuadro de metadatos de “Campos personalizados” de la página de edición de pedidos en el backend, lo que podría provocar errores por parte del administrador. Es esencial utilizarlo. sanitize_text_field() Funciones como estas se utilizan para limpiar los datos con el fin de prevenir riesgos de seguridad.

hosting.com Alojamiento compartido

Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.

página de acceso

Mostrar datos personalizados en la interfaz relacionada con los pedidos.

Después de guardar los datos, es habitual necesitar mostrarlos en varios lugares, entre ellos: 1) la interfaz de gestión de pedidos en el backend de WordPress; 2) la página de detalles del pedido dentro de la sección “Mi Cuenta” del frontend para el usuario; 3) los correos electrónicos con los pedidos enviados a los clientes y administradores. Esto asegura la integridad y la transparencia de la información de las transacciones.

Integrar campos personalizados en la página de detalles del pedido en el backend

Para que los administradores puedan ver fácilmente la información que los clientes han proporcionado en el backend, es necesario exportar los metadatos de los pedidos guardados a la página de edición de pedidos. Esto se logra utilizando… woocommerce_admin_order_data_after_billing_address Y woocommerce_admin_order_data_after_shipping_address Los ganchos de espera (hooks de espera) permiten insertar contenido detrás de la información existente.

La función display_custom_order_meta_in_admin( $order ) hace lo siguiente:
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    Si $invoice_type es igual a 'company', entonces $display_type será 'Unidad'; de lo contrario, será 'Particular'.
    echo '  The function display_custom_order_meta_in_admin( $order ) does the following:
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    If $invoice_type is equal to 'company', then $display_type will be 'Company'; otherwise, it will be 'Individual'.
    echo '<p><strong>Tipo de entidad a la que se emite la factura:</strong> '`. esc_html($display_type)`.'</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>Número de cliente:</strong> '`. esc_html($custom_id).`'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Mostrar datos en la interfaz de usuario y en los correos electrónicos.

Para que los clientes también puedan ver la información que proporcionan, es necesario modificar el diseño de la vista de pedidos en la interfaz frontal y el contenido de los correos electrónicos. Para la página de detalles del pedido, se puede utilizar… woocommerce_order_details_after_order_table Ganchos. En el caso de los correos electrónicos, es necesario utilizarlos. woocommerce_email_order_meta_keys El filtro informa al sistema de correo electrónico sobre las claves de metadatos personalizadas, lo que permite que estas se incluyan automáticamente en el contenido del correo.

Lecturas recomendadas Aprenda a desarrollar complementos de WordPress: cree módulos de funciones personalizadas y eficientes desde cero.。

En la página de “Ver pedido” en la sección de atención al cliente,
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>Información adicional</h2><table class="shop_table custom-info"><tbody><tr><th>Número de cliente:</th><td>'`. esc_html($custom_id).`'</td></tr></tbody></table>'.');
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// Agregar campos personalizados a los correos electrónicos de pedidos
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // La clave correspondiente a este valor se agregará a los correos electrónicos
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

resúmenes

El proceso de personalización de los campos de pago en WooCommerce representa un ciclo completo de desarrollo que abarca desde la visualización en la interfaz hasta el almacenamiento de datos. La clave radica en comprender y utilizar de manera flexible el sistema de ganchos (hooks) proporcionado por WooCommerce. woocommerce_checkout_fields Los filtros se utilizan para definir y modificar la estructura de los campos. woocommerce_checkout_process La implementación de la acción incluye la lógica de validación necesaria; con la ayuda de… woocommerce_checkout_update_order_meta Las acciones se encargan de persistir los datos válidos; finalmente, se utilizan diversos ganchos (hooks) relacionados con la visualización para mostrar los resultados. woocommerce_admin_order_data_after_billing_address Y woocommerce_email_order_meta_keysLos datos se muestran en el backend, en la interfaz de usuario (frontend) y en los correos electrónicos. Siguiendo este patrón, los desarrolladores pueden crear experiencias de pago potentes, estables y que se ajusten perfectamente a las necesidades del negocio, al mismo tiempo que se garantiza la facilidad de mantenimiento del código y la seguridad de las actualizaciones.

FAQ Preguntas más frecuentes

¿Es posible agregar reglas de validación a los campos personalizados? Por ejemplo, ¿es posible restringir que solo se ingresen números?

Sí, como se indica en la sección “Validación de campos y persistencia de datos” de este artículo, puedes hacerlo. woocommerce_checkout_process Puede escribir cualquier lógica de validación en PHP dentro de la función de callback del gancho. Por ejemplo, utilizando… is_numeric() Función o expresión regular preg_match() Verifique si el valor del campo es un número puro. Si la validación falla, llame a… wc_add_notice() Basta con mostrar el error.

Alojamiento compartido InterServer

Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.

página de acceso

¿Cómo hacer que un campo personalizado se muestre únicamente para ciertas formas de envío?

Esto requiere combinar lógica de evaluación de condiciones. Puedes verificar el método de envío en el carrito de compras actual o en la sesión mientras se añade o modifica un campo. Por ejemplo, puedes utilizar… WC()->session->get('chosen_shipping_methods') Obtener el ID del método de entrega seleccionado. Si no cumple con los requisitos, se puede utilizar otro método. unset() Elimina ese campo del arreglo de campos, o añade una clase CSS específica para aplicar ciertos efectos visuales. hiddenSe muestra/oculta dinámicamente en combinación con JavaScript.

He modificado los campos, pero la página de pago no ha cambiado. ¿Qué podría ser la razón?

Primero, asegúrate de que tu código personalizado se ejecute correctamente (por ejemplo, que el tema se configure de manera adecuada). functions.php El archivo no contiene errores de sintaxis. En segundo lugar, verifica la lógica del código para asegurarte de que estás modificando los nombres de las claves del array de campos correctos (por ejemplo…). billing sin embargo shippingLuego, elimine todo el caché que pueda existir, incluido el caché de objetos, el caché de páginas y el caché del navegador. Finalmente, intente cambiar al tema predeterminado (como Storefront) y desactive otros plugins para descartar posibles conflictos.

¿Los datos de los campos personalizados guardados pueden utilizarse para búsquedas de pedidos posteriores o análisis de informes?

Sí, pero es posible que se requieran pasos adicionales. Dado que los datos se almacenan como metadatos de tipo “Post Meta” de los pedidos, puedes recuperarlos mediante las funciones de consulta de metadatos de WordPress. Para realizar búsquedas en la lista de pedidos del backend de WooCommerce, es posible que necesites utilizar un plugin que soporte la búsqueda de campos personalizados, o escribir código para expandir las funciones de búsqueda predeterminadas. En cuanto a la generación de informes, los plugins de informes avanzados suelen ofrecer opciones para incluir los metadatos de los pedidos en los criterios de filtrado y visualización. La exportación de los datos de los campos a un archivo CSV también dependerá de que las herramientas de exportación admitan la selección de columnas de metadatos personalizadas.