Mostrar el «Carrito» en la página «Finalizar compra»

por | 2 Comentarios

Crear un embudo y saber redirigir al usuario es importante para conseguir terminar una venta con éxito. Al mostrar el «Carrito» en la página «Finalizar compra» de Woocommerce eliminamos un paso en el proceso de venta y facilitamos finalizar la transacción con éxito.

Suscríbete:

Juntar el carrito y finalizar compra en la misma página

A estas alturas nadie puede negar que Woocommerce es un alto competidor en la creación de tiendas online, pero como todo, se pueden mejorar algunos aspectos.

En este artículo nos centraremos en facilitar el pago de los productos eleginos en una tienda online creada con este e-commerce.

Este tutorial está probado con las últimas versiones de Woocommerce 4.x donde se soluciona un problema a la hora de asignar las páginas en los ajustes.

Los shortcodes de las páginas de Woocommerce

Al instalar por primera vez Woocommerce para convertir WordPress en una tienda online con todas las funcionalidades que lo caracterizan, se autogeneran unas páginas para administrar cada tipo de contenido.

Entre las páginas que se crean nos interesan dos, la del «Carrito» y la de «Finalizar compra», que si lo hemos instalado en inglés serán «Cart» y «Checkout«.

  • Shortcode para la página del «Carrito»: [woocommerce_cart]
  • Shortcode para la página «Finalizar compra»: [woocommerce_checkout]

Ahora bien, pensaréis que colocando un shortcode debajo del otro en la misma página conseguimos lo que queremos, aunque en un principio parece que pueda funcionar, esto provoca errores en la página que muestra el resumen de la venta.

El método adecuado es añadir un fragmento de código que cargue el carrito en la página sólo cuando aun no se ha procedido al pago, y que no lo cargue a la hora de mostrar el resumen.

Este error se muestra más acentuado según el tema que utilicemos.

Crear una página nueva para el resumen de compra

El primer paso es crear una página nueva que podemos llamar «Resultado de compra», o de alguna forma que se identifique como resumen de la transacción.

Dentro de esa página colocamos el mismo shortcode que tiene la página «Finalizar compra».

Crear nueva página para Woocommerce
Nueva página para Woocommerce

Una vez creada eliminamos la página «Carrito», ya que no la vamos a utilizar.

Se podía haber cambiado el shortcode de la página del carrito, pero para no liarnos con nombres y términos es mejor tener una página que haga referencia al contenido que se mostrará.

Añadir código en funtions.php

En estos momentos es posible que nos aparezcan errores al intentar hacer una compra, es normal porque no hemos terminado.

Tenemos la página «Finalizar compra» donde se muestra el proceso de pago, pero para mostrar los productos del carrito hay que añadir una función que haga convivir correctamente toda la información en una misma página.

Coloca este código en el archivo funtions.php de tu tema hijo o child theme, o del plugin de funciones personalizadas, si no quieres perder los cambios con las futuras actualizaciones que recibas de tu tema.

Esta función permite que se ejecuten los dos shortcodes de Woocommerce sin problemas de incompatibilidad.

Cambiar los ajustes de Woocommerce

El último paso es indicar a Woocommerce donde debe mostrar cada contenido.

Desde la administración de Woocommerce accedemos a la pestaña «Avanzado» y eliminamos de las casillas las páginas preasignadas a «Página de carrito» y «Página de pago».

Si no lo hacemos no nos dejará elegir las páginas que necesitamos para que todo funcione.

Guardamos los cambios y ahora elegimos las páginas correctas:

  • En Página de carrito colocamos: «Finalizar compra»
  • En Página de pago colocamos: «Resultado de compra»
configurar las páginas del "Carrito" y la página de "Finalizar compra" en los ajustes de Woocommerce
Asignar páginas en Woocommerce

Volvemos a guardar los cambios y ya tenemos todo lo que necesitamos para mostrar el «Carrito» junto a los datos de pago de la página «Finalizar compra».

Esta situación fuerza al comprador a pagar y no dudar de los productos que ha elegido, no sea que se arrepienta y perdamos la venta.

muestra el "Carrito" y la página de "Finalizar compra" juntos
Resultado de unir el «Carrito» y la página de «Finalizar compra»

Redirigir al carrito tras elegir un producto

Podemos forzar un poco más este embudo de ventas si tras picar en añadir al carrito el usuario es redirigido a esta nueva página que hemos creado.

Tan sólo tenemos que marcar la casilla de «Comportamineto» en los ajustes de Woocommerce, dentro de la pestaña «Productos».

Redirigir al carrito en Woocommerce
Redirigir al carrito en Woocommerce

Si el usuario desea seguir comprando tendrá un botón que le devolverá a la tienda, pero le ofrecemos pagar en ese mismo momento por si quiere finalizar la compra sin perder más tiempo.

Redirigir a la página principal cuando no hay productos

Tanto la página que hemos creado con este proceso, como la del carrito que treae por defecrto Woocommerce quedan un poco desangeladas cuando no hay productos elegidos para su compra.

Eso lo solucionamos haciendo una redirección automática cuando Woocommerce detecte que el carrito está vacío. Vamos a enviar al usuario a la página principal del sitio.

Añadimos el siguiente código en el archivo funtions.php, como hicimos con el anterior, en un tema hijo o en un plugin de funciones personalizadas.

Plugin para colocar el «Carrito» y «Finalizar compra» en la misma página

Aunque el proceso descrito no es complicado, existe un tipo de perfil de usuarios de WordPress que prefiern no lidiar con código y tirar de plugin.

Desafortunadamente no existe ninguna solución gratuita, pero las hay bastante econónicas, sobre todo para una tienda online en la que podemos recuperar el dinero invertido en el complemento.

Para quien esté interesado en esta solución, aquí te dejo un plugin que cumple con esta función.

Plugin para juntar el carrito y Finalizar compra en la misma página

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

2 Comentarios

  1. Karin

    Querido Juan, muchas gracias por este post tan útil. Sin embargo, tengo un problema que no comprendo por qué se da, y es que cuando agrego todas estas funciones que indicas al functions.php, el sitio completo falla y no permite entrar a nada… simplemente dice que hubo un error crítico en este sitio de WordPress. ¿Será que me estoy saltando algo?

    Responder
    • Juan

      Es importante que el código lo añadas al archivo funtions.php del tema hijo o que crees un plugin de acciones personalizadas.

      Si utilizas el archivo del tema padre para modificarlo, pueden surgir problemas.

      Ahora bien, si lo estás haciendo como digo, comprueba que colocas el código tal cual aparece en el artículo. Yo lo uso habitualmente para mis clientes y el código no da errores de momento.

      Fíjate en todos los caracteres a la hora de copiarlo, hay veces que el ordenador cambia los símbolos sin darnos cuenta.

      Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido