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.
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".
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.
1 2 3 4 5 6 | /* Pone shortcode del carrito en Finalizar compra */ add_action( 'woocommerce_before_checkout_form', 'cart_and_checkout_page', 5 ); function cart_and_checkout_page() { if ( is_wc_endpoint_url( 'order-received' ) ) return; echo do_shortcode('[woocommerce_cart]'); } |
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"
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.
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".
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.
1 2 3 4 5 6 7 8 | /* Redirigir a Inicio cuando el carrito no tiene productos */ add_action( 'template_redirect', 'carrito_vacio_ir_a_home' ); function carrito_vacio_ir_a_home() { 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; } } |
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.
3 opciones para corregir WordPress instalado en una carpeta- Cómo crear un blog con el tema EXTRA de WordPress
- Personalizar el menú de WordPress usando Extra de ejemplo
- Cómo encontrar enlaces rotos en WordPress y cómo arreglarlos
- Añadir más botones en los módulos del tema Divi
- Exportar una entrada de WordPress a otra web
Muchas gracias por la explicación, era lo que estaba buscando pero tengo una duda gigante...
Dado que "Woocommerce" no permite editar en profundidad el diseño por default del "Carrito", he creado una página nueva y añadí el widget "Cart", de esta manera he podido editar los colores, tipografías, tamaños, etc.
Entonces me gustaría poder agregar esta "pág" o este widget "Cart" (ya editado) dentro de la pagina "Finalizar compra" que menciones, es posible esto? O solo se debe hacer mediante shortcode con las plantillas por default de woocoommerce?
Saludos!
Hola Christian,
La página de finalizar compra es una página compleja donde se produce el pago de los productos seleccionados conectando con la pasarela de pago o con la información que el usuario necesita para realizar la transacción correctamente.
La página de finalizar compra también se encarga de enviar los correos correspondientes para notificar si el proceso de compra se realizó correctamente o si se denegó el pago por alguna razón.
No te aconsejo realizar cambios de código en esta página ya que puedes estropear el correcto funcionamiento. Por eso, lo que yo ofrezco en este artículo son cambios visuales realizados con CSS y alguna función que no afecta al proceso de pago.
Debes respetar siempre los shortcodes de Woocommerce, que son los que se encargan de hacer funcionar correctamente la tienda.
Ahora bien, si en la página de finalizar compra respetas el shortcode de esta página, puedes añadir el widget del carrito antes del shortcode y probar si es compatible haciendo alguna prueba, pero el shortcode de la página finalizar debe estar siempre.
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?
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.