Personalizar formulario CheckOut de WooCommerce

¿Cómo editar los campos del formulario de pago de WooCommerce?

Cuando configuramos una tienda online en Woocommerce, uno de los mayores quebraderos de cabeza es cómo configurar algunas de sus partes.

El plugin en sí mismo permite poca flexibilidad, y la lluvia de extensiones disponibles desde el propio software son de pago…

Así que si lo que deseamos es personalizar el formulario que aparece cuando alguien finaliza una compra, tenemos 3 opciones:

1. Pasar por caja
2. Buscar un plugin alternativo gratuíto
3. DIY, que por sus siglas en inglés significa, hazlo tú mismo.

En este miniartículo de Loopeando.com nos vamos a centrar en los dos últimos puntos. Así que, como acostumbramos a decir: Pasa, disfruta, aprende y comparte.

Plugin: La eterna solución

Como siempre, la vía rápida para no calentarnos la cabeza es un plugin.

En esta ocasión os recomendamos Woo Checkout Field Editor Pro, una sencilla extensión que se integra en el menú de Woocommerce y permite crear campos nuevos, activar/desactivar los ya existentes, cambiarlos de orden, etc…

Con código

WooCommerce cuenta con dos tipos de formulario para el checkout:

• Formulario de facturación (Billing)
• Formulario de envío (Shipping)

Que pueden contener o no los mismos campos.

Estos formularios son, en la práctica, filtros que llamamos desde el functions.php y a los que agregamos en un array los campos a mostrar y sus propiedades.

Así pues, el primer paso sería abrir el functions.php de nuestro tema activo, que habitualmente está en la siguiente ruta: http://www.nuestro_dominio.tld/wp-content/themes/nombre_del_tema/functions.php

Tras ello podemos escoger entre agregar campos al formulario de facturación:

$address_fields = apply_filters('woocommerce_billing_fields', $address_fields);

O al de envío:

$address_fields = apply_filters('woocommerce_shipping_fields', $address_fields);

Añadiendo los elementos deseados a la clase checkout_fields:

$this->checkout_fields['billing']    = $woocommerce->countries->get_address_fields( $this->get_value('billing_country'), 'billing_' );
$this->checkout_fields['shipping']   = $woocommerce->countries->get_address_fields( $this->get_value('shipping_country'), 'shipping_' );
$this->checkout_fields['account']    = array(
    'account_username' => array(
        'type' => 'text',
        'label' => __('Account username', 'woocommerce'),
        'placeholder' => _x('Username', 'placeholder', 'woocommerce')
        ),
    'account_password' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-first')
        ),
    'account_password-2' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-last'),
        'label_class' => array('hidden')
        )
    );
$this->checkout_fields['order']  = array(
    'order_comments' => array(
        'type' => 'textarea',
        'class' => array('notes'),
        'label' => __('Order Notes', 'woocommerce'),
        'placeholder' => _x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')
        )
    );

Y al finalizar, pasamos la matriz por el filtro que indicábamos:

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

Naturalmente también podremos cambiar las propiedades de los campos ya existentes. Por ejemplo, vamos a cambiar el placeholder (texto que aparece dentro de un campo justo antes de que escribamos en él) y el label (nombre público del campo) de order_comments:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'Escribe aquí tus comentarios para el mensajero';
     $fields['order']['order_comments']['label'] = 'Detalles';
     return $fields;
}

Y si lo que deseamos es borrar un campo, aplicamos unset:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     unset($fields['order']['order_comments']);

     return $fields;
}

Si deseas ver otros ejemplos así como los datos que pasa por defecto WooCommerce a cada uno de los dos formularios, te recomendamos leerlo en la documentación oficial.

¿Has conseguido solucionar tu problema? ¡Cuéntanoslo!