Cómo crear el pago de una página de WooCommerce

¿Quieres reducir el abandono del carrito y aumentar tus tasas de conversión? En esta guía, aprenderá cómo crear un pago de una página de WooCommerce con y sin complementos para ayudarlo a aumentar sus ventas.

No es ningún secreto que el pago es una de las páginas más importantes para una tienda en línea. Sin embargo, también es el paso en el que muchos usuarios abandonan sus carritos. Según una investigación reciente, casi el 70 % de los compradores abandonan su carrito en algún momento y el 21 % lo hace en la caja. ¿Por qué? Normalmente, porque el proceso de compra es demasiado largo o complicado.

Aunque no existe una única solución que funcione para todos los sitios de comercio electrónico, las páginas de pago de una página funcionan mejor para la mayoría de las empresas. Es por eso que crear un pago de una página para su tienda WooCommerce puede ayudarlo a reducir el abandono del carrito y aumentar sus ventas.

¿Qué es un pago de una página de WooCommerce?

Un pago de una página muestra todos los campos del pago en una sola página . Puede incluir el contenido del carrito, detalles de pago, direcciones de facturación y envío, opciones de envío y otra información como imágenes, texto o formularios de contacto adicionales.

El objetivo principal detrás de un pago de una página es acortar el proceso de compra y reducir el abandono del carrito. A medida que los clientes completan toda la información para realizar su pedido en una sola página, es más probable que finalicen el proceso.

Beneficios de los pagos de una página

Algunos de los beneficios de un pago de una página son:

• Ayuda a reducir el abandono del carrito.
• Acorta el proceso de compra
• Aumenta las tasas de conversión
• Fácil de entender porque los compradores pueden ver toda la información que necesitan completar en una sola página

Para obtener más información sobre los pagos de una y varias páginas, consulte esta guía completa.

Cómo crear un pago de una página de WooCommerce

Hay diferentes formas de crear un pago de una página de WooCommerce :

1. Usando un complemento
2. Programáticamente
3. Con un creador de páginas
4. Desde el panel de WordPress

En esta sección, veremos cada opción para que puedas elegir la que mejor se adapte a tus habilidades y necesidades.

1) Cree un pago de una página con un complemento

La primera opción para crear un pago de una página en WooCommerce es usar un complemento. Existen muchos complementos de pago de una página, tanto gratuitos como premium. Para esta demostración, usaremos WooCommerce Direct Checkout. Este complemento lo ayudará a acortar el proceso de pago y aumentar sus tasas de conversión. No solo puede crear un pago de una página, sino también eliminar campos de pago innecesarios, agregar un botón de compra rápida y más.

Pago de una página con Pago directo

Direct Checkout tiene una versión gratuita con funciones básicas y 3 planes premium con más funcionalidades que comienzan en 19 USD (pago único).

Primero, descargue el complemento. Puedes hacerlo desde este enlace o desde tu panel de WordPress. Después de activarlo, ve a WooCommerce > Pago directo . Aquí, configúrelo de la siguiente manera para que redirija a los usuarios desde la tienda y las páginas de productos individuales directamente a la página de pago.

• Alerta de agregado al carrito : Reemplaza la alerta "Ver carrito" con pago directo
• Enlace agregado al carrito : Reemplaza el enlace "Ver carrito" con el pago directo
• Redirección del carrito : Esto le permite cambiar el comportamiento del botón Agregar al carrito
• Redireccionamiento del carrito a : puede elegir dónde redirigir a los usuarios después de que agreguen algo a su carrito. En este caso, los redirigiremos a la caja.
• Reemplazar la URL del carrito : como después de que los compradores agreguen algo a su carrito, los redirigiremos a la caja, reemplazaremos la URL del carrito con el enlace de la caja.

Tenga en cuenta que estos cambios se aplicarán a las páginas de la tienda, de un solo producto y de categorías. Además, asegúrese de no tener ningún enlace que lleve a los usuarios al carrito, ya que lo vamos a deshabilitar.

¡Eso es! Acaba de simplificar el proceso de pago al redirigir a los clientes desde las páginas de productos y compras directamente al pago. Además de eso, los compradores podrán editar y confirmar sus pedidos en la página de pago.

Puede crear un pago de una página con la versión gratuita de WooCommerce Direct Checkout, pero si desea más funciones para llevar su pago al siguiente nivel, puede consultar algunos de los planes premium.

2) Cree un pago de una página mediante programación

En esta sección, usaremos algunos scripts PHP y estilo CSS para agregar funcionalidades al pago de una página que hemos creado con el complemento. Por lo tanto, le recomendamos que eche un vistazo a la primera sección e instale y configure el complemento para crear un pago de una sola página. Literalmente tomará unos minutos.

Una vez que haya hecho eso, veamos cómo personalizar completamente su página de pago de una página mediante programación .

NOTA : Como editaremos algunos archivos de temas principales, antes de comenzar, asegúrese de crear una copia de seguridad de su sitio y de tener un tema secundario instalado en su sitio. Puede usar cualquiera de estos complementos de temas secundarios o crear uno por su cuenta siguiendo esta guía.

2.1) Agregar metadatos del producto a la página de pago

Comencemos agregando información sobre el producto que el usuario está comprando. Mostraremos el nombre, la imagen en miniatura y la descripción del producto en la página de pago.

Como hemos deshabilitado la página del carrito, después de agregar un producto al carrito, los compradores serán redirigidos a la caja. Aunque la página del carrito está oculta, podemos usarla para recuperar toda la información del producto.

Para hacer eso, simplemente pegue el siguiente código en el archivo functions.php de su tema hijo:

 // enlace para mostrar metadatos del producto
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 función QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>Está a punto de comprar un ';
 $carrito = WC()->carrito->get_cart();
 foreach( $carrito as $cart_item_key => $cart_item ){
 $producto = $cart_item['datos'];
 echo $producto->get_name()."</h2>";
 echo $producto->get_image();
 echo "<span>".$producto->get_description()."</span>";
 }
 echo "<h3>Complete su pedido completando el siguiente formulario</h3>";
 }

Para probar esto, haga clic en el botón de compra en cualquier producto y después de ser redirigido a la página de pago, verá algo como esto:

2.2) Sobrescribir el archivo de plantilla de pago de WooCommerce

El archivo responsable de imprimir la página de pago es form-checkout-php y se encuentra en el complemento de WooCommerce en la carpeta de plantillas: /woocommerce/templates/checkout.

Para sobrescribir este archivo, copie el archivo original del complemento WooCommerce y péguelo en la carpeta de pago , dentro del directorio WooCommerce de su tema secundario.

En el pago predeterminado de WooCommerce, el diseño se establece en dos columnas. Los formularios de facturación, envío y adicionales se muestran en la primera columna y los detalles del pedido en la otra.

Puede cambiar esto editando la clase HTML del elemento <div> que encierra formularios, de col2-set a col1-set de la siguiente manera:

 <div class="col1-set">

Después de esta edición simple, todos los formularios se mostrarán en una sola columna de ancho completo como esta:

A continuación, editaremos el título de los detalles del pedido y lo cambiaremos de "Su pedido" a "Revisión del pedido" con el siguiente script:

 <h3><?php esc_html_e( 'Revisión del pedido', 'woocommerce' ); ?></h3>

Estos son solo algunos ejemplos simples de lo que puede hacer aquí. Siéntase libre de ir más allá y hacer sus propias personalizaciones. Puede usar cualquiera de las funciones nativas de WordPress aquí. Para obtener más información sobre los ganchos de pago, puede consultar este artículo.

Para saber más sobre cómo personalizar las plantillas de WooCommerce mediante programación, echa un vistazo a esta guía completa.

2.3) Agregar carrito a la página de pago

Puede usar algunos códigos abreviados en la página de pago, por lo que si desea agregar el carrito allí, puede usar el código abreviado del carrito de WooCommerce de la siguiente manera:

 echo do_shortcode(' [ woocommerce_cart ] ');

Para mostrar el carrito justo antes de los detalles del pedido, pegue este script PHP en el archivo functions.php de su tema hijo:

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

Ahora debería ver el carrito con los productos que el usuario ha agregado al final de los formularios de pago:

2.4) Agregar contenido personalizado a la página de pago

Cuando los clientes revisan los detalles del pedido, pueden elegir un método de pago y hacer clic en "Realizar pedido" para completar la compra. Dado que este bloque se muestra en una columna a la derecha, insertaremos algo de contenido en el lado izquierdo para lograr un diseño equilibrado.

Esta es la función de contenido personalizado que se pegará en el archivo functions.php donde explicamos algunas de las políticas de devolución, métodos de pago, entrega, etc. Siéntete libre de personalizarlo y adaptarlo a tu tienda:

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
función QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>Más información sobre su pedido:</h3>
 <p>Muchas gracias por comprar en nuestra tienda. Aquí hay información útil que podría necesitar saber</p>
 <ul>
 <li>Hacemos lo mejor que podemos para entregar lo más rápido posible, pero para mantener un servicio óptimo, su producto puede tardar hasta dos días hábiles en llegar</li>
 <li>Nuestras políticas de devolución le permiten solicitar un reemplazo hasta 15 días después de la compra. <a href="#">Lea aquí las políticas de la tienda</a></li>
 <li>Si elige el método de pago con tarjeta de crédito, esto podría agregar un retraso de dos días en la entrega en algunos casos</li>
 <li>Si no está satisfecho con lo que recibió, también puede optar por un reembolso de acuerdo con nuestra política de reembolso</li>
 <li>¿Tienes un cupón de descuento? Si lo nota, consígalo aquí y vuelva para que pueda aplicarlo</li>
 </ul>
 </div>','woocommerce');
}

Y este es el resultado final:

2.5) Agregar algo de estilo CSS a la página de pago

En el archivo function.php , verá que hemos agregado nuestra propia clase, a la que llamamos custom-product . Vamos a usar esta clase para diseñar el contenido con algunos scripts CSS. Además, podemos dar los toques finales al diseño de nuestro nuevo pago de una página sin usar nuestra clase personalizada.

Este es el script CSS completo que hemos usado en este tutorial. Simplemente cópielo y péguelo en el archivo style.css de su tema hijo:

 /* ocultar el título del formulario de facturación */
.woocommerce-billing-fields > h3:nth-child(1){
    pantalla: ninguno;
}
/* estás a punto de comprar... */
.producto-personalizado > h2:nth-child(1){
    alineación de texto: centro;
}
/* imagen */
img.attachment-woocommerce_thumbnail:nth-child(2){
    margen: automático;
}
/* descripción */
.producto-personalizado > span:nth-child(3){
    margen: automático;
    ancho: 50%;
    bloqueo de pantalla;
}
/* Complete su orden...*/
.producto-personalizado > h3:nth-child(4){
    alineación de texto: centro;
    margen: 25px 0 25px 0;
}
/* más información.. */
.producto-personalizado > div:nth-child(8){
    flotador izquierdo;
    ancho: 47%;
}
#Detalles del cliente{
    margen inferior: 40px;
}

NOTA : para esta demostración, hemos utilizado el tema Storefront, por lo que es posible que deba ajustar los selectores de CSS si usa un tema diferente o si ha agregado sus propias personalizaciones.

Después de eso, si todo salió bien, debería ver lo siguiente en su página de pago:

¡Eso es! Acaba de crear un pago de una página de WooCommerce totalmente personalizado mediante programación .

3) Cree un pago de una página con un creador de páginas

Otra opción interesante para crear y personalizar un pago de una página en WooCommerce es usar un creador de páginas. Hay varios creadores de páginas por ahí. Para esta demostración, usaremos Site Origin. Con más de 1 millón de instalaciones activas, este es uno de los creadores de páginas más populares debido a su simplicidad y eficiencia.

El proceso es similar para la mayoría de los creadores de páginas, por lo que independientemente del que use, debería poder seguir la guía sin ningún problema.

Primero, descargue Site Origin desde el repositorio de WordPress, instálelo y actívelo en su sitio web. Luego, abra la página de pago con el editor y agréguele un nombre. Lo llamaremos pago de una página.

Como puede ver, la página de pago es solo un código abreviado de WooCommerce colocado en un bloque de Gutenberg. Si ha deshabilitado los bloques de Gutenberg en el backend, también verá el mismo shortcode pero en el antiguo editor de texto. Simplemente elimine el bloque de código abreviado y agregue uno de creación de páginas.

Ahora podemos comenzar a crear un pago de una página totalmente personalizado utilizando el creador de páginas. Puede agregar cualquier widget en columnas y configurarlo en el diseño deseado. Tenga en cuenta que debe insertar el

 [ woocommerce_checkout ]

shortcode de nuevo, de lo contrario no funcionará.

Y aquí viene la mejor parte. También puede usar cualquiera de los widgets o módulos disponibles en el diseño del generador de páginas. Además, puede incluir otros códigos cortos. El carrito y el de “Mi cuenta” son bastante comunes.

Este es un ejemplo básico, por lo que deberá ajustar cada widget y personalizar la página de pago según sus necesidades. Además, tenga en cuenta que cada creador de páginas funciona de manera diferente, por lo que, aunque el proceso es similar, es posible que deba ajustar algunas cosas. Como recomendación general, las plantillas con ancho completo y sin barra lateral suelen funcionar mejor.

4) Cree un pago de una página usando el editor de bloques de Gutenberg

Del mismo modo, puede personalizar su pago de una página de WooCommerce utilizando el editor de bloques de Gutenberg. Para esto, en su tablero de WordPress, abra la página de pago y verá el bloque con el código abreviado de pago. Agreguemos más bloques a esta página haciendo clic en el botón Agregar bloque ( + ) y seleccionando Columnas .

Aquí puede usar cualquiera de los bloques y códigos cortos disponibles para personalizar completamente su página de pago. Alternativamente, si tiene habilidades de codificación, también puede editar el pago insertando su propio código HTML con el bloque de código. Para esta demostración, hemos agregado los códigos abreviados del carrito y de mi cuenta en 2 columnas para que se vea así:

Y así es como puede crear fácilmente un pago de una página en WooCommerce con el editor de bloques de Gutenberg.

Consejos finales

• Al crear un pago de una página, siempre tenga en cuenta el objetivo principal del pago: permitir que los clientes realicen sus pedidos lo más fácilmente posible. Debe evitar cualquier contenido que distraiga a los usuarios de este objetivo.
• Toda la información que los usuarios deben revisar antes de presionar el botón "Realizar pedido" debe estar disponible en la misma página, para que puedan hacer todo desde la página de pago. Incluye toda la información necesaria y evita insertar enlaces que lleven a los usuarios a una URL diferente.
• A los usuarios no les gustan las páginas de contenido largas cuando están comprando. Mantenga las cosas simples y limpias y concéntrese en lograr una página de pago eficiente y profesional

Conclusión

En general, los pagos de una página lo ayudarán a acortar el proceso de compra, reducir el abandono del carrito y aumentar las tasas de conversión. Aunque en algunos casos, los pagos de varias páginas pueden ser más efectivos, para la mayoría de las tiendas, los pagos más cortos tienden a funcionar mejor.

En esta guía, hemos visto diferentes formas de crear un pago de una página en WooCommerce:

• con un complemento
• Programáticamente
• Con un creador de páginas
• Usando el editor de bloques de Gutenberg

Si desea una solución rápida y eficiente, usar Direct Checkout es su mejor opción. Este complemento freemium le permite crear un pago de una página en unos minutos y también incluye varias funciones para ayudarlo a mejorar su pago y aumentar sus ventas. Por ejemplo, puede eliminar campos de pago, agregar botones de compra rápida y vista rápida, y mucho más. Si no desea instalar un complemento adicional y usa un creador de páginas, puede crear la página de pago usando el editor de bloques de Gutenberg o con su creador de páginas.

Por otro lado, si tiene habilidades de codificación, tiene más opciones para editar su página de pago. Después de crear el pago con el complemento Direct Checkout, puede agregar scripts PHP y CSS para personalizar completamente su pago. En este artículo, hemos visto algunos ejemplos, pero hay mucho más que puedes hacer. Siéntase libre de usarlos como base y jugar para encontrar lo que funciona mejor para usted.

¿Cuál es tu método favorito para crear un pago de una página en WooCommerce? ¿Conoces algún otro que debamos incluir? ¡Háganos saber en la sección de comentarios!