En este artículo, y guía en vídeo, vamos a ver los shortcodes (códigos cortos) que podemos usar en nuestro WooCommerce ¡vamos a ello!

¿Qué es un shortcode?

Es un breve fragmento de texto que va entre corchetes y nos sirve para integrar un elemento externo.

WooCommerce nos permite mostrar en nuestra web una serie de elementos (productos, un carrito de compra, un proceso de compra…) nosotros, a través de la inserción de un shortcode en un lugar de nuestra web le estamos a diciendo a WooCommerce “muestra este elemento aquí”.

Por ejemplo, si yo quiero que en mi página “Tu cuenta” aparezca el sistema de cuenta de cliente que viene integrado en WooCommerce, simplemente iré a la página que me interesa e introduciré el shortcode, ese shortcode hará que mi web muestre ahí el módulo o sistema de cuenta de cliente, para este ejemplo el shortcode sería [woocommerce_my_account]

Veremos también como a otros les podremos incluir datos adicionales, para así tener más funciones, estos datos adicionales los llamaremos parámetros, seguirán el siguiente esquema:

[texto parametro1=”valor”]

Añadiendo esos datos o parámetros haremos que nuestro shortcode sea más específico.

Como ves, tienen un enorme potencial, podremos usarlos para muchísimas cosas.

¿Dónde inserto un shortcode?

Directamente en la misma página en la que quieres que se muestre, por ejemplo, yo puedo querer mostrar una categoría de productos de mi tienda al final de un artículo de mi blog ¿Cómo lo hacemos?

1.- Encontramos el shortcode adecuado

2.- Lo insertamos en la entrada desde el propio editor

Si vas a la entrada en la que quieres integrar este shortcode, verás que tienes la opción de insertarlo de una manera muy sencilla:

Pulsamos en el botón de añadir, dentro del editor de entradas

Buscamos “shortcode” y hacemos clic

Nos saldrá una ventana en la que podremos insertar nuestro shortcode

Los shortcodes son fragmentos de textos muy comunes, por lo que ten presente que siempre nos va a ser muy fácil integrarlos.

Si quisiéramos insertarlo en una página y no en una entrada simplemente tendremos que ir a nuestro editor e insertar un módulo con el texto del shortcode, normalmente los editores visuales tienen el módulo “shortcode” preparado para integrarlo, como ocurre en las entradas, pero si no lo vemos no pasa absolutamente nada, el Divi, por ejemplo podemos añadir un módulo “código”:

Y ahí poner nuestro shortcode, por lo que simplemente vamos a tener que buscar el elemento que nos permita poner en el texto en la página que nos interesa y WordPress se encargará de mostrarlo.

Una vez hemos visto qué es y cómo lo integramos, vamos a ver todos los que tenemos disponibles en WooCommerce.

Shortcodes de páginas

En WooCommerce tenemos varias páginas que son indispensables para que funcione correctamente, las páginas de carrito, checkout y de mi cuenta.

Estas páginas las genera WooCommerce en la instalación, en ellas lo único que hay es su shortcode correspondiente.

Nosotros, si tuvieramos cualquier problema, podemos generar estas páginas de forma muy sencilla, simplemente integraremos los shortcodes. Por ejemplo, si quiero que salga el módulo de “Tienda” puedo generar una página en mi web y en ella introducir el shortcode.

Los shortcodes de páginas son:

[woocommerce_cart] – Muestra la página de carrito

[woocommerce_checkout] – Muestra la página de checkout

[woocommerce_my_account] – Muestra la página de cuenta de usuario

[woocommerce_order_tracking] – Muestra el formulario de de seguimiento de pedido

Estas páginas las genera WooCommerce de forma automática, de tener cualquier problema con ellas puedes volver a generarlas, te dejo aquí un breve artículo sobre ello: Cómo crear las páginas por defecto de woocommerce.

Shortcodes de productos

A través de estos shortcodes podremos mostrar los productos que queramos en páginas y entradas.

IMPORTANTE: Desde hace algunas versiones atrás (desde la 3.6) tenemos disponibles módulos de woocommerce para introducir en nuestras entradas de blog, simplemente pulsamos en el botón de “añadir un bloque” en el editor de entradas:

Pulsamos sobre “Ver todos”

Y en la nueva ventana que nos aparece podemos hacer scroll y ver todas las secciones de woocommerce que podemos integrar

También podemos poner en el buscador que nos aparece la palabra “woocommerce” y veremos todos los bloques disponibles.

Como vemos tenemos  un montón de opciones ya preparadas para integrar en nuestras entradas.

Para otras secciones de la web, como páginas, usaremos los shortcodes.

Shortcode de un producto concreto

El shortcode es [product]

Para especificar el shortcode que nos interesa podemos definirlo con su id o su sku

El id de cualquier producto lo podemos ver fácilmente desde la pestaña productos, y el sku lo podremos definir de cualquiera de los productos editando su ficha.

El shortcode añadiendo el dato identificativo que más nos interese quedaría así:

[product id="92"]

[product sku="u31"]

Con estos shortcodes veríamos el producto como tal

Podemos añadir otro elemento más al shortcode para lograr que se muestre la página completa de producto

[product_page id="92"]

Logrando así que se muestre una página de producto como tal 

Shortcodes de varios productos

Indudablemente tenemos la opción de mostrar varios productos.

Si queremos mostrar varios productos concretos podemos hacer lo siguiente:

[products ids="92, 104, 105"]

Añadimos la “s” final a los dos términos y separamos por comas las ids.

WooCommerce nos permite mostrar listados de productos predeterminados, estos son:

[best_selling_products] - Productos más vendidos.

[featured_products] - Productos destacados.

[sale_products] - Productos que tenemos en rebajas.

[top_rated_products] - Listado de los productos mejor valorados.

[related_products] - Listado de productos relacionados.

[recent_products] - Últimos productos añadidos.

Shortcodes de categorías

Además de mostrar y filtrar productos, podemos trabajar con nuestras categorías.

Mostrar productos por categorías:

[product_category category="camisetas"]

Mostrar un listado de nuestras categorías:

[product_categories]

Ordenar los productos que se muestran

Podemos dar a nuestra selección de productos el orden que queramos, vamos a elegir el criterio de ordenación y si será una ordenación ascendente o descendente.

El criterio de ordenación de ordenación será el atributo “orderby” y tenemos las siguientes opciones disponibles:

date – La fecha de publicación del producto.

id – La ID del producto

menu_order – El número elegido en la ficha del producto.

popularity – El número de compras realizadas

rating – Según la puntuación en las valoraciones

title – El título del producto.

rand – Aleatorio (puede dar problemas en algunas webs por el sistema de cacheado).

Mediante el atributo “order” elegiremos si queremos un orden ascendente o descendente.

asc – Orden ascendente

desc – Orden descendente

Lo vemos con un ejemplo:

Quiero mostrar la categoría “camisetas” en orden ascendente según su fecha de publicación

[product_category category="camisetas" orderby="date" order="asc"]

Personalizar cómo se muestran los productos

Podemos definir el número de productos a mostrar así como el número de columnas.

limit – número de productos

columns – número de columnas

Por ejemplo, si solo quisiera mostrar 4 productos a dos columnas en el ejemplo anterior:

[product_category limit="4" columns="2" category="camisetas" orderby="date" order="asc"]

Shortcodes de carrito

Con estos shortcodes podremos añadir el botón de “añadir al carrito” en cualquier lugar de nuestra web.

[add_to_cart id="92"] – Mostrará el botón de “añadir al carrito”

Conclusiones

Los shortcodes nos pueden ser súper útiles para nuestras tiendas online, espero que con este artículo tengas todo un poquito más claro.

Te he mostrado los shortcodes más habituales, hay más opciones disponibles de personalización, si quieres conocerlas todas te dejo por aquí el link a la documentación oficial:

Documentación oficial de shortcodes en WooCommerce

Muchas gracias por pasarte por aquí.

Nos leemos pronto.