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:

O al de envío:

 

Añadiendo los elementos deseados a la clase checkout_fields:

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

 

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:

 

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

 

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.

6 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

  • Hola Cristian. tengo una duda, como puedo hacer para que los datos ingresados se junten con los que te da por default es decir que tengo 2 campos por default “Nombre” y “Apellido Paterno”, y me gustaria añadir “Apellido Materno” pero al efectuar el pago solo me muestra “Nombre” y “Apellido Paterno” juntos en la misma linea, ¿Como puedo hacer para que me muestre “Nombre”,”Apellido Paterno” y “Apellido Materno” sobre la misma linea?

    • Buenas tardes David,

      Cuando añadas el campo nuevo al array, puedes agregar un nombre de clase nuevo:

      ‘account_username’ => array(
      ‘type’ => ‘text’,
      ‘label’ => __(‘Account username’, ‘woocommerce’),
      ‘placeholder’ => _x(‘Username’, ‘placeholder’, ‘woocommerce’),
      ‘class’ => array(‘tu_clase_nueva’)
      ),

      Ahí puedes especificar por CSS que se mantenga en la misma línea que el campo anterior, siempre y cuando quepa en esa línea. Por ejemplo:

      .tu_clase_nueva{
      float:left;
      }

      Si no cupiese puesto que los campos “nombre” y “apellido paterno” tuviesen un CSS que les indicase una anchura del 50%, tendrás que modificarla para que ocupen un 33% y añadir al estilo del nuevo campo algo como:

      .tu_clase_nueva{
      float:left;
      width: 33%;
      }

      Espero haberte ayudado! Feliz Navidad y mejor fin de año!