fbpx

¿Cómo personalizar la página de carrito en WooCommerce?

La página de carrito de tu WooCommerce es una pieza fundamental en tu embudo de ventas… Aprende como personalizarla de forma fácil y añade aquella información que necesitan tus usuarios para completar su compra.

A continuación repasamos todo lo que debes tener en cuenta y que hemos visto en el videotutorial de hoy, para personalizar la página de carrito de WooCommerce jugando con sus hooks:

<?php

//* Personalización de la página de carrito de WooCommerce
add_action( 'after_setup_theme', 'martin_custom_cart' );

function martin_custom_cart() {
	 
	//remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
	//remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10 );
	//remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

}
  • Descomenta (es decir, elimina las dos //) de la línea que quieras ejecutar y guarda el archivo de tu plugin de funciones para aplicar los cambios.
  • Si lo que quieres, es insertar algún contenido en alguno de los hooks de la página de carrito, puedes utilizar alguna de las siguientes funciones de ejemplo. Edita el contenido HTML que se encuentra dentro de cada función ECHO como hemos hecho en el vídeo:
<?php

add_action( 'woocommerce_before_cart', 'function_woocommerce_before_cart' );
function function_woocommerce_before_cart() {
	echo ('<div class="woocommerce-info">woocommerce_before_cart</div>');
}

add_action( 'woocommerce_before_cart_table', 'function_woocommerce_before_cart_table' );
function function_woocommerce_before_cart_table() {
	echo ('<div class="woocommerce-info">woocommerce_before_cart_table</div>');
}

add_action( 'woocommerce_before_cart_contents', 'function_woocommerce_before_cart_contents' );
function function_woocommerce_before_cart_contents() {
	echo ('<div class="woocommerce-info">woocommerce_before_cart_contents</div>');
}

add_action( 'woocommerce_cart_contents', 'function_woocommerce_cart_contents' );
function function_woocommerce_cart_contents() {
	echo ('<div class="woocommerce-info">woocommerce_cart_contents</div>');
}

add_action( 'woocommerce_cart_coupon', 'function_woocommerce_cart_coupon' );
function function_woocommerce_cart_coupon() {
	echo ('<div class="woocommerce-info">woocommerce_cart_coupon</div>');
}

add_action( 'woocommerce_cart_actions', 'function_woocommerce_cart_actions' );
function function_woocommerce_cart_actions() {
	echo ('<div class="woocommerce-info">woocommerce_cart_actions</div>');
}

add_action( 'woocommerce_after_cart_contents', 'function_woocommerce_after_cart_contents' );
function function_woocommerce_after_cart_contents() {
	echo ('<div class="woocommerce-info">woocommerce_after_cart_contents</div>');
}

add_action( 'woocommerce_after_cart_table', 'function_woocommerce_after_cart_table' );
function function_woocommerce_after_cart_table() {
	echo ('<div class="woocommerce-info">woocommerce_after_cart_table</div>');
}

add_action( 'woocommerce_cart_collaterals', 'function_woocommerce_cart_collaterals' );
function function_woocommerce_cart_collaterals() {
	echo ('<div class="woocommerce-info">woocommerce_cart_collaterals</div>');
}

add_action( 'woocommerce_before_cart_totals', 'function_woocommerce_before_cart_totals' );
function function_woocommerce_before_cart_totals() {
	echo ('<div class="woocommerce-info">woocommerce_before_cart_total</div>s');
}

add_action( 'woocommerce_cart_totals_before_shipping', 'function_woocommerce_cart_totals_before_shipping' );
function function_woocommerce_cart_totals_before_shipping() {
	echo ('<div class="woocommerce-info">woocommerce_cart_totals_before_shipping</div>');
}

add_action( 'woocommerce_after_shipping_rate', 'function_woocommerce_after_shipping_rate' );
function function_woocommerce_after_shipping_rate() {
	echo ('<div class="woocommerce-info">woocommerce_after_shipping_rate</div>');
}

add_action( 'woocommerce_before_shipping_calculator', 'function_woocommerce_before_shipping_calculator' );
function function_woocommerce_before_shipping_calculator() {
	echo ('<div class="woocommerce-info">woocommerce_before_shipping_calculator</div>');
}

add_action( 'woocommerce_after_shipping_calculator', 'function_woocommerce_after_shipping_calculator' );
function function_woocommerce_after_shipping_calculator() {
	echo ('<div class="woocommerce-info">woocommerce_after_shipping_calculator</div>');
}

add_action( 'woocommerce_cart_totals_after_shipping', 'function_woocommerce_cart_totals_after_shipping' );
function function_woocommerce_cart_totals_after_shipping() {
	echo ('<div class="woocommerce-info">woocommerce_cart_totals_after_shipping</div>');
}

add_action( 'woocommerce_cart_totals_before_order_total', 'function_woocommerce_cart_totals_before_order_total' );
function function_woocommerce_cart_totals_before_order_total() {
	echo ('<div class="woocommerce-info">woocommerce_cart_totals_before_order_total</div>');
}

add_action( 'woocommerce_cart_totals_after_order_total', 'function_woocommerce_cart_totals_after_order_total' );
function function_woocommerce_cart_totals_after_order_total() {
	echo ('<div class="woocommerce-info">woocommerce_cart_totals_after_order_total</div>');
}

add_action( 'woocommerce_proceed_to_checkout', 'function_woocommerce_proceed_to_checkout' );
function function_woocommerce_proceed_to_checkout() {
	echo ('<div class="woocommerce-info">woocommerce_proceed_to_checkout</div>');
}

add_action( 'woocommerce_after_cart_totals', 'function_woocommerce_after_cart_totals' );
function function_woocommerce_after_cart_totals() {
	echo ('<div class="woocommerce-info">woocommerce_after_cart_totals</div>');
}

add_action( 'woocommerce_after_cart', 'function_woocommerce_after_cart' );
function function_woocommerce_after_cart() {
	echo ('<div class="woocommerce-info">woocommerce_after_cart</div>');
}

add_action( 'woocommerce_cart_is_empty', 'function_woocommerce_cart_is_empty' );
function function_woocommerce_cart_is_empty() {
	echo ('<div class="woocommerce-info">woocommerce_cart_is_empty</div>');
}
  • Al aplicar cualquiera de las anteriores funciones estamos añadiendo el nombre de cada hook en su posición dentro de la página de carrito de WooCommerce.

¡Así de simple y así de fácil! Ahora solo tienes que jugar con los distintos hooks que posee la página de carrito de WooCommerce para cambiar por completo la información que muestras en este punto del proceso de compra de tus usuarios.

Resumiendo…

Cómo ves, jugar con estos pequeños fragmentos de código o snippets te permite personalizar tu instalación de WooCommerce como prefieras. Para añadir información complementaria en la página de carrito no es necesario instalar ningún plugin, tan sólo debes hacer una modificación sencilla como la que hemos visto en el tutorial de hoy.

Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos la próxima semana, con un nuevo tutorial. Hasta entonces… ¡feliz semana! 😉

Author avatar
Ángel Martín
Ayudo a emprendedores y empresas a digitalizar su negocio y sus procesos optimizando sus costes.