Cómo personalizar la página de pago de WooCommerce y añadir campos adicionales

Utilizas WooCommerce, pero probablemente te hayas dado cuenta de que la página de pago predeterminada no siempre es la mejor para aumentar tus ventas. La buena noticia es que puedes sustituirla por una personalizada, lo que puede suponer una gran diferencia en tus tasas de conversión.

Pero lo entendemos: añadir campos personalizados a una página de pago de WooCommerce puede parecer desalentador.

Por eso he elaborado un práctico tutorial para guiarte a través del proceso. Te mostraré paso a paso cómo añadir esos campos personalizados a tu página de pago de WooCommerce.

Ahora, cuando se trata de modificar tus páginas de pago de WooCommerce, tienes algunas opciones. Puedes utilizar extensiones de WooCommerce de terceros o incluso arremangarte y hacer algo de código personalizado.

En este artículo, te explicaré por qué es importante personalizar la página de pago de WooCommerce y cómo añadir campos personalizados utilizando plugins o tus propias habilidades de codificación.

¿Por qué es importante el campo de pago de WooCommerce?

¿Sabías que la tasa media de abandono de carritos es del 69,99%, según el Instituto Baymard?

Es una dura realidad en el mundo de las compras online.

Por eso debes hacer todo lo posible para animar a tus visitantes a completar una transacción. Pero aquí está el problema: el proceso de pago predeterminado de WooCommerce no está precisamente optimizado para obtener altas conversiones.

La página de pago normal de WooCommerce tiene este aspecto:

Muy básico, ¿verdad?

¡No temas!

Para mejorar tus tasas de conversión, puedes cambiar la predeterminada por una página de pago personalizada de WooCommerce.

Por ejemplo, puedes añadir elementos que generen confianza, como opiniones de clientes y valoraciones de 5 estrellas. Incluso si los compradores potenciales son nuevos en tu negocio, esto puede hacer que se sientan más seguros.

También puedes mostrar productos relacionados que tus visitantes puedan comprar juntos. Aquí tienes un ejemplo de página de pago personalizada de WooCommerce:

Las posibilidades de personalización son infinitas.

Ahora que estás entusiasmado con la idea de personalizar tu página de pago, déjame decirte que en esta guía te he explicado cómo puedes personalizar dinámicamente campos adicionales para eliminar direcciones de facturación, añadir o editar campos de pago personalizados y guardar estos campos personalizados en la base de datos.

Personalizar los campos de la página de pago de WooCommerce

Método nº 1: Personalizar la caja de WooCommerce mediante un plugin

• Primero, descarga el plugin WooCommerce Checkout Manager e Instálalo y Actívalo.
• A continuación, ve al panel de administración de WordPress → WooCommerce → pestaña Pago.

• Ahora recorre las distintas subpestañas, como Facturación, Envíos, Adicional u otras, en las que desees añadir un campo personalizado.
• Haz clic en la sección Añadir nuevo campo, como se muestra a continuación.

• Una vez hecho esto, pulsa el botón Guardar cambios.

Método nº 2: Personalizar la caja de WooCommerce mediante código

Este método añade el campo personalizado a la página de pago utilizando el código indicado. Para empezar a codificar, sigue los pasos declarados a continuación.

• En primer lugar, tenemos que actuar como nuestro archivo functions.php, y luego usaremos este código para empezar a personalizar la página de pago:

<?php/** * Añade el campo a la página de pago */add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout){echo '<div id="personalizar_campo_de_pago"><h2>' . __('Encabezamiento') .   

'</h2>';woocommerce_form_field('nombre_campo_personalizado', array('tipo' =>  'texto','clase' =>  array('mi-campo-clase-forma-fila-ancha') ,'etiqueta' =>  __('Personalizar campo adicional') ,'marcador de posición' =>  __('Guía') ,'obligatorio' =>  true,) , $checkout->get_value('nombre_campo_personalizado'));

echo '</div>';}

• Después de añadir este código, la página de pago debería aparecer como sigue:

• Para validar los datos del campo personalizado, utiliza el código que se indica a continuación:

 

<php
/**
  * Proceso de pago
  */
add_action('woocommerce_checkout_process', 'customise_checkout_field_process');

function personalizar_campo_de_comprobación() {
  // Comprueba si el campo está configurado, si no es así muestra un mensaje de error.
  if (!$_POST['nombre_campo_personalizado']) {
  wc_add_notice(__('Por favor, introduce el valor.'), 'error');
  }
}

• Ahora que hemos añadido un campo de sustitución a la página de pago junto con la comprobación de validación, nos gustaría confirmar si los datos introducidos en el campo personalizado por el cliente se están guardando.
• Para ello, utiliza el código que aparece a continuación:

<php
/**
  * Actualiza el valor del campo
  */
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta');

function customise_checkout_field_update_order_meta($id_pedido) {
  if (!empty($_POST['nombre_campo_personalizado'])) {
  update_post_meta($id_pedido, 'Algún campo', sanitize_text_field($_POST['nombre_campo_personalizado']));
  }
}

Ahora hemos añadido campos personalizados a nuestra tienda web WooCommerce. También puedes editar los campos de pago de WooCommerce utilizando el plugin Editor de campos de pago personalizados de WooCommerce.

Modificar los campos de la página de pago de WooCommerce

Añadir campos a la página de pago de WooCommerce

Empecemos con la siguiente captura de pantalla de la página de pago;

A efectos de su ejemplo, te mostraré cómo eliminar los campos Nombre y Apellidos.

Aquí tienes el fragmento de código:

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );
 
function campos_personal_woocommerce( $campos ) {
  unset($campos['envío']['nombre_de_envío']);
  unset($campos['envío']['apellido_envío']);
  devuelve $campos;
}

En el fragmento de código anterior, puedes ver la función custom_fields_woocommerce. Esta función toma el argumento $fields, que son los campos de pago que hay que eliminar o «desestablecer». En el fragmento de código, he deseleccionado el nombre y los apellidos.

Este es el aspecto que tendrá la caja después de este fragmento:

Eliminar campos de la página de pago de WooCommerce

Al igual que eliminar campos, añadir campos a la página de pago de WooCommerce es muy sencillo. Para ello, añade el siguiente fragmento de código:

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' );
// Nuestra función enganchada - ¡$fields se pasa a través del filtro!
function woocommerce_checkout_field_editor( $fields ) {
  $fields['envío']['valor_campo_envío'] = array(
  'etiqueta' =>  __('Valor del campo', 'woocommerce'),
  'marcador de posición' =>  _x('Valor del campo', 'marcador de posición', 'woocommerce'),
  requerido" =>  verdadero
  );
  devuelve $campos;
}

El fragmento de código anterior contiene tanto etiquetas como marcadores de posición para los nuevos campos. Ahora, es necesario establecer algunos campos obligatorios. De esto se encarga el argumento obligatorio, que se establece en TRUE. Esto hará que aparezca un asterisco rojo al final del nombre del campo.

Si el argumento requerido se establece en FALSE, el campo se establecerá en OPCIONAL:

Mostrar el valor del campo en la página de pedido de WooCommerce

El siguiente fragmento de código muestra el valor del campo en la página de pedido. Para ello, utiliza el siguiente fragmento de código:

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 );
function edit_woocommerce_checkout_page($pedido){
  global $post_id;
  $pedido = nuevo WC_pedido( $post_id );
  echo '<p><fuerte>'.__('Valor del campo').':</strong>  ' . get_post_meta($pedido- >get_id(), '_shipping_field_value', true ) . '</p>';
}

Este fragmento de código mostrará el campo en la página de pedido de WooCommerce.

Editar los campos de la página de pago de WooCommerce

Editar los campos de pago de WooCommerce puede mejorar significativamente la experiencia de compra de tus clientes, y el uso de extensiones simplifica este proceso.

1. Editor de campos de pago para WooCommerce

El Editor de campos de pago para WooCommerce te permite personalizar fácilmente el proceso de pago de tu tienda añadiendo, editando o eliminando campos.

Esto te ayuda a simplificar el proceso de pago, recopilar datos importantes del cliente y mejorar las tasas de conversión reduciendo el abandono del carrito.

Esta extensión mejora la satisfacción del usuario y proporciona más control sobre el flujo de pago, permitiendo a los usuarios mover los campos principales y mantener la coherencia de la marca.

Características principales

• Añade, edita y elimina fácilmente campos de pago como texto, selectores de fecha, desplegables, casillas de verificación y mucho más.
• Reorganiza o elimina los campos principales de la caja de WooCommerce para adaptarlos a tus necesidades.
• Establece condiciones para mostrar campos específicos en función del contenido del producto, la categoría o el carrito.
• Recopila información adicional sobre los clientes para tener una mejor perspectiva y mejorar la gestión de los pedidos.
• Asegúrate de que los datos se introducen correctamente con las opciones de validación de campos integradas.

2. Complementos de pago de WooCommerce

La extensión WooCommerce Checkout Add-Ons te permite mejorar tu proceso de pago ofreciendo productos, servicios u opciones adicionales justo antes de que los clientes completen su compra.

Con la flexibilidad de añadir complementos gratuitos y de pago, esta herramienta puede adaptarse a varios modelos de negocio. Una interfaz fácil de usar te permite configurar opciones como propinas, personalización de productos o seguros para artículos de gran valor.

Características principales

• Añade opciones gratuitas o de pago a tu proceso de pago, lo que te permitirá ofrecer experiencias de compra personalizadas.
• Ofrecer elementos adicionales directamente en la página de pago, desde personalizaciones de productos hasta seguros para artículos de gran valor, puede aumentar las ventas.
• Gestiona y configura fácilmente los complementos a través de una interfaz sencilla, garantizando un flujo de pago fluido sin interrumpir la experiencia del cliente.
• Utiliza los complementos según las necesidades de tus clientes, impulsando el valor del pedido y aumentando la satisfacción en la fase final de su compra

Personaliza tu página de pago de WooCommerce

1. Utiliza los bloques de carrito y pago de Woocommerce

La extensión Woo Cart and Checkout Blocks es la primera forma de personalizar tu página de pago de WooCommerce.

Para empezar, visita la página Bloques WooCommerce y haz clic en el botón «Descargar gratis».

A continuación, se te guiará a través del proceso de pago, no es necesario realizar ningún pago.

Con estos bloques, tienes espacio para mejorar tu experiencia de pago. Puedes configurar complementos de producto, aceptar múltiples métodos de pago, ofrecer opciones de pago exprés y mucho más.

Ten en cuenta que los bloques Carrito y Pago sólo son compatibles con sitios que ejecuten WordPress 6.9 o superior.

Además, tendrás que reemplazar los shortcodes existentes en tus páginas Carrito y Pago.

• Ve a la sección Páginas de tu panel de control y abre tu página de Pago
• Aquí, simplemente borra el shortcode de pago actual [woocommerce_checkout].

• A continuación, busca el Bloque de Pago y añádelo a tu página.
• Ahora verás una vista previa de tu carrito basado en bloques, que puedes personalizar utilizando los ajustes disponibles en la barra lateral.

¡Ya estás listo para personalizar tu página de Pago! Con los ajustes de bloque, puedes mostrar u ocultar fácilmente los números de los pasos de pago y gestionar la visibilidad de campos específicos.

Del mismo modo, puedes configurar complementos de pago, permitir que los clientes apliquen cupones o añadan notas a sus pedidos, activar varias opciones de envío y mucho más.

2. Personalizar manualmente tu página de pago de WooCommerce

Personalizar manualmente tu página de pago de WooCommerce implica editar el código para adaptarlo a tus necesidades funcionales y de diseño.

Aquí tienes una guía paso a paso para ayudarte a personalizar manualmente la página de pago de W ooCommerce, que también se puede adaptar para que admita el pago directo de WooCommerce, para una experiencia de compra más rápida y fluida.

Paso 1: Crear un Tema Hijo

Antes de realizar cualquier cambio, asegúrate de que estás trabajando dentro de un tema hijo. Modificar directamente los archivos del núcleo o del tema de WooCommerce es arriesgado porque las actualizaciones pueden sobrescribir tus cambios. Un tema hijo protege tus personalizaciones.

• Para crear un tema hijo, ve al directorio wp-content/themes.
• Crea una nueva carpeta para el tema de tu hijo.
• Añade un archivo style.css con la información necesaria.
• Añade un archivo functions.php donde utilizarás la hoja de estilos del tema padre.
• Copia los archivos de plantilla a form-checkout.php del directorio del plugin WooCommerce a tu tema hijo en woocommerce/templates/checkout/.

La ruta debe ser:

tu-tema-niño/woocommerce/checkout/

• Modifica los archivos de plantilla copiados según sea necesario.

Paso 2: Añadir/eliminar campos

Para añadir, eliminar o modificar campos en el formulario de pago, tienes que engancharte al filtro woocommerce_checkout_fields de WooCommerce en tu archivo functions.php.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

function custom_override_checkout_fields($campos) {
  // Añadir un campo personalizado
  $fields['facturación']['campo_personalizado_facturación'] = array(
  'tipo' =>  'texto',
  'etiqueta' =>  __('Campo personalizado', 'woocommerce'),
  'marcador de posición' =>  _x('Introduce algo aquí...', 'placeholder', 'woocommerce'),
  requerido" =>  cierto,
  'clase' =>  array('formulario-fila-ancha'),
  claro" =>  cierto,
  );

  // Eliminar un campo (por ejemplo, empresa de facturación)
  unset($campos['facturación']['empresa_facturación']);

  devuelve $campos;
}

Paso 3. Reorganizar los campos de la caja

Si quieres reordenar los campos en la página de pago, puedes establecer su prioridad en el filtro woocommerce_checkout_fields:

add_filter('woocommerce_checkout_fields', 'custom_reorder_checkout_fields');

function custom_reorder_checkout_fields($campos) {
  $fields['billing']['billing_phone']['priority'] = 10; // Subir el campo teléfono
  $fields['billing']['billing_email']['priority'] = 20; // Desplazar el campo email hacia abajo
  devuelve $campos;
}

Paso 4: Personalizar el botón de pago

También puedes personalizar el botón de pago utilizando el filtro woocommerce_order_button_html en tu archivo functions.php:

add_filter('woocommerce_order_button_html', 'custom_woocommerce_order_button_html');

function custom_woocommerce_order_button_html() {
  $button_text = 'Hacer pedido ahora'; // Texto personalizado del botón
  volver '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr($button_text) . '">' . esc_html($texto_botón) . '</button>';
}

Esto modificará el texto o incluso el estilo del botón «Realizar pedido».

Paso 5: Personalizar el diseño de la página de pago

Puedes desenganchar y volver a enganchar acciones en la plantilla de pago de WooCommerce. Añade el siguiente código a tu archivo functions.php.

remove_action('woocommerce_checkout_order_review', 'woocommerce_order_review', 10);
add_action('woocommerce_checkout_billing', 'woocommerce_order_review', 20);

Puedes personalizar el siguiente código y crear una página de pago WooCommerce que se ajuste a las necesidades de tu tienda.

Crear una página de pago WooCommerce de una sola página

CartFlows es un plugin de pago que transforma el proceso de pago de tu WooCommerce en una experiencia fluida de una sola página.

CartFlows simplifica el proceso de compra, permitiendo a los clientes completar sus compras sin tener que navegar por varias páginas. Esto reduce el abandono de carritos y fomenta una compra más rápida.

Lo que diferencia a CartFlows es su sencilla interfaz de arrastrar y soltar, que elimina la necesidad de tener conocimientos de codificación. Puedes crear y gestionar tus páginas de pago de forma rápida e intuitiva, haciéndolas accesibles para usuarios de todos los niveles técnicos.

Paso 1: Plantilla de pago de una página:

Elige tu Constructor de Páginas preferido en el menú Configuración de CartFlows.

Paso 2: Crear flujos

Ahora, navega hasta CartFlows > Flujos.

Paso 3: Añadir Page Builder

Selecciona Añadir nuevo en la parte superior de la pantalla para explorar las plantillas disponibles para el constructor de páginas que elegiste en el Paso 1.

Paso 4: Añadir plantilla a tu tienda Woocommerce

• Empieza navegando por la biblioteca de plantillas que aparece en tu pantalla.
• Puedes filtrar o buscar fácilmente en la lista utilizando palabras clave relevantes, o si lo prefieres, iniciar una búsqueda desde cero.
• Cuando encuentres la plantilla que quieres importar, pasa el ratón sobre ella y haz clic en «Ver todos los pasos«.

Paso 5: Importar el flujo desde el tema

A continuación, haz clic en Importar flujo, y el flujo comenzará a importarse en CartFlows

Una vez hecho esto, ¡la página de destino estará importada y lista para personalizar!

Enlaza directamente los productos a la página de pago

• Primero debes instalar el plugin Pago Directo para habilitar los enlaces de pago directo.
• Empieza accediendo a tu panel de administración de WordPress y ve a Plugins > Añadir nuevo.
• En la barra de búsqueda de la parte superior derecha, escribe«Pago directo para WooCommerce«.
• Una vez que aparezca el plugin, haz clic en Instalar, y Activa el plugin.

A continuación, abre la configuración del plugin accediendo a WooCommerce > Pago Directo desde la barra lateral.

• Ahora, ve a la pestaña General y activa la opción Redirección de Añadido a la Cesta.
• A continuación, selecciona Pago en el desplegable Redirección de Añadido al carro.
• Haz clic en Guardar cambios para aplicar tu configuración.

A continuación, ve a la pestaña Productos y activa la opción que dice Redirigir a la página de la cesta tras una adición correcta. Haz clic en Guardar cambios y ¡listo!

Con el plugin de Pago Directo ya configurado, tus clientes se saltarán la página del carrito y pasarán directamente de la página del producto al pago.

Esto simplifica el proceso de compra, mejorando la experiencia de compra y aumentando potencialmente tus ventas.

Puedes personalizar aún más varios elementos, como el texto de pago directo, los enlaces de redireccionamiento del carrito, etc.

Resumen

En conclusión, personalizando la página de pago de WooCommerce y añadiendo/eliminando campos personalizados, puedes hacer que todo el proceso de compra sea fluido y eficiente para tus clientes, asegurándote de no perder ninguna venta.

Como se ha comentado en este blog, puedes mostrar a tus clientes reseñas de productos, productos relacionados, valoraciones de cinco estrellas y mucho más para empujarles suavemente hacia la compra.

Muchos propietarios de tiendas WooCommerce también consideran que la página de pago es un punto excelente para recopilar datos valiosos de los clientes y utilizar páginas de destino y otras estrategias de recopilación de datos. Este enfoque proporciona acceso a información de alta calidad sobre los clientes.