wooCommerce_checkout_fields - 20 ejemplos de código para personalizar el pago de WooCommerce
Publicado: 2025-07-03¿Personaliza tu pago de WooCommerce sin un complemento? Es posible: si te sientes cómodo con algunas líneas de PHP. En esta publicación, encontrará 20 fragmentos de código listos para usar utilizando el filtro woocommerce_checkout_fields
. Cubren casos de la vida real como eliminar campos, renombrar etiquetas o agregar nuevas opciones.
Si no le gusta la codificación, no se preocupe, también le mostraremos cómo usar el complemento de campos de pago flexibles para lograr el mismo resultado visualmente.
¿Qué es la personalización del pago y cómo ayuda a mejorar las conversiones?
Su pago es donde los visitantes se convierten en clientes. Pero si está abarrotado de campos innecesarios o carece de flexibilidad, puede causar fricción. Personalizar el pago ayuda a reducir el abandono, acelerar las compras y crear una mejor experiencia.
WooCommerce viene con un filtro flexible: woocommerce_checkout_fields
. Puede usarlo para modificar la facturación, el envío o los campos adicionales. Es perfecto para los desarrolladores que desean control sobre la visibilidad del campo, el orden y el contenido.
20 ejemplos de código usando el filtro WooCommerce_checkout_fields
A continuación hay 20 ejemplos. Agregue estos fragmentos a functions.php
del tema de su hijo.php o un complemento personalizado.
1. Retire el campo de la segunda dirección
// This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }
2. Ocultar el campo del teléfono
// This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }
3. Haga que el campo de correo electrónico sea opcional
// This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }
4. Cambie los marcadores de posición para los campos de primer nombre y apellido
// This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }
5. Cambie el nombre de "apellido" al "apellido"
// This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });
6. Agregue un campo de texto personalizado
// This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }
7. Agregue un textea para las instrucciones de entrega
// This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }
8. Establezca la clase CSS personalizada
// This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }
9. Cambiar prioridad del campo de correo electrónico
/* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }
10. Retire el campo de código postal
// This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }
11. Reorden el primer nombre tras apellido
// This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }
12. Agregue una casilla de verificación para la solicitud de factura
// This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }
13. Agregue Seleccionar desplegable para el tiempo de entrega
// This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }
14. Comentarios de orden previo al pedido
// This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }
15. Agregue un campo de número personalizado
// This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }
16. Agregue un selector de fecha
// This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }
17. Deshabilitar la validación del teléfono
// This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }
18. Haga que el campo de envío aparezca el campo el último
/* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }
19. Eliminar el campo de código postal de envío
// This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }
20. Agregue un campo personalizado después de los detalles del pedido
// This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }
Cómo personalizar el pago sin codificar usando campos de pago flexibles
¿No es un desarrollador? Ningún problema. El complemento flexible de campos de pago le permite hacer todo lo anterior, visualmente, desde su tablero de WordPress.

- Agregue, elimine y reorganice los campos con arrastre y drogue
Reorden los campos de pago en WooCommerce - Editar etiquetas, marcadores de posición y valores predeterminados
- Establezca campos según sea necesario, opcional o oculto
Ocultar campos de pago de WooCommerce - Aplicar clases o reglas de validación CSS
Validación de campo en campos de pago flexibles para WooCommerce - Elija la sección: facturación, envío o información adicional
- Asignar valores predeterminados para fines de prueba o UX
- Todo sin editar PHP o escribir código personalizado
Resultados sin sobrecarga de desarrollo.
Campos de pago flexibles Pro - Características avanzadas
¿Quieres más potencia y flexibilidad? La versión Pro agrega capacidades avanzadas:
- Lógica condicional para mostrar/ocultar campos basados en el contenido del carrito o los datos del usuario
- Soporte para tipos de campo adicionales: seleccionador de fecha, selección de tiempo, radio con colores o imágenes y más
- Control de visibilidad para roles de usuario: muestre diferentes campos para los usuarios de B2B y B2C
- Pantalla de campo basada en el método de envío o pago seleccionado
- Precio adicional por configuración de campo
Puede ver las funciones del complemento en su página de productos.
Campos de pago flexibles pro wooCommerce £ 59
Editar, agregar nuevos o ocultar campos innecesarios del formulario de pago de WooCommerce. Agregue el precio a los campos y use la lógica condicional. Se trata de conversiones y una mejor experiencia de usuario. NUEVO: Ahora puede establecer múltiples condiciones (o) en uno o más grupos de condición (y).
Instalaciones activas: 90,000+ | Calificación de WordPress:
Resumen: ¿Qué método es mejor para su pago?
Usar woocommerce_checkout_fields
es una forma poderosa de personalizar el pago de WooCommerce, pero requiere una codificación y pruebas cuidadosas. Además, uno debe ocuparse de las actualizaciones del código y el tema.
Si confía en editar su tema, los 20 ejemplos anteriores deberían ayudarlo a manejar los escenarios más comunes.
Pero para todos los demás, los campos de pago flexibles para el complemento de WooCommerce ofrecen una alternativa sin código y fácil de usar con aún más opciones en la versión Pro.
Puntos clave
- El filtro
woocommerce_checkout_fields
le permite personalizar el formulario de pago con PHP - Puede usarlo para agregar, eliminar, cambiar el nombre, reordenar o estilo campos de estilo
- El complemento de campos de pago flexible hace lo mismo, pero sin la necesidad de codificar
- La versión Pro agrega lógica condicional, tipos de campo adicionales y reglas de precios de campo
- Elija el método que se ajuste a su flujo de trabajo: código para el control, complemento para la velocidad