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.

12 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, excelente post. Me ayudó a orientarme en la solución que necesito. Tengo una tienda online y no puedo modificar los campos del checkout. Tengo la plantilla Bridge y WooCommerce, pero me aparece un placeholder que no he podido quitar con plugins, al igual que algunos campos. Me podrías ayudar y cuánto saldría el costo de modificar esos campos. Te dejo la web. Saludos https://parfumsdparfums.cl/finalizar-compra/

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

  • Hola.

    Muchas gracias por el tutorial, me sirvio de mucha ayuda.

    Me pregunto si hay alguna forma de mostrar el formulario para editar las direcciones de facturación y envío en cualquier parte de nuestra plantilla. He leído por ahí que no son plantillas como tal de wordpress (archivos php, vamos) sino que son endpoints y no sé de que forma mostrar esos formularios donde yo quiera (si es que es posible).

    Saludos.

  • Hola, muchas gracias por la informacion pero necesito ayuda.

    Compre un plugin para reservar asientos y que se complementa con woocommerce, el tema es que cuando terminas de hacer la reserva y llega el correo al cliente y al administrador este llega sin los datos importantes que son el numero de asiento y la fecha, solo llega el nombre del evento.

    Advance Seat Reservation Management for WooCommerce ese es el plugin, me he contactado con el creado y me dice que me contacte con woocommerce, que ellos son del problema, por otro lado woocommerce me dice que los creadores tienen el problema que me contacte con ellos, por ende quedo en medio y sin solucion.

    He revisado el codigo sin obtener mucho, no se como hacerlo para que llegue esa informacion.

    Me podrias orientar mas menos como hacerlo.

    Muchas gracias.

  • Matthew Michael D’Agati functions as the founder of Renewables Worldwide, an Solar Company in Massachusetts.

    A couple of decades ago, venturing into an adventurous journey, Matt D’Agati ventured into the world of alternative energy, additionally within a days began effectively marketing megawatts of power, mainly throughout the commercial sector, working with developers of solar farms and local businesses in the “architecture” of a undertakings.

    Continuous media contained in the industry, inspired Matthew to register a inter city startup 2 period of time backwards, and within no time, he assumed the role of their CSO, in charge of all function and service formation, in addition to being advertised select few title.

    To tactical joint ventures and sheer operate mentality, Matthew D’Agati boosted that business from a modest beforehand-year proceeds to over a 205% rise in arrant income by annum two. Based on that foundation, Renewables Worldwide’s (RW), an seasoned-owned business, was structured with the goal of offering you alternative vigor cures for a smarter and more supportable future.

    Even more specifically, recognizing there is a niche in the promote and an improved approach to gain final results, RW is one of a handful of businesses in the states to target on shoppers exchange, concentrating in both industrial and household solar run ranch off-take. A sight is to create a revenues facilities on a local, regional, national level, offering various inexhaustible electricity items within the of RW.

    This enthusiasm in each sustainable industry continues on to stimulate and drive Matt in proceeding his journey to work with providers that publish the exact same of offering alternative energy treatments for a extra renewable potential. Matthew includes their in commercial from a business program at Hesser College.

    Exploring sun-powered energy universe insights from Matt D’Agati.

  • Hola,

    Soy Edouard Thyssen, consultor financiero en Sofisa Finance SA y parte de una familia con cinco generaciones dedicadas a los negocios. Me especializo en apoyar empresas que quieren levantar fondos para crecer o consideran vender para maximizar su valor.

    Con Sofisa Finance SA, puedo ofrecerle acceso a financiamiento competitivo y un acompañamiento estratégico para una venta exitosa. Trabajamos con una red de socios financieros y compradores de confianza para brindarle soluciones a la medida de sus necesidades.

    Si le interesa conversar sobre cómo podemos ayudar a cumplir sus objetivos, no dude en responder a este mensaje o contactarme directamente en thyssen@sofisafinancesa.com.

    Gracias por su atención,

    Edouard Thyssen
    Consultor financiero
    Sofisa Finance SA

Flickr

  • Cecy
  • Des ongles
  • Des mains
  • Shaking tree (detail)
  • Bagarre
  • Jonas
  • Düden
  • Lisa
  • Circé du soir au matin

About Author

ThemeForest

Collaboratively harness market-driven processes whereas resource-leveling internal or "organic" sources. Competently formulate.

Calendar

diciembre 2024
L M X J V S D
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

RSS Meks Blog

  • How Adding Slack Bot Boosted Our Culture of Appreciation 3 julio, 2024
    Sweet Kudos is a Slack bot that enhances employee recognition, rewards, and celebrations within your team. It empowers team members to express gratitude and appreciation effortlessly by giving virtual Kudos. The post How Adding Slack Bot Boosted Our Culture of Appreciation appeared first on Meks.
    Dusan Milovanovic
  • 10 Best Knowledge Base & Wiki WordPress Themes 2021 15 septiembre, 2021
    Running a successful online business requires an exceptional WordPress knowledge base theme that organizes documentation and helps customers. Customization options, intuitive navigation, unique layouts, and fast responsiveness are just some of the features you need. The following 10 WordPress wiki themes represent the best options for 2021 and beyond. Explore the full range to determine […]
    Dusan Milovanovic
  • How to increase WordPress Memory Limit (quick fixes) 16 junio, 2021
    Here is a post about how to increase the memory limit in WordPress. Allowed memory size exhausted error message showed up in your WordPress installation? No worries – this is one of the most common errors in WordPress. You can apply an easy fix by increasing the memory limit in your PHP. Table of Contents […]
    Dusan Milovanovic
  • How to use (and why) WordPress sitemap plugin 1 marzo, 2021
    Did you know that by knowing how to use the WordPress sitemap plugin you can significantly improve your site’s visibility and traffic? Although it isn’t mandatory to have a sitemap on your site, having one significantly improves the site’s quality, crawlability and indexing. All this is important for better optimization, which is why we wanted […]
    Ivana Cirkovic
  • 22 free and premium podcast software for your show [2021 edition] 18 enero, 2021
    You’re determined to start or improve your podcast but don’t know which podcast software to use to really make it stand out? We’ve got you! #podcasting Top 22 free and premium podcast software for your show #WordPressTips #podcasting The post 22 free and premium podcast software for your show [2021 edition] appeared first on Meks.
    Ivana Cirkovic
  • Digital storytelling with WordPress – an all-in-one guide to make your web stories pop! 23 noviembre, 2020
    Wondering how to improve digital storytelling with WordPress and build more awareness and exposure of your business? Let our guide lead the way. The post Digital storytelling with WordPress – an all-in-one guide to make your web stories pop! appeared first on Meks.
    Ivana Cirkovic
  • How to use WordPress autoposting plugin to improve your visibility and SEO? 10 septiembre, 2020
    Did you know you can use the WordPress autoposting plugin for your content efforts and improve not only your time management but your business and visibility as well? The post How to use WordPress autoposting plugin to improve your visibility and SEO? appeared first on Meks.
    Ivana Cirkovic
  • How to create a personal branding site? Step-by-step DIY guide 15 agosto, 2020
    Looking for ways and means to create a personal branding site? Well, look no further ’cause we’re giving away all the how-to’s to do it yourselves! The post How to create a personal branding site? Step-by-step DIY guide appeared first on Meks.
    Ivana Cirkovic
  • Top 15 WordPress content plugins and tools to improve your visibility and rankings 16 julio, 2020
    Let’s take a look at some of the must-have WordPress content plugins and tools to use to improve both your UX and rankings. The post Top 15 WordPress content plugins and tools to improve your visibility and rankings appeared first on Meks.
    Ivana Cirkovic
  • WCEU 2020 recap – key takeaways from the biggest online WordPress conference 9 junio, 2020
    Missed WCEU 2020 and all the exciting stuff from there? Here are all the key takeaways and main points to remember so, take notes! The post WCEU 2020 recap – key takeaways from the biggest online WordPress conference appeared first on Meks.
    Ivana Cirkovic

Text

Distinctively utilize long-term high-impact total linkage whereas high-payoff experiences. Appropriately communicate 24/365.

Archives