WooCommerce: usar acciones para cambiar el diseño de la página de producto

Table of Contents

Los ganchos (hooks) y filtros son una característica de núcleo de WordPress y se utilizan ampliamente en WooCommerce. En este post explicaré cómo cambiar el diseño de la página de un producto cambiando el orden de ejecución de los hooks. Simple, pero poderoso.

WooCommerce usa plantillas para simplificar la personalización de los diseños de las distintas páginas por tema o por complementos. Además, gran parte de la funcionalidad de WooCommerce se puede controlar mediante el uso de ganchos y filtros. Los ganchos y filtros son una característica del núcleo de WordPress y mi característica favorita.

Plantilla de página de producto de WooCommerce

La página de producto (single product page) se ensambla mediante acciones. La página está formada por varios bloques pequeños combinados. La forma más sencilla de cambiar el diseño es cambiando el orden en que se ejecutan las acciones.

Los comentarios de código en la plantilla de página de producto enumeran las acciones adjuntas a los diversos ganchos y el orden en que se ejecutarán. Puede ver que la mayoría de ellos se agregan en wc-template-hooks.php.

Cambiar orden de ejecución de acciones

Para cambiar el orden de ejecución, primero debe desactivar todos las acciones con «remove_action()» y luego añadirlas con «add_action()» nuevamente con un número de prioridad diferente.

El siguiente código elimina todas las acciones (generando una página bastante vacía) y luego las agrega en un orden muy diferente. Primero se muestra el precio, seguido de la categoría y la información de la etiqueta, luego la descripción corta. Después añade el título y la sección de «Añadir al carrito». Es un diseño loco, pero es sólo para demostrar lo que se puede hacer.

Del mismo modo, podría borrar solamente algunos elementos con «remove_action()», por ejemplo, la acción «woocommerce_template_single_sharing» o incluso la descripción corta (a través de «woocommerce_template_single_excerpt»).