Cómo editar la página de pago de WooCommerce

Publicado: 2020-08-15

La página de pago es uno de los pasos más importantes en el proceso de compra. Si tienes una tienda online, es clave que la personalices y la optimices para aumentar las tasas de conversión. Hay varias maneras de hacer eso. En esta guía, le mostraremos 2 métodos diferentes para editar la página de pago de WooCommerce : con complementos y mediante programación.

¿Por qué debería personalizar la página de pago en WooCommerce?

Si tiene una tienda WooCommerce, el pago es una de las páginas más importantes. Es donde el cliente paga y tú cierras la venta. Teniendo en cuenta cuántos compradores abandonan sus carritos y cuánta competencia hay hoy en día, debe optimizar el proceso de pago para cerrar la mayor cantidad de ventas posible.

Aunque WooCommerce incluye una buena configuración predeterminada, es posible que deba editar la página de pago para aumentar las tasas de conversión en su tienda. Algunos de los cambios que puede aplicar para editar su página de pago de WooCommerce son:

  • Crear un pago de una página
  • Cambia el estilo y el diseño de pago con CSS
  • Agregar, eliminar o reorganizar campos de pago
  • Incluir contenido
  • Hacer un campo obligatorio u opcional
  • Agregar campos condicionales y crear lógica condicional
  • Agregue tarifas adicionales por envío, embalaje, etc.
  • Y muchos otros

Anteriormente vimos cómo personalizar la página de la tienda y cómo eliminar campos del proceso de pago, y hoy le mostraremos 2 formas diferentes de personalizar la página de pago en WooCommerce .

Edite la página de pago de WooCommerce: 2 métodos

En esta guía, aprenderá cómo editar la página de pago en WooCommerce de 2 maneras diferentes:

  1. con un complemento
  2. Programáticamente (codificación)

Echemos un vistazo más de cerca a cada opción.

1) Personaliza la página de pago con un complemento

Si no tiene habilidades de codificación, puede editar la página de pago de WooCommerce con un complemento. Hay muchas opciones, pero para este tutorial, usaremos WooCommerce Checkout Manager .

Este plugin lleva un par de años en el mercado y cuenta con más de 90.000 descargas activas. Tiene una versión gratuita con funcionalidades básicas pero potentes que puedes descargar desde aquí y 3 planes premium con funciones más avanzadas que comienzan en 19 USD (pago único). Echemos un vistazo a lo que esta herramienta puede hacer.

personalizar la página de pago de WooCommerce - WooCommerce Checkout Manager principal

Administrador de pago de WooCommerce

Checkout Manager es uno de los mejores complementos para administrar su página de pago. Le permite agregar, editar y eliminar campos en la página de pago para aumentar sus ventas. Y lo mejor es que es muy fácil de usar. Por ejemplo, puede agregar campos de envío, facturación y campos adicionales a la página de pago simplemente habilitando las opciones del menú.

La herramienta le permite agregar u ocultar campos como nombre y apellido, nombre de la empresa, país, ciudad, código postal, dirección, número de teléfono, correo electrónico y otros. Para hacer esto, en su tablero de WordPress, vaya a WooCommerce> Pago y luego a la pestaña Facturación, Envío o Adicional. Allí, verá una lista de todos los campos que desea mostrar u ocultar. personalizar la página de pago de woocommerce - Complemento del administrador de pago

Crear un campo de archivo de carga personalizado

Una de las características más interesantes del complemento WooCommerce Checkout Manager es la posibilidad de permitir que los compradores carguen cualquier tipo de archivo durante el proceso de compra . Esto es muy útil cuando reservas un hotel o alquilas un coche online y tienes que subir tu DNI o carnet de conducir. También puede editar esos archivos y permitir que los usuarios administren sus archivos en caso de que necesiten proporcionar documentos adicionales. Además, puede agregar tarifas fijas o porcentuales a cualquier campo principal o condicional.

Añadir tarifas a la caja

Otra opción interesante para editar la página de pago de WooCommerce es agregar tarifas. Esto puede ser muy útil si desea incluir un cargo adicional para situaciones como:

  • Entrega urgente
  • Manejo especial
  • Cargo adicional por envío a ciertos países o ubicaciones
  • Comisiones relacionadas con tarjetas de crédito o pasarelas de pago

Aunque WooCommerce ofrece algunas opciones para agregar estos cargos adicionales, Checkout Manager le brinda más control y flexibilidad. Para agregar tarifas con Checkout Manager, vaya a WooCommerce > Checkout > Facturación .

Verá diferentes campos de facturación que puede habilitar. Para esta demostración, agregaremos una tarifa por Entrega urgente y necesitaremos crear un nuevo campo, por lo que presionamos el botón Agregar nuevo campo . Seleccionaremos radio como el tipo de botón y le daremos un nombre al nuevo campo.

Luego, vaya a la pestaña Opciones y agregaremos dos etiquetas: Sí y No. Cuando el comprador selecciona Entrega Express, agregaremos un cargo adicional de $10.

Agregar tarifas al pago - Opciones Guarda los cambios y ¡listo! Ahora, cuando el usuario seleccione la opción Entrega Express al finalizar la compra, se agregará una tarifa adicional de $10 a su carrito.

Crear campos condicionales

Además de agregar campos y tarifas, también puede personalizar la página de pago de WooCommerce creando campos condicionales para mejorar la experiencia del usuario. Simplemente necesita seleccionar el campo principal condicional y el valor. Veamos el paso a paso del proceso:

  1. En su panel de WordPress, vaya a WooCommerce > Pago > Facturación y haga clic en Agregar nuevo campo
  2. Seleccione el tipo de campo que desea crear y complete la etiqueta, el marcador de posición/tipo y la descripción. Esto dependerá del tipo de condicional que estés creando.
  3. Después de eso, marque la casilla de verificación condicional a la derecha. Seleccione el campo principal y el valor que debe tomar el campo principal para mostrar el campo condicional
  4. ¡Presiona Guardar y listo!

Lo bueno es que Checkout Manager le permite crear campos personalizados ilimitados y aplicar tantas condiciones como desee para editar su página de pago y brindar a los usuarios una experiencia única.

Para obtener más información sobre cómo crear campos condicionales en WooCommerce, consulte esta guía completa que tiene varios ejemplos de lo que puede hacer para personalizar su pago.

Este es solo un ejemplo simple, pero hay mucho más que puede hacer. Para obtener más información, consulte nuestra guía completa sobre cómo agregar tarifas al proceso de pago de WooCommerce.

Con todo, si desea editar fácilmente la página de pago, WooCommerce Checkout Manager es una excelente opción. La versión gratuita es un gran comienzo, pero si desea funciones más avanzadas, le recomendamos cualquiera de los planes premium.

2) Edite la página de pago mediante programación (codificación)

En esta sección, le mostraremos cómo editar la página de pago de WooCommerce a través de la codificación . Entonces, al final, sabrás cómo:

  1. Agregue campos personalizados a la página de pago de WooCommerce
  2. Guardar campos personalizados en la base de datos
  3. Hacer que un campo obligatorio sea opcional
  4. Agregar contenido a la página de pago
  5. Use códigos cortos en la página de pago de WooCommerce
  6. Dale estilo a la página de pago con CSS personalizado

Para lograr todas estas personalizaciones, utilizará algunos ganchos de pago de WooCommerce. Si no está familiarizado con los ganchos, le recomendamos que consulte nuestra guía de inicio sobre cómo usar los ganchos de WooCommerce. Como aplicaremos algunos cambios al archivo functions.php , le recomendamos que utilice un tema secundario. Puede usar uno de los muchos complementos de temas secundarios o crear uno siguiendo esta guía.

2.1) Agregar campos personalizados a la página de pago de WooCommerce

Lo primero que le mostraremos es cómo agregar campos personalizados a la página de pago. Para hacer esto, pegue el siguiente script en el archivo functions.php del tema hijo:

 // campo de casilla de verificación
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

function quadlayers_subscribe_checkout ($ pago) {
woocommerce_form_field('suscriptor', matriz(
'tipo' => 'casilla de verificación',
//'requerido' => verdadero,
'clase' => array('formulario de campo personalizado-fila-ancho'),
'label' => ' Suscríbete a nuestro boletín.'
), $pago->get_value( 'suscriptor' ) );
}

Esto agregará un campo de casilla de verificación personalizado al final de la página de pago para dar a los usuarios la opción de suscribirse a su boletín informativo. De la misma manera, puede agregar cualquier tipo de campo. Por ejemplo, agreguemos un tipo de campo de entrada de radio con el siguiente script:

 // Campo de entrada de radio
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
función quadlayers_radio_checkout($checkout3){
woocommerce_form_field('alimentar', matriz(
'tipo' => 'radio',
//'requerido' => verdadero,
'clase' => array('formulario de campo personalizado-fila-ancho'),
'label' => '¿Cómo nos encontraste?.',
'opciones' => arreglo(
'Google' => 'Google',
'Amigo' => 'Amigo',
'Facebook' => 'Facebook',
'Youtube' => 'Youtube',
'Otro' => 'Otro'
)
));
}

Esto agregará un tipo de entrada de radio para que pueda preguntar a sus clientes dónde escucharon sobre usted. Agregue campos personalizados a la página de pago de WooCommerce Para obtener más información sobre cómo agregar campos personalizados a la página de pago de WooCommerce, consulte esta guía completa con varios ejemplos.

2.2) Guardar valores de campos personalizados en la base de datos

Ahora, veamos cómo puede usar estos campos personalizados para editar el pago y recopilar información sobre los pedidos de WooCommerce. Para hacer esto, debe poder recuperar los valores de los campos personalizados siempre que lo necesite. Además, debe guardar los valores de los campos personalizados en la base de datos una vez que los clientes completen el formulario y presionen el botón Realizar pedido .

Para lograr esto, debe usar el gancho 'woocommerce_checkout_update_order_meta' . Para actualizar los dos campos personalizados que agregó en el paso 2.1, copie y pegue el siguiente código en el archivo child theme funcitons.php :

 add_action('woocommerce_checkout_update_order_meta','quadlayers_save_function' );
función quadlayers_save_function ($ order_id ) {
if ( ! vacío( $_POST['suscriptor'] ) ) {
update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
}
if ( ! vacío( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

Este script verifica si el campo personalizado está vacío o no con un condicional if() antes de guardarlo en la base de datos. Después de agregar este script, puede recuperar los datos guardados de la base de datos utilizando un objeto WP global “$post” . En el siguiente script, obtenemos los metadatos del suscriptor del pedido actual. Puede usar esto en el backend de la lista de pedidos de WooCommerce.

 publicación global $;
$pedido = wc_get_order( $post->ID );
$c_meta = $pedido->get_meta('suscriptor');

Vale la pena señalar que este es un script sin procesar, por lo que deberá adaptarlo para que se ajuste a sus necesidades específicas.

2.3) Hacer que un campo obligatorio sea opcional

Otra forma simple pero efectiva de editar la página de pago en WooCommerce es hacer que los campos obligatorios u obligatorios sean opcionales. De esta manera, permite que los compradores llenen solo los campos que son necesarios para la transacción y mejoran su experiencia de compra.

Por ejemplo, supongamos que vende productos descargables o virtuales, por lo que desea que el campo Dirección en la sección Facturación sea opcional. Simplemente agregue el siguiente código al archivo functions.php de su tema hijo.

 add_filter('woocommerce_billing_fields', 'wc_address_field_opcional');
función wc_address_field_opcional ($ campos) {
$campos['facturación']['dirección_facturación_1']['requerido'] = falso; 
devolver $campos; 
}

Usando este fragmento como base, puede hacer que más campos sean opcionales en muy poco tiempo.

campos condicionales

Si desea llevar su página de pago de WooCommerce un paso más allá, puede personalizarla agregando campos condicionales. Los campos condicionales tienen lógica condicional, de modo que hay campos que aparecen o desaparecen en función de los valores de otro campo. Por ejemplo, puede crear una lógica condicional para que los campos de tarjeta de crédito solo aparezcan si el usuario selecciona Tarjeta de crédito como opción de pago.

Para obtener más información sobre los campos condicionales y cómo usarlos para editar su página de pago, consulte esta guía completa .

2.4) Agregar contenido a la página de pago

Otra forma de editar la página de pago de WooCommerce es agregando contenido. Con un sólido conocimiento de los ganchos de pago de WC, puede insertar fácilmente cualquier tipo de contenido, como imágenes, títulos, texto, etc., donde lo desee. Por ejemplo, puede usar este script para agregar una imagen de insignia de confianza antes del botón Realizar pedido en la página de pago:

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
función quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

agregue insignias de confianza a la página de pago de woocommerce Además de las imágenes, también puede agregar un texto de encabezado simple en la parte superior del pago:

 add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
función quadlayers_checkout_header(){
echo "<h2>Este es un encabezado personalizado<h2>
";
}

Otra alternativa interesante es agregar un mensaje a su página de pago. Por lo general, las tiendas mencionan cosas relacionadas con el envío, la entrega, etc. Por ejemplo, supongamos que desea recordar a los clientes que es posible que deban esperar 5 días hábiles para recibir sus productos. En el archivo functions.php de su tema de archivo, agregue:

 add_action('woocommerce_after_order_notes', 'wc_add_message');
función wc_add_message () {
echo 'Recuerde que la entrega puede demorar hasta 5 días hábiles.';
}

2.5) Agregar tarifas a la página de pago

Veamos cómo editar la página de pago de WooCommerce y agregar tarifas adicionales. La mayoría de las veces, hay dos tipos de tarifas adicionales:

  • Reparado
  • Porcentaje

En esta sección, le mostraremos cómo agregar ambos a su pago.

Añadir una tarifa fija

Un ejemplo típico de una tarifa fija es la entrega urgente. Supongamos que desea incluir una tarifa fija de $10 para la entrega urgente.

Simplemente use el siguiente script y edite el texto para el nombre del campo. En este ejemplo, llamaremos " Cargo Extra " y agregará $10 al pedido.

 add_action ( 'woocommerce_cart_calculate_fees' , función () {
 if ( is_admin () && ! definido ( 'HACER_AJAX' )) {
 volver ;
 }
 WC ()-> carrito -> add_fee ( __ ( 'Cargo adicional' , 'txtdomain' ), 10 );
 });

Tenga en cuenta que este código agregará automáticamente una tarifa fija de $ 10 al total del pedido de los clientes durante el proceso de pago.

Agregar una tarifa basada en un porcentaje

Otra alternativa es cobrar una tarifa basada en un porcentaje. Esto puede ser útil si hay impuestos adicionales o si desea agregar un costo adicional para ciertos cargos de pasarelas de pago. Digamos que queremos agregar una tarifa del 3% al precio total del pedido (productos + envío).

 add_action ( 'woocommerce_cart_calculate_fees' , función () {
 if ( is_admin () && ! definido ( 'HACER_AJAX' )) {
 volver ;
 }
 $porcentaje = 0.03 ;
 $percentage_fee = ( WC ()-> carrito -> get_cart_contents_total () + WC ()-> carrito -> get_shipping_total ()) * $porcentaje ;
 WC ()-> carrito -> add_fee ( __ ( 'Impuesto' , 'txtdomain' ), $percentage_fee );
 });

Este script agregará una tarifa del 3% al pedido total del comprador durante el proceso de pago.

Para obtener más información y ejemplos para agregar tarifas a su tienda, consulte nuestra guía sobre cómo agregar tarifas al proceso de pago de WooCommerce.

2.6) Use códigos cortos en la página de pago de WooCommerce

Los códigos abreviados de WooCommerce le brindan mucha flexibilidad y le permiten agregar cualquier tipo de contenido utilizando ganchos de pago. Sin embargo, si simplemente imprime el código abreviado, no funcionará. En su lugar, debe incluirlos de la siguiente manera:

 echo do_shortcode('[ woocommerce_cart ]');

Entonces, usando un gancho de la misma manera que lo hiciste en los ejemplos anteriores, puedes terminar con algo como esto:

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
función quadlayers_checkout_shortcode(){
echo do_shortcode('[ woocommerce_cart ]'); }

Este guión traerá la

 [ woocommerce_cart ]

shortcode en acción, mostrando el carrito de WooCommerce en la parte inferior de la página de pago. Agregue soporte de shortcode a la página de pago de WC Tenga en cuenta que puede usar cualquier WordPress, WooCommerce o shortcode personalizado. Sin embargo, es posible que algunos códigos abreviados no sean compatibles o no sean compatibles con WooCommerce, así que verifíquelo antes de usarlos. Para saber más sobre los códigos cortos, puede consultar nuestra guía completa de códigos cortos de WooCommerce.

2.7) Edite la página de pago de WooCommerce con CSS personalizado

Finalmente, también puede personalizar la página de pago de su tienda WooCommerce editando el estilo CSS. Esto no significa que deba pasar horas reconstruyendo toda la página de pago. Incluso un par de cambios simples pueden ayudarlo a optimizar el proceso de pago. Por ejemplo, al editar los colores, las fuentes, los márgenes o los bordes, puede ver grandes mejoras en las tasas de conversión.

No existe una fórmula mágica que funcione para todos los negocios aquí y deberá probar diferentes estilos, pero ajustar algunas cosas puede ayudarlo a aumentar sus ventas. Por ejemplo, puede usar este sencillo script para aplicar un estilo CSS personalizado y editar el color de fondo en la página de pago:

 add_action('wp_head','quadlayers_checkout_style');

función quadlayers_checkout_style(){
         if(is_checkout()==verdadero){

                 echo '<estilo> cuerpo{fondo:#dfdfff!important;}<estilo>';
         }
}

Además de eso, puede tomar este script como base y agregar sus propias reglas CSS dentro de la etiqueta HTML para darle la apariencia perfecta para su sitio. Este es un truco rápido para aplicar CSS a la página de pago. Es muy útil agregar pequeñas piezas de CSS. Pero si desea secuencias de comandos de estilo más extensas, debe poner en cola el estilo CSS al estilo de WordPress, utilizando el gancho de WP nativo wp_enqueue_style() de la siguiente manera:

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

función quadlayers_enqueue_css(){    
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() . '/estilo-de-pago.css'
    );
}

De esta manera, puede tener todo su CSS personalizado en un archivo separado ( checkout-style.css en este ejemplo) que se almacenará en la carpeta de su tema secundario al mismo nivel que el archivo principal style.css .

Estos son solo algunos ejemplos de cómo puede personalizar la página de pago en WooCommerce con algunos scripts simples. Recomendamos tomarlos como base y jugar para agregar o editar cualquier otro aspecto de su pago. Además, si desea editar la página de la tienda a través de la codificación, le recomendamos que consulte nuestra guía sobre cómo personalizar la página de la tienda de WooCommerce mediante programación.

Bonificación: ganchos para pagar

Hay muchos ganchos de pago que puede usar para editar la página de pago en WooCommerce. Estos son algunos de los principales:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_antes_de_los_detalles_del_cliente
  • woocommerce_checkout_facturación
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_envío
  • woocommerce_before_order_notas
  • woocommerce_checkout_después_del_pedido_revisión
  • woocommerce_checkout_después_de_los_detalles_del_cliente
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_pago
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

Para obtener más información sobre los ganchos y cómo funcionan, consulta las siguientes guías:

  • Cómo usar los ganchos de pago de WooCommerce
  • Cómo usar los ganchos de WooCommerce: la guía completa

Finalmente, para ver la lista completa de ganchos que puede usar, eche un vistazo a esta página de documentación.

Conclusión

En general, editar la página de pago puede marcar una gran diferencia y ayudarlo a llevar su tienda WooCommerce al siguiente nivel. Incluso con algunos cambios, puede aumentar las tasas de conversión y aumentar sus ventas. En esta guía, le mostramos dos formas de editar el pago:

  • con un complemento
  • Programáticamente (mediante codificación)

Si no tiene habilidades de codificación pero desea una solución fácil pero sólida, WooCommerce Checkout Manager es su mejor opción. Este complemento freemium tiene potentes funcionalidades para editar la página de pago y es fácil de usar.

Por otro lado, si desea crear su propia solución a través de alguna codificación y no desea instalar ningún complemento, puede editar la página de pago mediante programación. Le mostramos cinco ejemplos diferentes para editar diferentes aspectos del pago, pero las opciones son infinitas. Juega con los guiones y da rienda suelta a tu creatividad para optimizar tu pago.

Si desea acortar el proceso de pago para mejorar las tasas de conversión, le recomendamos que use un complemento de compra rápida para WooCommerce o enlaces de pago directo.

Por último, si quieres conocer diferentes opciones para editar la página de la tienda en tu tienda, te recomendamos que eches un vistazo a esta guía paso a paso .

¿Tiene alguna pregunta o desea compartir con nosotros las personalizaciones de pago que ha aplicado a su sitio? ¡Háganos saber en la sección de comentarios! ¡Estaremos encantados de saber de usted!