Cómo poner el carrito y el pago en la misma página de WooCommerce

Lo sé, te he sorprendido ¿A que no habías pensado que esta virguería era posible?. ¿A que le ves las posibilidades de poner el carrito y el pago en la misma página de tu tienda online?

Siempre que hablamos de eCommerce, de canalizar el embudo o funnel de ventas en una tienda online, hay un mantra básico: cuantos menos clics y pasos para que el cliente pague mejor.

Y uno de los clics que nos podemos ahorrar es el paso por el carrito, pero sin dejar de pasar por el carrito.

Porque claro, podemos forzar a que el cliente no pase por el carrito y llevarle directamente al pago, pero ¿y si queremos que también pase por el carrito para hacer venta cruzada?

La solución perfecta es unificar en una misma página el carrito y el pago, y que el cliente decida, solo tienes que seguir las siguientes instrucciones…

Añade el shortcode del carrito a la página de finalizar compra

El modo que WooCommerce tiene de mostrar el carrito o las opciones de finalizar compra es mediante shortcodes.

Y uno podría pensar que es algo tan fácil como poner los 2 shortcodes en la misma página ¿no?

Error: Si haces eso generarás varios errores así que vamos a crear una función que añada, sobre la marcha, el shortcode del carrito a la página de finalizar compra.

Simplemente copia y pega el siguiente código en tu plugin de personalizaciones o en el archivo functions.php del tema activo:

/* Añade shortcode del carrito a la página de finalizar compra */
add_action( 'woocommerce_before_checkout_form', 'carrito_y_pago_juntos', 5 );
function carrito_y_pago_juntos() {
if ( is_wc_endpoint_url( 'order-received' ) ) return;
echo do_shortcode('[woocommerce_cart]');
}

Una vez guardes los cambios, cuando un cliente añada productos al carrito, pasarás de esto…

A esto otro…

carrito y pago en la misma página de WooCommerce

Chulo ¿eh? Pero no hemos terminado.

Porque eso es lo que veremos si vamos directamente a finalizar compra, pero el carrito aún existe ¿verdad?

Y si no hay ningún producto en el carrito, si tratamos de pagar, WooCommerce nos ofrecerá volver al carrito igualmente, y no queremos eso ¿no?

Cambia los ajustes de página de carrito y finalizar compra

Ahora toca decirle a WooCommerce que la página de carrito y finalizar compra son la misma cosa.

Para eso ve al menú de administración WooCommerce > Ajustes > Avanzado, y selecciona la página de finalizar compra también para el carrito, así:

Guarda los cambios, como siempre.

Borra la página del carrito

Como ya hemos hecho el bucle perfecto en este momento ya puedes borrar la página del carrito original, pues ya no la necesitarás.

Ya sabes: Escritorio de WordPress > Páginas > Enviar a la papelera.

Extra: Redirige los carritos vacíos a la tienda

Para terminar de hacer perfecto nuestro embudo de ventas falta un retoque (opcional).

Lo que le falta es redirigir a los usuarios a la tienda – o cualquier otra página – si por error visita la página de finalizar compra y no hay ningún producto aún en el carrito.

Y es que si accede a la página del carrito será como una encerrona, porque en realidad ya es la página de finalizar compra, pero sin modo de volver a la tienda, ya que esta página no tiene esa opción que sí tenía la de carrito.

Para ello solo tienes que añadir esta otra función:

/* Redirigir a pagina de tienda si el carrito está vacío */
add_action( 'template_redirect', 'redirigir_a_portada_si_carrito_vacio' );
function redirigir_a_portada_si_carrito_vacio() {
    if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
        wp_safe_redirect( home_url() );
        exit;
    }
}

En este caso redirigimos al usuario a la página de inicio (home_url), pues suele ser la mejor opción, pues ahí tendrás tus ofertas, productos destacados, diseño personalizado orientado a conversión, etc ¿no?


Nada más, espero que aumenten tus ventas con este truco tan majo al reducir pasos en tu funnel de ventas de WooCommerce.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 4.4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

9 comentarios en “Cómo poner el carrito y el pago en la misma página de WooCommerce”

  1. buenas! el código de functions de redirección de carrito vacío a la home me dice que tiene un error en if 🙁
    podrías verificar si está correcto el código?
    desde ya gracias por tu aporte a los desarrolladores, aprendí muchísimo con este blog!

  2. /* Añade shortcode del carrito a la página de finalizar compra */
    El código bloquea el botón de actualizar Carrito, alguna solución? Gracias

  3. Wooww!! menudo hack Fernando,, muchas gracias.
    ¿Hay alguna manera de eliminar la opción de aplicar cupón? por que al unir las dos paginas se muestra dos veces la opción de aplicar cupón.
    He probado a usar los dos hacks de este post https://ayudawp.com/woocommerce-ocultar-aviso-cupones/ para eliminar la opción de aplicar cupón pero con las dos opciones se elimina por completo las casillas de cupones y estaría bien que solo se viese una..
    Hay te lo dejo Fernando
    Muchas gracias.

  4. Muchas gracias por tu fantátstico Post! A mí me funciona todo, excepto que cuando le digo que la página del carrito y del checkout es la misma, al grabarla, la del checkout me desaparece y cuando se termina un pedido intenta hacer una redirección a alguna página que no encuentra… ¿alguna idea? Gracias!!

  5. Frida Hernandez

    Hola!!! super pero no funciona!!!, ufff tienes alguna solucion no me deja elegir CAMBIA LOS AJUSTES DE PÁGINA DE CARRITO Y FINALIZAR COMPRA ya lo intente de mil maneras pero no deja hacer. HELP ME porfavorrr

  6. Carlos Agudelo

    al intentar poner como pagina de carrito la pagina Finalizar compra, el desplegable no me muesta esa opcion, y manualmente no puedo ingresarla

  7. Juan Martín Pascual

    Hola Fernando, en la última versión de Woocommerce no deja colocar la misma página «Finalizar compra» en las dos casillas de los ajustes. y al terminar el proceso de compra, al no haber una de las páginas te lleva a una 404

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido