Cambiar el orden de los elementos en la ficha de producto de WooCommerce

PROBADO EN EL SITIO DE COMERCIAL NAHUEL

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.