Editar los campos del formulario de checkout en Woocommerce

Editar los campos del formulario de checkout en Woocommerce

por Marcel Cabrera - 27 agosto 2018 Categorías: Woocommerce

Si bien el checkout de Woocommerce es muy completo, dependiendo de nuestra tienda, muchas veces es mejor hacer ciertas personalizaciones y editar muchos de los campos por default que vienen en el mismo, o simplemente para simplificar el proceso de compra tenemos que remover o agregar cierto campo, por ejemplo, si vendemos productos virtuales o descargables, no hay ninguna necesidad de pedirle su dirección física al usuario ya que es información que no nos sirve más que para dificultar la compra del usuario, es en este tipo de casos donde debemos mejorar nuestro checkout quitando esos campos innecesarios.

En este artículo veremos que hay varias maneras de lograr editar los campos de los formularios del checkout de Woocommerce y veremos las dos maneras más comunes:

  1. Para usuarios no familiarizados con código, por medio de 2 plugins: WooCommerce Checkout Field Editor (Manager) Pro (Gratuito) y Woocommerce Checkout Field Editor (Premium)
  2. Para desarrolladores, por medio de hooks y filters en nuestro tema

Editar campos del formulario de checkout de Woocommerce por medio de plugin gratuito

Uno de los plugins más utilizados para editar los campos del checkout con más de 90,000 instalaciones y activas y un rating de 4.5 de 5 en el repositorio de WordPress, y que además tiene una versión gratuita es Woocommerce Checkout Field Editor (Manager) Pro y lo puedes conseguir e instalar desde tu dashboard de WordPress. Este plugin también tiene una versión pro que añade ciertas funcionalidades como más tipos de campos (hasta 17), campos condicionales en el checkout, añadir nuevas secciones, etc. En este artículo revisaremos la versión gratuita, que es mayormente lo que cualquier tienda puede llegar a utilizar.

Configuración

Una vez instalado en tu dashboard ve a Woocommerce > Checkout Form y verás las 3 pestañas que conforman los campos del formulario de checkout:  Billing o facturación, Shipping o Envío y Additional o adicionales.

 

Vista de la pantalla de configuración del plugin Woocommerce checkout fields editor (Manager) Pro

Desde estas pestañas podemos cambiar muchas cosas de nuestro checkout, las funciones vienen marcadas y son muy fácilmente reconocibles en el plugin así que no entraremos en detalle, pero las funcionalidades son las siguientes:

  • Añadir campos nuevos al formulario.
  • Habilitar o deshabilitar campos del formulario.
  • Mover el orden de los campos arrastrando el campo al lugar donde queremos que aparezca.
  • Cambiar el tipo de campo (para la versión gratuita solo permite texto y select, la versión PRO agrega otros 15 tipos de campos)
  • Cambiar la etiqueta o el nombre con la que se muestra el campo en nuestro sitio.
  • Cambiar el texto placeholder que aparece en el campo en nuestro sitio.
  • Agregar una clase al campo.

En la versión gratuita lo que no podemos hacer :

  • No se pueden agregar campos condicionales
  • No podemos agregar otras secciones o grupos de campos
  • No podemos definir si queremos que los campos aparezcan en páginas de gracias o emails.

Como pueden ver es un plugin muy sencillo y que nos ayuda a personalizar la experiencia de nuestro checkout fácil y rápido y sobre todo de manera gratuita. Si buscamos un poco más de opciones podemos irnos por la versión Pro del mismo o por un plugin premium como el que platicaremos en el siguiente artículo.

Editar campos del formulario de checkout de Woocommerce por medio de plugin premium

Si no estás muy familiarizado con código, hay una extensión muy sencilla que venden los mismos creadores de Woocommerce y se llama “Woocommerce Checkout Field Editor” y tiene un costo desde $49 USD en Woocommerce.com . Este plugin es muy sencillo de utlizar y mucho más fácil que hacerlo con código nosotros mismos y funciona inmediatamente al instalarlo sin problemas.

Configuración

Una vez instalado ve a Woocommerce > Checkout Fields y te encontrarás con 3 pestañas que representan a los 3 grupos de campos que se manejan en Woocommerce: Billing o facturación, Shipping o Envío y Additional o adicionales.

Los campos core se encuentran en Billing y Shipping y en Adicionales nosotros podemos agregar los campos que queramos a nuestro checkout y aparecerán al final de nuestra forma, después del campo de “Notas de la orden”.

 

Vista de configuración del plugin Woocommerce Checkout Fields Editor Plugin

Desde estas pestañas podemos cambiar muchas cosas de nuestro checkout:

  • Añadir campos nuevos al formulario.
  • Habilitar o deshabilitar campos del formulario.
  • Mover el orden de los campos arrastrando el campo al lugar donde queremos que aparezca.
  • Cambiar el tipo de campo (texto, password, textarea, select, etc.)
  • Cambiar la etiqueta o el nombre con la que se muestra el campo en nuestro sitio.
  • Cambiar el texto placeholder que aparece en el campo en nuestro sitio.
  • Posición del campo, si queremos que aparezca a la izquierda, derecha o a ancho completo.
  • Agregar o quitar validaciones, disponibles validaciones para campos requeridos, email y números.
  • Definir si queremos que los campos aparezcan también en las páginas de Gracias, Detalles de la orden o en los emails de Gracias por tu compra.

Como pueden ver es un plugin muy sencillo y que nos ayuda a personalizar la experiencia de nuestro checkout fácil y rápido.

Editar campos del formulario de checkout de Woocommerce por medio de código

Si eres un usuario más cómodo con el código y conoces como moverte a través del código un tema de WordPress, entonces probablemente no necesites un plugin para hacer este tipo de cambios. A continuación veremos como hacer algunos de estos cambios por medio de nuestro archivo functions.php

Hooks, filters y campos core del checkout de Woocommerce

Para entender como podemos modificar los campos de nuestro checkout, primero deberíamos entender muy bien cuales son los elementos que están cargando en dicha página.

Comencemos con los principales hooks que tenemos en el checkout de Woocommerce:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • woocommerce_after_checkout_form

Cada uno de estos hooks se pueden explicar con su nombre, por ejemplo si queremos agregar una nota que aparezca justo antes del formulario de checkout podemos utilizar el hook woocommerce_before_checkout_form y añadir una función a este hook.

Más importante pueden llegar a ser los filtros que nos proporciona Woocommerce, ya que estos nos ayudarán a editar los campos que ya tenemos disponibles, los filters que más utilizaremos son:

woocommerce_checkout_fields

Ahora veamos los campos que Woocommerce muestra por default en nuestra instalación una vez que lo tenemos activo:

  • Billing
    • billing_first_name
    • billing_last_name
    • billing_company
    • billing_address_1
    • billing_address_2
    • billing_city
    • billing_postcode
    • billing_country
    • billing_state
    • billing_email
    • billing_phone
  • Shipping
    • shipping_first_name
    • shipping_last_name
    • shipping_company
    • shipping_address_1
    • shipping_address_2
    • shipping_city
    • shipping_postcode
    • shipping_country
    • shipping_state
  • Account
    • account_username
    • account_password
    • account_password-2
  • Order
    • order_comments

Cada uno de estos campos contiene un array de propiedades:

  • type : tipo de campo (texto, textarea, password, select)
  • label : etiqueta para el campo
  • placeholder : Texto dummy para el campo
  • class : Clase css del campo
  • required : true o false, si el campo es requerido
  • clear : true o false, aplica un clearfix css al campo
  • label_class : clase css para la etiqueta del campo
  • options : para selects, un array de opciones (key => valor)

Teniendo en cuenta estos datos ahora si vamos a comenzar a editar nuestro código para editar nuestros campos del formulario de checkout de Woocommerce.

Deshabilitar campos del formulario del checkout de Woocommerce

Si vemos los campos que vienen por default en el checkout de nuestra instalación de Woocommerce, podemos ver que hay algunos campos que simplemente no nos sirven, dependiendo de nuestra tienda, como por ejemplo en la mayoría de los sitios el campo “Nombre de la empresa” no es necesario y solo añade un paso más a nuestra forma, lo cual hace ver como un proceso más largo y puede llevar a que el usuario abandone su compra.

Finalizar compra antes de editar los campos del checkout

Entonces vamos a quitar este campo de nuestra forma, para esto en nuestro functions.php utilizamos el hook woocommerce_checkout_fields para hacer esta función.

 

/**
* Función para remover el campo de "Nombre de la Empresa" del formulario de checkout
*/
function claserama_edit_checkout_fields($fields){
     unset($fields['billing']['billing_company']);
     return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_edit_checkout_fields');

A esta función le pasamos el argumento $fields que es un array que contiene todos los elementos y campos que mencionamos anteriormente, en este caso el elemento que queremos quitar es el de “Nombre de la Empresa” que viene siendo el elemento del array $fields[‘billing’][‘billing_company’] , y lo hacemos pasar por la función unset_field de Woocommerce que nos permite quitarla de nuestro formulario. Pueden agregar más funciones de unset con el respectivo campo que quieran quitar y con esto pueden deshabilitar los campos que quieran de la lista que mencionamos anteriormente.

Editar las etiquetas (label) y placeholders de los campos del formulario de checkout en Woocommerce

Otra de las modificaciones que podemos hacer es modificar las etiquetas de los campos, si bien esto lo podemos hacer por medio de un plugin de traducciones, también lo podemos hacer por medio de funciones y filters en nuestro archivo functions.php.

En algunos casos como en los campos que no tienen que ver con las direcciones podemos utilizar el mismo filter woocommerce_checkout_fields, por ejemplo digamos que el campo de las notas al final de nuestro formulario queremos cambiar la etiqueta de “Notas del pedido” a “Facturación”, y el placeholder queremos cambiarlo de “notas sobre tu pedido ..” y ahora queremos que diga “Ingresa tu RFC si deseas obtener una factura”, entonces hacemos lo siguiente en nuestro archivo functions.php:

/**
* Función para cambiar las etiquetas(labels) y placeholders de los campos que no sean de dirección
*/
function claserama_edit_labels_placeholders_checkout($fields){
    $fields['order']['order_comments']['label']='Facturación';
    $fields['order']['order_comments']['placeholder']='Ingresa tu RFC si deseas obtener una factura';
    return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_edit_labels_placeholders_checkout');

Al igual que cuando queremos borrar un campo, al momento de aplicar el filtro este ingresa el argumento $fields a la función, y este argumento es un array con todos los campos de nuestro formulario.

En el caso de los campos que tienen que ver con la dirección tanto de facturación como de envío, debemos utilizar el hook woocommerce_default_address_fields , y cualquier cambio que hagamos sobre este filter se aplicará a los campos de dirección tanto de facturación como de envío. Por ejemplo digamos que en el campo de dirección queremos que la etiqueta cambie de “Dirección de la calle” a solamente “Dirección” y que el placeholder en lugar de decir “Número de la casa y nombre de la calle” queremos que se muestre ahora como “Calle, número y Colonia”, para esto en nuestro functions.php hacemos lo siguiente:

/**
* Función para cambiar las etiquetas(labels) y placeholders de los campos de dirección
*/

function claserama_edit_address_labels_placeholders_checkout($address_fields){
    $address_fields['address_1']['label']='Dirección';
    $address_fields['address_1']['placeholder']='Calle, Número y Colonia';
    return $address_fields;
}
add_filter('woocommerce_default_address_fields','claserama_edit_address_labels_placeholders_checkout');

Y esto cambiará las etiquetas y plcaholder de dirección 1 tanto en la sección de facturación como en la de envío, hay que tomar en cuenta que el argumento $address_fields que ingresa el filtro woocommerce_default_address_fields es un array con los siguientes valores:

  • country
  • first_name
  • last_name
  • company
  • address_1
  • address_2
  • city
  • state
  • postcode

Cambiar los tipos de campos en los campos de checkout

Otra de las funciones que nos son de mucha utilidad es cambiar el tipo de los campos de Woocommerce, por ejemplo el campo de Código Postal por default es un campo de texto y al abrirlo en móviles esto hace que nos aparezca el teclado completo de texto, podría ser mejor si lo cambiamos a un tipo numérico que al colocarnos en el campo abra solamente el teclado numérico, esto es una ligera mejoría pero algo que definitivamente nuestros usuarios podrían apreciar mucho. ¡La diferencia está en los detalles!

Para cambiar el tipo de los campos en nuestro archivo functions.php podemos hacer lo siguiente:

/**
* Función para cambiar el tipo de algunos de los campos en el checkout de Woocommerce
*/

function claserama_change_field_type_woo($fields){
    $fields['billing']['billing_postcode']['type'] = 'tel';
    return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_change_field_type_woo');

En el ejemplo modificamos el campo de “Código postal”, pero con esto podemos hacerlo para cualquier campo que queramos.

Cambiar el orden de los campos del checkout

Otra de las funciones que tal vez nos gustaría poder hacer es cambiar el orden de los campos, esto se puede hacer de manera muy sencilla reordenando los elementos de nuestro array que se integra a nuestro filtro woocommerce_checkout_fields . Hagamos un reordenamiento en nuestro archivo functions.php

/**
* Función para cambiar de lugar los campos del checkout de Woocommerce
*/
function claserama_rearrange_checkout_fields($fields){
    //para mover el orden de los elementos del array, debemos asignar una propiedad de prioridad a cada campo, en nuestro ejemplo le dimos una prioridad menor al email, entonces colocará este campo al principio de nuestra forma
    $fields['billing']['billing_email']['priority'] = 10;
    $fields['billing']['billing_first_name']['priority'] = 20;
    $fields['billing']['billing_last_name']['priority'] = 30;
    $fields['billing']['billing_company']['priority'] = 40;
    $fields['billing']['billing_address_1']['priority'] = 50;
    $fields['billing']['billing_address_2']['priority'] = 60;
    $fields['billing']['billing_postcode']['priority'] = 70;
    $fields['billing']['billing_country']['priority'] = 80;
    $fields['billing']['billing_state']['priority'] = 90;
    $fields['billing']['billing_phone']['priority'] = 100;

    //Podemos hacer lo mismo para los campos de envío. En este ejemplo cambiamos el orden de los campos de Nombre y apellido con el apellido primero
    $fields['shipping']['shipping_first_name']['priority'] = 20;
    $fields['shipping']['shipping_last_name']['priority'] = 10;
    $fields['shipping']['shipping_company']['priority'] = 30;
    $fields['shipping']['shipping_address_1']['priority'] = 40;
    $fields['shipping']['shipping_address_2']['priority'] = 50;
    $fields['shipping']['shipping_postcode']['priority'] = 60;
    $fields['shipping']['shipping_country']['priority'] = 70;
    $fields['shipping']['shipping_city']['priority'] = 80;
    $fields['shipping']['shipping_state']['priority'] = 90;

    return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_rearrange_checkout_fields');/** * Función

Cuando cambiamos debemos tener cuidado ya que muchos campos ya tienen unos estilos definidos al momento de ser ordenados por default por Woocommerce, en nuestro código anterior lo podemos ver al mover de orden los campos de Nombre y Apellido en la sección de envío, los estilos que tienen hacen que la vista no sea la óptima, esto lo podemos corregir agregando ciertos estilos a los campos. los estilos que manejan los campos son los siguientes:

  • form-row-first – 50% de ancho, primero a la izquierda en una línea,
  • form-row-last – 50% de ancho, segundo a la derecha en una línea
  • form-row-wide –  100% de ancho de la línea.

En nuestro caso necesitamos darle ahora al campo del Nombre una clase de “form-row-last” y al campo del apellido una clase de “form-row-first”, para esto utilizamos el mismo filtro woocommerce_checkout_fields en nuestro archivo functions.php:

/**
* Función para cambiar las clases de los campos
*/

function claserama_change_field_class($fields){
     $fields['shipping']['shipping_first_name']['class'][0] = 'form-row-last';
     $fields['shipping']['shipping_last_name']['class'][0] = 'form-row-first';
     return $fields;
}
add_filter('woocommerce_checkout_fields','claserama_change_field_class');

Y con esto corregimos la visualización de nuestros campos que movimos previamente, estas dos funciones las pueden combinar en una sola claramente, aquí están en dos para poder explicarlo claramente.

Algo a tomar en cuenta cuando reordenamos o movemos los campos del checkout es que estos cambios deben hacerse antes de cualquier otra modificación al checkout, ya que estos podrían sobreescribir algunos cambios que hayamos hecho anteriormente, entonces siempre asegurarse que este sea el primer cambio en su checkout y después ya pueden hacer todas las demás modificaciones que deseen.

Agregar nuevos campos personalizados en el checkout

A veces queremos agregar nuevos campos personalizados a nuestro formulario de checkout de Woocommerce, para esto primero debemos decidir donde lo que queremos agregar, si queremos que aparezca junto a los campos de facturación, en los campos de envío o al final también puede ser, justo después del campo de “Comentarios de la orden”.

Vamos a hacer un par de ejemplos, uno agregando un campo a la sección de Facturación, con un campo select que permita al usuario seleccionar cual es su método preferido de contacto: por email o por teléfono y al final después del formulario vamos a agregar un checkbox que permita al usuario decidir si suscribirse al newsletter, dependiendo de si marca el checkbox o no.

Para el campo select utilizamos el hook woocommerce_after_checkout_billing_form donde por medio de la función de woocommerce woocommerce_form_field crearemos nuestro campo y la integraremos a este hook.

/**
* Funciones para agregar campos personalizados
*Select
*/
function claserama_add_select_prefered_contact_method($checkout){
    woocommerce_form_field('contactmethod',array(
        'type' => 'select', //textarea, text,select, radio, checkbox, password
        'required' => true, //este parámetro no valida, solo agrega un "*" al campo
        'class' => array('form-row-wide'), // un array puede ser la clase 'form-row-wide', 'form-row-first', 'form-row-last'
        'label' => 'Método de contacto preferido',
        'options' => array( //opciones para un select o un input radio
            '' => 'Selecciona uno',
            'email' => 'Por email', // valor => nombre
            'telefono' => 'Por teléfono'
        )
        ), $checkout->get_value('contactmethod')
    );
}
add_action('woocommerce_after_checkout_billing_form','claserama_add_select_prefered_contact_method');

Y para agregar el campo de checkbox para la suscripción al newsletter lo haremos mediante el hook woocommerce_after_order_notes para que aparezca después de las notas de la orden.

/**
* Funciones para agregar campos personalizados
*Checkbox después de los comentarios de la orden
*/
function claserama_add_newsletter_optin($checkout){
    woocommerce_form_field('subscribe',array(
        'type' => 'checkbox',
        'class' => array('form-row-wide'),
        'label' => ' Suscribirte al Newsletter'
    ), $checkout->get_value('subscribe'));
}
add_action('woocommerce_after_order_notes','claserama_add_newsletter_optin');

Y el resultado en nuestra forma será el siguiente con ambos campos agregados a la forma.

Agregar campos personalizados al formulario de checkout de Woocommerce

Validar los campos personalizados adicionales

Sin embargo estos campos si bien ya los agregamos a nuestra forma, Woocommerce los ignorará al momento de que terminemos el proceso de checkout, para que Woocommerce pueda guardarlos junto con la orden es necesario validar y guardar estos campos personalizados específicamente.

De nuestros nuevos campos solo tenemos como requerido el campo de “Método de contacto preferido”, entonces tenemos que validar que este campo haya sido seleccionada una opción para esto podemos hacer lo siguiente en nuestro archivo functions.php mediante el hook woocommerce_checkout_process

/**
* Validar el campo select que agregamos
*/
function claserama_validate_select_field(){
    //Verificar que el campo haya sido seleccionado, si no mostrar un error
    if ( empty( $_POST['contactmethod'] ) )
        wc_add_notice( 'Por favor selecciona tu método preferido de contacto.', 'error' );
}
add_action('woocommerce_checkout_process','claserama_validate_select_field');

Si queremos terminar la compra y no seleccionamos una opción de método de contacto preferido, el error que definimos en nuestra función será mostrado y no permitirá seguir el checkout hasta que esté seleccionado.

Vaidación de campos requeridos en el formulario de checkout de woocommerce

Guardar los valores de los campos adicionales en la orden en Woocommerce

Ya tenemos los campos en el checkout en el frontend y validamos los campos requeridos, queda un paso más que es ahora si guardar los valores que los usuarios introduzcan en estos campos una vez que terminen el proceso de checkout, esto lo podemos hacer de manera sencilla en nuestro archivo functions.php por medio del hook woocommerce_checkout_update_order_meta y utilizando la función de woocommerce update_post_meta de la siguiente manera:

/**
* Guardar los campos adicionales cuando el usuario termine el proceso de checkout
*/
function claserama_save_additional_fields_checkout($order_id){
    if( !empty( $_POST['contactmethod'] ) )
        update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) );

    if( !empty( $_POST['subscribe'] ) && $_POST['subscribe'] == 1 )
        update_post_meta( $order_id, 'subscribe', 1 );
}
add_action('woocommerce_checkout_update_order_meta','claserama_save_additional_fields_checkout');

Y con esto los valores quedarán guardados en la orden de compra, y los pueden ver en su administrador en la orden en la sección de campos personalizados

Campos adicionales del checkout de woocommerce guardados en la orden

Mostrar los valores guardados en las notas de la orden en el Administrador, Páginas de gracias y en correos electrónicos.

Si notaron es un poco complicado el ver estos valores dentro de nuestro administrador ya que están en la sección de campos personalizados, pero también podemos mostrarlos dentro de los valores de nuestra orden, esto nos dará una visión más sencilla de los valores y dentro de los mismos datos de la orden, para esto utilizaremos el hook woocommerce_admin_order_data_after_billing_address en nuestro archivo functions.php

/**
* Mostrar los valores de los campos personalizados adicionales en la vista de la orden en el administrador
*/
function claserama_show_custom_fields_order($order){
    echo '<p><strong>'.__('Método preferido de contacto').':</strong> ' . get_post_meta( $order->id, 'contactmethod', true ) . '</p>';

    if(get_post_meta( $order->id, 'subscribe', true )==1){
        $suscribir = "Si";
    }else{
        $suscribir = "No";
    }
    echo '<p><strong>'.__('Suscribirse al Newsletter').':</strong> ' . $suscribir . '</p>';
}
add_action('woocommerce_admin_order_data_after_billing_address','claserama_show_custom_fields_order');

Y el resultado lo podemos ver en nuestro administrador de la siguiente manera:

Agregar campos personalizados adicionales a los datos de la orden en el administrador de Woocommerce

De la misma manera podemos agregar estos campos a las páginas de Gracias y  la página de la Orden en “Mi Cuenta“, para esto utilizaremos otro par de hooks que nos permitirán realizarlo de manera muy sencilla:

/**
* Mostrar los valores de los campos personalizados adicionales en la vista de la orden en la página de gracias y en la página de Orden en la página "Mi cuenta" del usuario
*/
function claserama_show_custom_fields_thankyou($order_id){
    echo '<p><strong>'.__('Método preferido de contacto').':</strong> ' . get_post_meta( $order_id, 'contactmethod', true ) . '</p>';

    if(get_post_meta( $order_id, 'subscribe', true )==1){
        $suscribir = "Si";
    }else{
        $suscribir = "No";
    }
    echo '<p><strong>'.__('Suscribirse al Newsletter').':</strong> ' . $suscribir . '</p>';
}
add_action('woocommerce_thankyou','claserama_show_custom_fields_thankyou', 20);
add_action('woocommerce_view_order','claserama_show_custom_fields_thankyou', 20);

Y el resultado será el siguiente tanto para la página de Gracias, como para la página de la Orden en “Mi Cuenta“:

Agregar los valores de los campos personalizados adicionales en la página de "Gracias" de woocommerce

Valores de los campos personalizados adicionales en la página de “Gracias” de woocommerce

Agregar los valores de los campos personalizados adicionales en la Orden en sección de 'Mi cuenta' en Woocommerce

Valores de los campos personalizados adicionales en la Orden en sección de ‘Mi cuenta’ en Woocommerce

Finalmente veamos como podemos agregar estos valores e incluirlos también en los correos que se envían a nuestros clientes, en nuestro archivo functions.php hacemos lo siguiente:

/**
* Mostrar los valores de los campos personalizados adicionales en los correos electrónicos
*/
function claserama_show_custom_fields_emails($order, $sent_to_admin, $order){
    if(get_post_meta( $order_id, 'subscribe', true )==1){
        $suscribir = "Si";
    }else{
        $suscribir = "No";
    }

    $fields['contactmethod'] = array(
        'label' => __('Método de contacto preferido'),
        'value' => get_post_meta( $order->id, 'contactmethod', true ),
    );
    $fields['subscribe'] = array(
        'label' => __('Suscribirse al newsletter?'),
        'value' => $suscribir,
    );
    return $fields;
}
add_action('woocommerce_email_order_meta_fields','claserama_show_custom_fields_emails', 10, 3);

Y el resultado de nuestros correo será el siguiente, mostrando los valores de nuestros campos personalizados adicionales:

Agregar valores de los campos personalizados adicionales del checkout de Woocommerce a los emails

Conclusiones

De esta manera podemos personalizar los campos del checkout de nuestra tienda, y se puede hacer de manera sencilla por medio de plugins sin necesidad de código para usuarios gestores de WordPress o para usuarios con nivel de desarrollo también.

Los dejamos con el código que utilizamos en todo este artículo en los siguientes snippets, los pueden utilizar todo junto o incluso hay muchas funciones que pueden combinar y que sea más corto y breve su código. Si tienen algunas otras ideas o conocimiento de código o plugins para personalizar el checkout déjanos tus comentarios para echarles un vistazo y poder actualizar todavía más este post.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*
*
*