WooCommerce Snippet: Cambiar el orden en la página de producto

WooCommerce Snippet- Cambiar el orden en la página de producto

Me han llegado varios correos pidiéndome más Snippets, sobre todo para WooCommerce. Pues bien, aquí tenéis: WooCommerce Snippet: Cambiar el orden en la página de producto.

¿Qué vamos a hacer?

En primer lugar vamos a ver cómo se ordenan las cosas en WordPress.

Luego vamos a ver cómo están ordenadas en la página de producto de WooCommerce.

También veremos cómo podemos cambiar el orden.

Y por supuesto haremos una prueba de todo esto.

Espero que os guste, vamos allá!

Cómo ordena WordPress las cosas

Supongo que alguno ya sabrá algo acerca de los hooks. De los actions y los filters pero bueno, para no complicarlo ni enrollarme demasiado comentaré que WordPress distribuye hooks (ganchos) y de un modo sencillo lo podemos entender mejor como si fueran lugares o sitios.

Si, ya se que no es lo mismo pero creo que es más fácil de entender para alguien que no ha tomado contacto con esto si lo hacemos así.

Pongamos el ejemplo con el que vamos a probar en este tutorial: «woocommerce_single_product_summary«.

Los nombres de los hooks suelen ser bastante descriptivos por lo que de éste podríamos entender algo como «woocommerce«, «single product» y «summary«. Que si lo intentamos llevar a nuestro terrenos podríamos decir algo como: «woocommerce resumen de producto individual» y si le damos una vuelta si que podríamos saber que se refiere al resumen o sumario de la página de producto de WooCommerce.

Para que nos entendamos:

sumario de la pagina de producto de woocomerce 01

A eso se refiere el hook que acabo de comentar. A este sitio dentro de la página de producto.

El orden de las cosas en la página de producto

Después de comentar sobre qué hook o lugar vamos a enfocar este tutorial, vamos a ver qué orden tienen por defecto estas «cosas» en la página de producto.

Por defecto nos hacemos a la idea de la siguiente lista:

woocommerce_template_single_title - 5
woocommerce_template_single_price - 10
woocommerce_template_single_excerpt - 20
woocommerce_template_single_add_to_cart - 30
woocommerce_template_single_meta - 40
woocommerce_template_single_sharing - 50

En la lista anterior podemos ver los diferentes elementos que componen o podrían componer la región a la que nos referimos. Digo que podrían porque es posible que no aparezcan todos o que incluso añadamos alguno que no está en esta lista.

El número que aparece a la derecha de cada uno indica la prioridad del mismo. Por lo tanto entendemos que los de número menor están más arriba es decir, que tienen más prioridad.

Nos quedamos con esto último porque lo podremos en práctica dentro de un momento.

Cómo cambiar el orden

Como acabamos de ver, la prioridad se gestiona a través de un número entero que, cuanto más pequeño es, más prioridad tendrá sobre los demás en el sitio o hook en cuestión.

Teniendo esto claro, podemos decirle a WordPress que modifique el orden de las cosas indicándole el número de prioridad para poner antes o después de otro elemento que queramos.

Por ejemplo, si nos fijamos en la lista anterior, el precio tiene un número menor que el correspondiente a «Añadir al carrito«.

woocommerce_template_single_price - 10
woocommerce_template_single_add_to_cart - 30

Si queremos que el precio aparezca después del botón de añadir al carrito deberíamos asignarle al primero, un número superior a 30.

Tengo que decir que la lista que he puesto anteriormente es mas bien para hacernos una idea y no tiene por que se exacta. Además, es posible que WooCommerce modifique estos números o prioridades en diferentes versiones.

A continuación vamos a hacer un par de pruebas para cambiar cosas de prioridad y por consiguiente, de ubicación.

Cambiando el orden

Si, vamos a hacer esto rápido. Vamos a cambiar el orden de lo que hemos comentado en el apartado anterior pero antes veamos como están estos elementos sin haber realizado ningún cambio:

woocommerce cambiar sitio precio 01

Vemos que el precio está situado justo después de las estrellitas de opinión de los clientes.

Pues bien, en un sólo paso vamos a quitarlo de ahí y ponerlo después del botón de «Añadir al carrito«:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 35 );

Con este sencillo cambio observamos que:

woocommerce cambiar sitio precio 02

El precio ahora aparece debajo del botón de «Añadir al carrito«.

Si no añadimos la línea que quita o elimina el precio de su sitio, nos sucederá esto:

woocommerce cambiar sitio precio 03

Aparecería en los dos sitios por lo que además de indicarle la nueva ubicación, debemos indicarle que quite la que ya está.

Recapitulando…

Recordamos que hemos visto cómo ordena WordPress los diferentes elemento y cómo podemos modificarlos a través de hooks o ganchos.

Os recuerdo que podéis incluir este y otros snippets de código en vuestro fichero «functions.php» del tema que estáis utilizando o también podéis hacer un plugin específico para ello.

Espero que os haya gustado este tutorial y que si tenéis alguna duda me la hagáis llegar o comentéis aquí mismo.

Saludos y mucho ánimo!

WooCommerce Snippet: Cambiar el título de las pestañas de producto

WooCommerce Snippet- Cambiar el título de las pestañas de producto

En un tutorial anterior vimos cómo ordenar las pestañas de la página de producto.

Continuando con «las pestañas» de la página de producto, en esta ocasión vamos a ver cómo podemos modificar o cambiar el texto del título de estas pestañas.

Como sabemos, WooCommerce establece por defecto «Comentarios» y «Descripción» a las dos pestañas que se activan con la instalación de este plugin.

Pues bien, nosotros/as por lo que sea, queremos modificar este título o texto de las pestañas a nuestro gusto por un título que nos atraiga más o con convenga más dependiendo de nuestras necesidades.

A continuación podemos ver una imagen en la que en la parte izquierda (Antes) los títulos de las pestañas son: «Comentarios» y «Descripción«.

En la parte derecha de la imagen hemos cambiado los títulos de estas pestañas por: «Valoraciones» e «Información«.

wc snippet cambiar titulo pestañas productos

Vamos a ver cómo hacer esto de una manera muy sencilla.

En primer lugar tenemos que utilizar un filter hook que en este caso será  «woocommerce_product_tabs«. Su propio nombre nos dice sobre qué elemento o elementos va actuar este hook, ¿verdad?

Pues bien, como siempre a la hora de trabajar con hooks, especificaremos una función que crearemos expresamente para que realice los cambios que queramos que en este caso es modificar los títulos de las pestañas.

Como digo, en primer lugar indicamos el hook con la función:

add_filter( 'woocommerce_product_tabs', 'oaf_wc_change_product_tabs_titles', 20 );

Muy bien, ahora vamos a crear la función «oaf_wc_change_product_tabs_titltes‘:

function oaf_wc_change_product_tabs_titles($tabs) {
 return $tabs;
}

Por el momento creamos la función e indicamos que recibe «$tabs«, que serán las pestañas con las que vamos a trabajar y que también devuelve el valor de $tabs una vez que hayamos modificado lo que nos interesa.

Ahora bien, como ya comenté en otro tutorial, $tabs es un array donde tenemos a nuestra disposición todas las pestañas con sus propiedades y valores. Lo que tenemos que hacer es identificar y seleccionar cada pestaña que nos interese y establecer la propiedad ‘title’ con el valor que queremos.

$tabs['pestaña']['title'] = 'Nuevo título';

Siguiendo la estructura anterior, para establecer el título «Información» en la pestaña «Descripción» (description), haremos lo siguiente:

$tabs['description']['title'] = 'Información';

Fácil, ¿verdad?

Y ahora para establecer el título «Valoraciones» en la pestaña «Comentarios» (reviews) haremos lo siguiente:

$tabs['reviews']['title'] = 'Valoraciones';

Ahora ya tenemos todo lo necesario.

A continuación tenéis el código completo de este Snippet:

Como siempre, este código lo podéis incluir directamente en el fichero «functions.php» de vuestro theme o crear un plugin.

Espero que os sea de utilidad.

Cualquier duda que tengáis sobre éste o cualquier otra cosa relacionada con los temas que trato en este blog, me la podéis hacer llegar a través del formulario de contacto o a través de las redes sociales.

Saludos y hasta la próxima!!

Ir al contenido