Colocar el carrito en la página de checkout en WooCommerce

¡Buenos días! En este tutorial vamos a ver cómo hacer para saltarnos la página carrito de nuestro WooCommerce e ir directamente a la del checkout o página de finalizar la compra. ¡Vamos allá!

Tener el carrito y el checkout en una misma página es algo recomendable a nivel de usabilidad de la web. Lo que nos permite es ahorrarle ese paso extra a la persona que navega por nuestra tienda, de manera que cuando quiera acceder al carrito, la vamos a enviar directamente a la página donde verá el carrito y el formulario de pago a la vez.

Para que nos salgan correctamente todos los pasos de este tutorial, debemos tener una página límpia de checkout de WooCommerce, es decir una página con el shortcode [woocommerce_checkout], tal como la crea el WooCommerce por defecto al instalarlo.

Además, esta página tiene que ser declarada como página de finalizar compra, cosa que también se hace por defecto pero se puede cambiar desde WooCommerce > Ajustes > Avanzado > Página de pago.

Una vez que tengamos esto (si desde que instalaste el WooCommerce no tocaste nada de esto es que vas bien) podemos seguir los pasos necesarios para juntar el carrito con el checkout 🙂

Paso 1: colocamos el carrito antes del checkout

Aquí muchos han pensado que pueden ir simplemente a editar la página de Finalizar la compra y colocar el shortcode de [woocommerce_cart] antes del [woocommerce_checkout]. A primera vista esto funciona pero resulta que crea un bug con la página de “Grácias por la compra”, que aparece después de hacer el pago, así que necesitamos otro método.

Lo que vamos a hacer es simplemente añadir un pequeño snippet de PHP en functions.php, por ejemplo:

add_action( 'woocommerce_before_checkout_form', 'bps_cart_checkout_same_page', 5 );
function bps_cart_checkout_same_page() {
	if ( is_wc_endpoint_url( 'order-received' ) ) return;
	echo do_shortcode('[woocommerce_cart]');
}

De esta forma ya tendremos el carrito colocado antes de los campos del checkout:

Nos falta un último paso

Saltarse el carrito e ir directamente al checkout

Cuando añadimos un producto al carrito arriba salta el mensaje de Ver carrito:

Por defecto este enlace nos lleva al carrito, pero como ahora el carrito lo tenemos en el checkout podemos cambiar el enlace del destino para que nos lleve directos al checkout.

También lo haremos con un snippet de PHP, lo podemos ponder junto al snippet de antes, al functions.php:

add_action( 'woocommerce_before_checkout_form', 'bps_cart_checkout_same_page', 5 );
function bps_cart_checkout_same_page() {
	if ( is_wc_endpoint_url( 'order-received' ) ) return;
	echo do_shortcode('[woocommerce_cart]');
}

add_filter('wc_add_to_cart_message_html', 'bps_redirect_checkout', 10, 2);
function bps_redirect_checkout ($message, $products) {
	$titles = array();
	$count  = 0;

	if ( ! is_array( $products ) ) {
		$products = array( $products => 1 );
		$show_qty = false;
	}

	if ( ! $show_qty ) {
		$products = array_fill_keys( array_keys( $products ), 1 );
	}

	foreach ( $products as $product_id => $qty ) {
		$titles[] = apply_filters( 'woocommerce_add_to_cart_qty_html', ( $qty > 1 ? absint( $qty ) . ' × ' : '' ), $product_id ) . apply_filters( 'woocommerce_add_to_cart_item_name_in_quotes', sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) ), $product_id );
		$count   += $qty;
	}

	$titles = array_filter( $titles );
	/* translators: %s: product name */
	$added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', $count, 'woocommerce' ), wc_format_list_of_items( $titles ) );
	if('yes' !== get_option( 'woocommerce_cart_redirect_after_add' ) ) {
		$message = sprintf( '<a href="%s" tabindex="1" class="button wc-forward">%s</a> %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Finalizar compra' ), esc_html( $added_text ) );
	}
	return $message;
}

No te asustes, no tendrás que modificar nada, si lo pegas tal cual ya te funcionará. Lo único que va a cambiar es que ahora en lugar de Ver carrito el botón dirá Finalizar compra. Si quieres modificar ese texto lo puedes hacer en esta línea, donde pone Finalizar compra:

$message = sprintf( '<a href="%s" tabindex="1" class="button wc-forward">%s</a> %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Finalizar compra' ), esc_html( $added_text ) );

Ahora el texto ya queda modificado y el botón nos llevará directamente al checkout: