fbpx

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

La página de finalizar compra en WooCommerce es el último paso de tu embudo de ventas… Aprende cómo personalizar la página de checkout en WooCommerce 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 checkout de WooCommerce jugando con sus hooks:

<?php

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

function martin_custom_checkout_woocommmerce() {
 	
    //remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
    //remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
 
    //remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
    //remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 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 checkout, 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_checkout_form', 'function_woocommerce_before_checkout_form' );
function function_woocommerce_before_checkout_form() {
	echo ('<div class="woocommerce-info">woocommerce_before_checkout_form</div>');
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

add_action( 'woocommerce_review_order_before_payment', 'function_woocommerce_review_order_before_payment' );
function function_woocommerce_review_order_before_payment() {
	echo ('<div class="woocommerce-info">woocommerce_review_order_before_payment</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 checkout 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 checkout de WooCommerce para cambiar por completo la información que muestras en este paso final en la 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 checkout 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.