Hooks y filtros: el sistema de personalización de WordPress
Los ganchos (hooks) y filtros son una de las características más potentes del núcleo de WordPress, y WooCommerce los usa de forma masiva. Entenderlos es la diferencia entre personalizar WooCommerce correctamente o acabar haciendo modificaciones directamente en los archivos del plugin — algo que se pierde con cada actualización.
Hay dos tipos: las acciones (add_action) que ejecutan código en un punto concreto, y los filtros (add_filter) que modifican datos antes de mostrarlos. En este artículo nos centramos en las acciones para modificar la página de producto.
Plantilla de página de producto de WooCommerce
La página de producto (single product page) de WooCommerce se ensambla mediante acciones. No es una plantilla monolítica — es una combinación de bloques pequeños que se ejecutan en un orden determinado. Puedes ver exactamente qué acciones hay y en qué orden en el archivo wc-template-hooks.php.
Cada bloque — el título, el precio, la descripción corta, el botón de añadir al carrito, las pestañas — es una acción que se ejecuta con una prioridad numérica. Cuanto menor es el número, antes se ejecuta.
✓ Regla de oro: nunca modifiques directamente los archivos de WooCommerce ni del tema para cambiar el diseño de la página de producto. Todo cambio debe hacerse mediante hooks en el archivo functions.php de tu tema hijo o en un plugin personalizado.
Cambiar el orden de ejecución de las acciones
Para reorganizar la página de producto, el proceso es siempre el mismo: primero eliminas la acción con remove_action() y luego la vuelves a añadir con add_action() con una prioridad diferente.
El siguiente ejemplo elimina todas las acciones estándar y las reordena completamente — primero el precio, luego la categoría, después la descripción corta, y por último el título y el botón de compra. Es un orden poco convencional, pero sirve para demostrar el control total que tienes:
// Eliminar todas las acciones estándar
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// Añadirlas en un orden diferente
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 15 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 25 );Este código va en el functions.php de tu tema hijo. Si no tienes tema hijo, crea uno antes de añadir cualquier personalización.
Eliminar elementos individuales
No siempre necesitas reordenar todo. A veces solo quieres eliminar un elemento concreto. Por ejemplo, para eliminar el botón de compartir en redes sociales o la descripción corta:
// Eliminar el botón de compartir
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
// Eliminar la descripción corta
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );⚠️ Atención con las prioridades: el número de prioridad en remove_action() debe ser exactamente el mismo que se usó en add_action(). Si no coincide, la acción no se eliminará y el código no funcionará. Consulta wc-template-hooks.php para ver las prioridades exactas de cada acción.
Referencia: acciones principales de la página de producto
Las acciones más usadas en woocommerce_single_product_summary y sus prioridades por defecto:
woocommerce_template_single_title— prioridad 5woocommerce_template_single_rating— prioridad 10woocommerce_template_single_price— prioridad 10woocommerce_template_single_excerpt— prioridad 20woocommerce_template_single_add_to_cart— prioridad 30woocommerce_template_single_meta— prioridad 40woocommerce_template_single_sharing— prioridad 50
¿Tu tienda WooCommerce necesita personalización o mantenimiento?
Llevo más de 20 años trabajando con WordPress y WooCommerce. Si necesitas modificaciones a medida o un mantenimiento profesional, cuéntame qué necesitas.
