CMS Woocommerce WordPress

Personalizar formulario CheckOut de WooCommerce

Imagen de Freepik

¿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! 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

2 Comentarios

Haz clic aquí para dejar tu comentario

  • Hola! yo lo que estoy buscando es cómo modificar la aparieriencia de los datos a rellenar cuando se ha realizado una compra: nombre, apellidos. dirección,,, poder hacer una caja con colores en los campos y no que se vea ahora tan extendido y poco atractivo. gracias de antemano

    • Hola Elena. Bienvenida!
      En principio es algo que puedes solucionar con CSS. Utilizando las clases y selectores puedes editar el ancho de los campos, su color, fuente, tamaño, posición…
      Este CSS puedes añadirlo directamente en el campo que habilitan casi todos los temas de wordpress, y que puedes encontrar en Apariencia –> Personalizar