Análisis en profundidad de los campos de pago personalizados de WooCommerce: una guía completa desde su creación hasta el procesamiento de datos.

Al crear una tienda en línea, la experiencia del cliente durante el proceso de pago es de vital importancia. El formulario de pago estándar de WooCommerce puede no satisfacer todas las necesidades comerciales, como la recopilación de la información del destinatario de la factura, felicitaciones de cumpleaños o especificaciones especiales para el envío. En estos casos, los campos de pago personalizados se convierten en una herramienta de extensión muy útil. No solo permiten mejorar el nivel de personalización de la experiencia del usuario, sino que también ayudan a los comerciantes a recopilar datos comerciales esenciales, lo que a su vez permite optimizar los servicios y las estrategias de marketing.

Gracias al sistema de ganchos (hooks) de WordPress y a la amplia API proporcionada por WooCommerce, los desarrolladores pueden agregar con relativa facilidad diferentes tipos de campos, como cuadros de texto, menús desplegables, casillas de selección y casillas de verificación, en distintas partes de la página de pago (después de las áreas de “dirección de facturación” y “dirección de envío”, e incluso crear bloques completamente nuevos). El proceso no se limita solo a la presentación en la interfaz frontal; lo más importante es el flujo de procesamiento de datos en el backend: cómo asegurarse de que la información introducida por el usuario se guarde de manera precisa y segura en el pedido, y que esta se muestre de manera clara en la interfaz de administración, en la página de la cuenta del usuario y en los correos de notificación de pedidos.

Método de implementación de campos de pago personalizados

WooCommerce ofrece dos tipos principales de ganchos (hooks) para manejar los campos relacionados con el proceso de pago:woocommerce_checkout_fields Y woocommerce_checkout_update_order_metaEl primero se utiliza para definir y renderizar los campos, mientras que el segundo se utiliza para guardar los datos de esos campos.

Lecturas recomendadas WordPress plugin de desarrollo de principiante a maestro: la mano para enseñar a construir sus propias características exclusivas。

Usar ganchos para agregar campos.

El paso más importante es… woocommerce_checkout_fields Gancho de filtro: agrega campos personalizados al array de campos de pago. Esta estructura del array es clara y te permite colocar los campos en la sección de “factura”.billing“Envío”, “Entrega”shipping“Order Notes”orderIncluyendo las particiones existentes, también es posible crear particiones personalizadas.custom）。

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

El siguiente ejemplo de código muestra cómo agregar un campo de texto para el “Número de Identificación Fiscal de la Empresa” y un cuadro de selección para “Si se necesita una factura” en la parte inferior de la zona de información de los “Facturas”.

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Verificar y guardar los datos de los campos.

Después de agregar los campos, es necesario asegurarse de que los datos introducidos por los usuarios se guarden en los metadatos del pedido correspondiente. Esto se logra a través de... woocommerce_checkout_update_order_meta Esto se logra mediante los “ganchos de acción” (action hooks). Cuando un usuario envía un pedido, WooCommerce activa uno de estos ganchos, y en ese momento podemos obtener y guardar los valores de los campos personalizados.

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

Mostrar los datos de los campos en el backend y en los correos electrónicos.

No es suficiente simplemente guardar los datos; los comerciantes necesitan acceder a esta información para administrar los pedidos en el backend, y los clientes también deben poder ver lo que han ingresado en el correo de confirmación del pedido y en la página “Mi Cuenta”.

Se muestra en la página de edición de pedidos en segundo plano.

Para ello woocommerce_admin_order_data_after_billing_address Al igual que otros mecanismos similares, los valores de los campos personalizados se mostrarán después de las columnas “Dirección de Factura” o “Dirección de Entrega” en la página de detalles del pedido en el backend.

Lecturas recomendadas Guía de introducción al desarrollo de complementos de WordPress: construye tu primera extensión de funcionalidad desde cero.。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>'\n' . __( 'Número de impuesto de la empresa:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
    }
}

Mostrar en el correo de confirmación del pedido y en la página de agradecimiento.

Para que los clientes también puedan ver esta información, necesitamos incluirla en los correos electrónicos de confirmación de pedidos y en la página de confirmación del pedido (con agradecimientos). woocommerce_email_order_meta_keys Los filtros pueden agregar automáticamente las claves de metadatos especificadas a todos los correos electrónicos de notificación. Al mismo tiempo, se puede utilizar… woocommerce_order_details_after_order_table Los ganchos de acción (action hooks) pueden ser mostrados en los detalles del pedido en la interfaz frontal del usuario.

**
 * Añadir campos personalizados a los correos electrónicos de los pedidos
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // Se mostrará en el correo electrónico en formato de clave, por lo que normalmente requerirá más formato.
    return $keys;
}

/**
 * Mostrar los campos personalizados en los detalles del pedido en el frontend (página de agradecimiento, Mi cuenta - Detalles del pedido)
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '  **
 * Añadir campos personalizados a los correos electrónicos de los pedidos
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // Se mostrará en el correo electrónico en formato de clave, por lo que normalmente requerirá más formato.
    return $keys;
}

/**
 * Mostrar los campos personalizados en los detalles del pedido en el frontend (página de agradecimiento, Mi cuenta - Detalles del pedido)
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo ' '<h2>'\n' . __( 'Información adicional', 'your-text-domain' ) . '</h2>';
        echo '<table class="shop_table shop_table_responsive additional_info">';
        echo '<tr><th>'\n' . __( 'Número de impuesto de la empresa:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number)`.'</td></tr>';
        echo '</table>';
    }
}

Aplicaciones avanzadas y lógica de condiciones de campos

Además de la adición de campos básicos, interacciones más complejas pueden mejorar significativamente la experiencia del usuario, como la visualización condicional de campos y la validación basada en valores existentes.

Implementar la visualización condicional de campos

Con JavaScript/jQuery, puedes mostrar u ocultar dinámicamente un campo en función del valor de otro campo (como el país, el estado o una opción desplegable). Por ejemplo, solo se mostrará un área de texto con “Notas para el envío de la factura” cuando el usuario seleccione la opción “Se necesita una factura en papel”.

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

Para implementar esta función, es necesario agregar lógica al archivo JavaScript del tema, o bien utilizar otros métodos adecuados. wp_enqueue_script Coloca el script en la cola de espera y monitoriza los cambios en los campos de la página de pago para controlar el estado de visualización de los campos objetivo.

Añadir validación personalizada a un campo

Aunque WooCommerce tiene incorporada la opción de “obligatorio”,required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Se utilizan ganchos de acción (action hooks) para agregar lógica de validación personalizada.

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Optimización del rendimiento y mejores prácticas.

Al agregar demasiados campos personalizados en un sitio web o si no se gestionan de manera adecuada, puede afectar la velocidad de carga de la página de pago y la experiencia del usuario.

Lecturas recomendadas Guía avanzada de desarrollo para dominar los campos personalizados de WooCommerce: desde su creación hasta su visualización。

Optimizar la carga y renderización de campos

• Carga selectiva de scripts: Solo se cargan los scripts JavaScript necesarios para los campos que se muestran según las condiciones en la página de pago.
• Establecer prioridades de manera razonable: cómo hacerlo priority Los parámetros deben organizarse de manera adecuada para determinar el orden de los campos, evitando así reorganizaciones innecesarias en el diseño de la interfaz.
• Simplificado. class Array: Añada solo los clases de estilo necesarias, como… form-row-wide o form-row-first。

Seguridad y limpieza de datos

• Siempre limpie y verifique los datos antes de guardarlos.update_post_meta) y la visualización (echoAntes de utilizar los datos de los usuarios, asegúrese de seguir las siguientes instrucciones: sanitize_text_field(), esc_html(), wp_kses_post() Estas funciones se utilizan para procesar los datos, lo cual es clave para evitar ataques de tipo Cross-Site Scripting (XSS).
• Utiliza los tipos de datos adecuados: Para números o datos con un formato específico, considera la posibilidad de utilizar los tipos de datos correspondientes. sanitize_key() O se pueden utilizar expresiones regulares personalizadas para realizar la validación y limpieza de los datos.

resúmenes

Personalizar los campos de pago en WooCommerce es una función muy poderosa, ya que facilita el flujo de información entre los comerciantes y los clientes en los momentos clave de la transacción. woocommerce_checkout_fields Las definiciones de los campos frontales (front-end fields) son esenciales para poder utilizarlos posteriormente en el código. woocommerce_checkout_update_order_meta Los “ganchos” (hooks) se utilizan para guardar datos de manera segura, y posteriormente estos datos se presentan en el backend, a través de múltiples herramientas de gestión y filtros de correo electrónico, así como en la interfaz del usuario. Todo este proceso constituye un ciclo cerrado de tratamiento de datos. Al dominar estos métodos fundamentales y combinarlos con técnicas avanzadas como la visualización condicional y la validación personalizada, los desarrolladores pueden crear procesos de pago altamente personalizados, fáciles de usar para los usuarios y seguros en términos de protección de datos. Esto permite satisfacer las diversas necesidades del comercio electrónico, mejorando la profesionalidad del negocio y la satisfacción de los clientes.

FAQ Preguntas más frecuentes

¿Dónde se almacenan los datos de los campos personalizados?

Los datos de los campos personalizados se guardan como “metadatos del pedido”. Cuando se utilizan… update_post_meta( $order_id, ‘_field_key’, $value ); Al guardar los datos, estos se almacenarán en WordPress. wp_postmeta En la tabla de la base de datos, hay una relación con los pedidos (un tipo de artículo personalizado). post_id Asociación. Los nombres de las claves suelen comenzar con un guion bajo, lo que indica que se trata de metadatos ocultos.

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 los campos personalizados también se guarden en la cuenta del usuario durante el proceso de registro?

Si permites que los usuarios creen cuentas al realizar el pago y deseas que campos como el “Nombre de la empresa” se guarden también en su información personal, es necesario actualizar los datos del usuario al mismo tiempo que se guardan los metadatos del pedido. Puedes utilizar para ello los siguientes métodos: update_user_meta( $customer_id, ‘billing_company’, $value );Tenga en cuenta que, por lo general, es necesario obtener el ID de usuario correcto en el contexto del registro o inicio de sesión del usuario.

¿Por qué mis campos personalizados no se muestran correctamente en el correo electrónico?

Si el valor de un campo no se muestra en el correo electrónico, la causa más común es haber olvidado incluirlo en el contenido del correo. woocommerce_email_order_meta_keys El filtro agrega los nombres de las claves a las variables del correo electrónico. Además, es posible que el modelo de correo electrónico no contenga la parte que se encarga de mostrar los metadatos personalizados. Asegúrate de que los nombres de tus campos se hayan incluido correctamente en el array del filtro, y que el modelo de correo electrónico (por ejemplo…) email-order-details.phpSoporta la visualización de metadatos generales.

¿Es posible agregar bloques de campos en diferentes posiciones de la página de pago?

Sí. Además de los valores predeterminados… billing、shipping、order Para agrupar elementos, puedes seguir estos pasos: woocommerce_checkout_fields Cree un grupo completamente nuevo en el filtro, por ejemplo… custom_sectionLuego, utiliza… woocommerce_checkout_after_customer_details o woocommerce_before_order_notes Ganchos de acción de espera, combinados do_action(‘woocommerce_checkout_’ . $section); Puedes renderizar los campos de este nuevo grupo en cualquier lugar de la página que desees. Para ello, es necesario tener un conocimiento previo de la estructura del template de pago de WooCommerce.