fbpx

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

Si eres de los que no te conformas con tener un ecommerce igual a los demás, pero no quieres sacrificar el rendimiento de tu tienda online con un plugin… hoy vemos como personalizar la página de tienda en WooCommerce a través de un sencillo código. ¡Adelante! ¡A personalizar!

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

<?php

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

function martin_custom_shop_woocommmerce() {

    //remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
    //remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
 
    //remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    //remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
 
    //remove_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10 );
    //remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
    //remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
 
    //remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 ); 
 
    //remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 
    //remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
 
    //remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
 
    //remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
    //remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
 
    //remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
    //remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
 
    //remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
 
    //remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

}
  • 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 cambiar la posición de algún elemento, tendrás que hacer un replace, es decir, un remove_action seguido de un add_action, como en el siguiente ejemplo:
<?php

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

function martin_custom_shop_woocommmerce() {

    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 );

}
  • Al aplicar el código del ejemplo anterior, estamos eliminando el título del producto de su posición original, para darle a continuación la instrucción de cargarlo en el hook ‘woocommerce_before_shop_loop_item’.

¡Así de simple y así de fácil! Ahora solo tienes que empezar a experimentar con las distintas funciones de WooCommerce y sus hooks para cambiar por completo el aspecto de tu ecommerce.

Resumiendo…

A medida que vayas jugando con estos pequeños fragmentos de código o snippets, cada vez entenderás mejor como funciona WooCommerce y te permitirá liberar tu instalación de esos pesados plugins de personalización con cientos de opciones. Sobre todo, cuando lo que quieres es hacer una modificación sencilla como las que hemos visto en el tutorial de hoy. Para eliminar los precios de la página de tienda no es necesario instalar todo un plugin. Sólo tienes que insertar unas pocas líneas de código en tu plugin de funciones para hacerlo realidad

Poco a poco y una vez que tengas claro los distintos hooks de WooCommerce no querrás otra forma de trabajar con tu instalación de WooCommerce. De todas formas, 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.