Cambiar el orden de los elementos en la ficha de producto de WooCommerce
Sigo con la serie de códigos útiles para Woocommerce, me están saliendo en un proyecto con el que estoy actualmente y así no me olvido de ellos para otras ocasiones.
Esta vez explicaré cómo cambiar los elementos del hook que se encarga de llamar a las funciones de WooCommerce como «Mostrar título», «Precio», «Metas», «Añadir al carrito» o «Mostrar el extracto».
Lo primero que tenemos que entender es lo que es un hook. Un hook o gancho, es una función de WordPress donde podemos «enganchar» llamadas a otras funciones. Como ejemplos de hooks, están la cabecera, el footer, el contenido, etc.
En este caso, WooCommerce utiliza el hook «woocommerce_single_product_summary», donde «engancha» funciones como «woocommerce_template_single_title», «woocommerce_template_single_price» o «woocommerce_template_single_add_to_cart».
El sistema de pesos en WordPress
Para entender cómo organiza estos contenidos, lo explicaré como si de pesos se tratara. Digamos que en programación hay varias formas de dar más relevancia o menos a elementos no organizables; una de las más utilizadas es el sistema de pesos (no confundir con el dinero jeje).
Este sistema funciona asignando un número (generalmente entero) al elemento a organizar y estableciendo un orden de prioridad (en este caso un número menor significa más prioridad).
Lo que conseguimos con esto, es organizar los elementos del producto en base a números, siendo 0 el de más prioridad y 50 el de menos; es decir, el que lleve el peso cero se mostrará encima del que lleve un peso mayor.
Sigamos con WooCommerce:
Este sistema de pesos es utilizado también por el hook que nos ocupa, teniendo por defecto los siguientes pesos:
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/ |
¿Qué significan estos pesos?
Estos pesos significan que los elementos «Título», «Precio», «Extracto», «Añadir al carrito», «Metas» y «Compartir» se van a mostrar en ese orden. Fíjate que los pesos son el número que tienen a la derecha (5, 10, 20, 30, 40 y 50).
Por lo tanto, el orden en que mostrará los elementos es:
- Título
- Precio
- Extracto
- Añadir al carrito
- Metas
- Compartir
Cambiar el orden de los elementos en la ficha de producto de WooCommerce
Si queremos cambiar el orden de aparición de estos elementos que conforman nuestra ficha de producto, deberemos decirle al hook qué acciones debe realizar; en este ejemplo, quitarle el peso actual al carrito para asignarle uno nuevo:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 ); |
Tras añadir esto al fichero functions.php de nuestro tema, el orden de los elementos será:
- Título
- Precio
- Añadir al carrito
- Extracto
- Metas
- Compartir
Fíjate en que el Añadir al carrito ha cambiado de posición.
¿Esto siempre funciona así?
No, depende del tema que estés utilizando es posible que hayan sobreescrito esta funcionalidad, introduciendo a mano las funciones que llaman al título, carrito y demás del producto. Pero esto es un problema para otro artículo.
Hola!!
Una pregunta. Esto que escribes se refiere para cambiar el orden de estos elementos dentro de una ficha de producto concreta, por ejemplo «producto 1», o se refiere a cambiar el orden en la lista de varias fichas de productos. Por ejemplo, cuando consultas los productos de una categoría y te salen todos los que pertenecen.
Lo que yo quiero es añadir taxomías personalizadas a la vista de una «lista de productos». Y además que también se vean cuando se consulte una ficha de producto en concreto.
Es eso posible?
Hola Alejandro, se refiere a cambiar el orden de los elementos en todas las fichas de producto, independientemente de la categoría y demás.
hola, muchas gracias por este tutorial, muy explicativo. lo único que me falta es ver en qué fichero puedo encontrar esos hooks, para tal como dices modificar el orden.
Muchas gracias
Lo que comento en la entrada, en functions.php metes el código.
Muchas gracias por estos códigos
Muchísimas gracias Darío, me ha resultado muy útil :-)