WooCommerce: coloque el carrito y el pago en la misma página

Publicado: 2018-10-17

Esta es su guía definitiva, completa con códigos abreviados, fragmentos y soluciones alternativas, para omitir por completo la página del carrito y tener tanto la tabla del carrito como el formulario de pago en la misma página.

Pero primero... ¿por qué querrías hacer esto? Bueno, si vende productos de precio alto (es decir, en promedio, vende aproximadamente un producto por pedido), si desea ahorrarse un paso adicional (dos pasos convierten mejor que tres: "Agregar al carrito" > ~~"Página del carrito"~~ > “Página de Pago” – y esto no es ciencia espacial), si su flujo de trabajo personalizado y sus objetivos de comercio electrónico requieren que administre el Carrito y el Pago juntos, este tutorial es para usted.

Hay una combinación de códigos cortos, configuraciones y fragmentos de PHP que puede usar para hacer que esto funcione de manera inmediata. Y créeme, esto es más fácil de lo que piensas.

Si bien muchos desarrolladores deciden convertir el proceso de pago en un "pago de varios pasos " (ejem, no estoy seguro de por qué: cuantos más pasos, más probable es que se abandone el carrito), aquí veremos exactamente lo contrario.

¿Entonces cómo lo hacen?

Bueno, aquí está la guía completa, fácil y paso a paso para poner Carrito y Pagar en la misma página . Pruébelo, haga algunas pruebas y seguimiento de WooCommerce, y vea si convierte mejor

Paso 1: agregue el código abreviado del carrito en la página de pago

Primero, debe agregar el código abreviado "woocommerce_cart" a la página de pago. De esta manera, le estamos diciendo a WooCommerce que queremos tener la mesa del carrito en la parte superior y el formulario de pago debajo .

Actualización: 19/10/2018. En la primera versión de este tutorial, sugerí agregar el código abreviado [woocommerce_cart] sobre el código abreviado "woocommerce_checkout" en la página de pago (captura de pantalla). Desafortunadamente, esto crea un error en la "página de agradecimiento" después de realizar un pedido. De hecho, se muestra un mensaje de "carrito vacío", ya que el contenido de la página de pago (que incluye el código abreviado del carrito) también se muestra en la página de agradecimiento (¡no estoy seguro de por qué!). Por lo tanto, debemos encontrar una manera de cargar el código abreviado [woocommerce_cart] en la página de pago PERO no en la página de agradecimiento. Aquí está la solución, y sí, es un fragmento de PHP ordenado.

Fragmento de código de PHP: mostrar la tabla del carrito arriba del formulario de pago en la página de pago de WooCommerce

/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Con este pequeño cambio, su nueva página de pago se verá como en la siguiente captura de pantalla. Tenga en cuenta: si está familiarizado con el diseño de la página del carrito, puede recordar la sección "Colaterales del carrito" (es decir, " Totales del carrito ", donde se muestran el subtotal, el envío y los totales) ... bueno, esto se oculta automáticamente solo porque usted' estoy usando los dos códigos cortos en la misma página. ¿No es esto maravilloso?

Carrito y pago en la misma página: vista previa de la página de pago

Paso 2: Desactivar la página del carrito en la configuración de WooCommerce (actualizado para Woo 3.7+)

Probablemente, el cambio de shortcode solo sea suficiente para obtener lo que necesita (Carrito y Pago en la misma página). Sin embargo, se necesitan un par de ajustes en caso de que realmente quieras hacerlo bien.

De hecho, si se vacía el Pago (es decir, el Carrito se vacía en la página de Pago), WooCommerce redirigirá a los usuarios a la página del Carrito y mostrará el mensaje de carrito vacío ("Volver a la tienda").

Ahora, nuestro objetivo es deshacernos por completo de la página del carrito para que los usuarios nunca la vean.

Actualización: 21/ago/2019. Hasta que WooCommerce 3.7 era posible configurar la página de "Pago" como páginas de "Carrito" y "Pago". Esto ya no es posible, así que sigue las nuevas instrucciones.

Por esta razón, debe desactivar la página del carrito (en WooCommerce> Configuración> Avanzado); simplemente haga clic en la pequeña "x" y "Guardar cambios". Aquí está la captura de pantalla actualizada desde WooCommerce 3.7:

Desactivar la página del carrito desde la configuración de WooCommerce (a partir de WooCommerce 3.7)

Paso 3: eliminar la página del carrito en las páginas de WordPress

No hay necesidad de una captura de pantalla aquí.

Ahora que la página del carrito ya no es útil, es hora de eliminarla de sus páginas de WordPress . Los redireccionamientos ya están en su lugar y su mesa de carrito ya está en la página de pago, por lo que no debe preocuparse.

¡Adelante, tira la página del carrito a la basura!

Paso 4 (Bonificación): redirigir pago vacío

Luego, hay una pequeña solución en caso de que no desee mostrar una página de pago vacía si los usuarios acceden a ella directamente o cuando la mesa del carrito está vacía.

Por ejemplo, es posible que desee redirigir los carritos vacíos a la página de inicio, o tal vez a la página de la tienda (o incluso mejor, al último producto visto), para que los clientes puedan comenzar a comprar nuevamente.

Aquí hay un pequeño fragmento para usted, una pequeña bonificación, para que pueda redirigir la página de pago vacía a la página de inicio, por ejemplo. ¡Pruébalo!

Fragmento de PHP: Redirigir carrito vacío @ Pago de WooCommerce con carrito

/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_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;
	}
}