Los shortcodes de Woocommerce y todo lo qué pueden hacer por tu tienda online

shortcode-productos-woocommerce

A pesar de ser una de las principales herramienta para crear tiendas online (no lo decimos nosotros, sino un estudio realizado por BuiltWith), poca gente conoce la utilidad de los shortcodes de Woocommerce.

¿Cómo? ¿Tú tampoco sabes de qué te hablamos? Pues te estás perdiendo un potencial increíble… 

¿Quieres descubrir cómo darle a tu tienda un plus de funcionalidades? ¿O cómo poner el botón de compra en el sitio que tú quieras? En general, ¿quieres saber todo lo que pueden hacer por ti?

Solo tienes que seguir leyendo.

¿Qué son los shortcodes de Woocommerce?

Antes de pasar a contarte todos los shortcodes de Woocommerce (o por lo menos los más utilizados), es importante que sepas en qué consisten.

Es muy sencillo de entender, ya verás. 😉

Un shortcode no es más que un «atajo» a nivel de código que puedes añadir en el editor de texto de Woocommerce.

Al incluirlo, lo que haces es ejecutar una función preestablecida de una manera ágil y sencilla, sin la necesidad de tener ningún tipo de conocimiento sobre programación.

La forma en que se utilizan es escribiendo una expresión (que cambiará en función de lo que quieres conseguir) entre corchetes ([]), quedando algo así:

[UnShortcodeCualquiera]

Bueno, eso es una versión muy simplificada ya que algunos de ellos permiten añadir parámetros. Pero eso lo veremos más adelante, no te preocupes.

Y si te estás preguntando «¿de verdad en el siglo en el que vivimos tengo que aprenderme una lista de shortcodes e introducirlos a mano?» la respuesta es sí y no.

Como es obvio puedes optar por el método manual pero, si buscas una manera más visual de tenerlos a tu alcance, puedes usar el plugin oficial.

woocommerce-shortcodes-plugin

Gracias a él, tendrás todos los atajos a golpe de ratón mientras escribes con el editor de toda la vida.

Todos los shortcodes de Woocommerce

Ahora sí, llega el momento de ver en profundidad qué pueden hacer por ti, y por tu tienda online, cada uno de estos atajos.

Tu tienda luce espectacular gracias al theme que usas y tarda muy poco en cargar, ahora vamos a darle una vuelta de tuerca más gracias a los shortcodes.

1. Shortcodes de página

Se trata de 4 atajos que no se suelen utilizar porque sus funcionalidades coinciden con las páginas que crea Woocoomerce durante el asistente de instalación.

De hecho, es bastante común que esas 4 páginas sean solo estos shortcodes:

  • [woocommerce_cart]: muestra en pantalla toda la interfaz del carrito de la compra, cupones y demás elementos.
  • [woocommerce_checkout]: imprime la página de pagos.
  • [woocommerce_my_account]: permite acceder al usuario a su panel de control.
  • [woocommerce_order_tracking]: para que tus clientes puedan hacer el seguimiento de su pedido.

El shortcode [woocommerce_my_account] muestra por defecto los últimos 15 pedidos que haya realizado, pero puedes modificarlo añadiendo el parámetro «order_count».

Por ejemplo, si quieres que solo aparezcan las 5 últimas compras, puedes escribir [woocommerce_my_account order_count=«5»].

Y si quieres que muestre todas, order_count debe ser igual a -1.

2. Shortcodes de productos

Llegamos por fin a donde está la «salsa» de todo esto. Aquí es donde la magia empieza a fluir y donde podrás hacer auténticas virguerías con tus productos.

Gracias a este tipo de atajo, puedes mostrar cualquiera de tus artículos haya donde quieras, solo con añadir [product].

Pero claro, ¿qué producto muestra? Para indicarlo, puedes utilizar el id o el sku (número de referencia). Para conocer el id, entra en el panel de Woocommerce y pincha en «Productos» dentro del menú de la izquierda.

Luego basta con pasar el ratón por encima para que aparezca el número de identificación.

shortcode-woocommerce-tienda

Así que, para mostrar el artículo de la imagen deberías escribir [product id=»243″].

Con este método aparecerá en pantalla:

  • Nombre.
  • Imagen.
  • Precio.
  • Botón de compra.

Pero a lo mejor tú quieres mostrar la página entera. Para ello debes utilizar [product_page id=»243″].

¿Quieres que se vean varios a la vez? Muy sencillo, solo tienes que añadir, entre las comillas y separado por comas, el resto de ids. Por ejemplo [product_page id=»243,123,321″].

Si lo que buscas es agrupar artículos, existen múltiples shortcodes de Woocommerce para hacerlo:

  • [best_selling_products]: para que aparezcan los productos más vendidos.
  • [featured_products]: una lista de destacados.
  • [recent_products]: los últimos productos añadidos.
  • [related_products]: muestra artículos relacionados.
  • [sale_products]: mercancía que ha sido rebajada.
  • [top_rated_products]: los artículos mejor valorados.

La mayoría de estos atajos permiten añadir parámetros para obtener de forma exacta lo que buscas:

  • Limit: para indicar el número máximo de artículos.
  • Columns: en cuántas columnas se dividirán.
  • Orderby: puedes ordenarlos por fecha, id, número elegido en la ficha, popularidad, aleatorio, valoración, título.
  • Order: para indicar si quieres que se organicen de forma ascendente o descendente.

Pero no termina aquí. También puedes mostrar tus productos agrupados en Woocommerce por categoría escribiendo: [product_category category=»loQueSea»].

Incluso existe la posibilidad de listar las propias categorías, todo gracias al shorcode: [product_categories].

Y a todo esto, súmale la posibilidad de filtrar tus artículos gracias a sus atributos.

Imagina que tienes una tienda de camisetas y en un lugar, solo quieres que aparezcan las de talla XL. Basta con que escribas [product_attribute attribute=»talla» filter=»XL»].

3. Shortocodes del carro

Si los atajos de antes resultan interesantes por todo lo que se puede conseguir con ellos, de los que te hablaremos a continuación no se quedan atrás, ya que son los encargados de mostrar el botón de comprar.

¿Y qué sería de tu tienda sin ese botón?

Para implementarlo tienes dos opciones:

  • [add_to_cart id=»321″]: para añadir al carro de la compra el producto con el id indicado (321 en este caso).
  • [add_to_cart_url id=»123″]: en este caso, muestra en pantalla la URL del producto en cuestión.

Y así es como puedes colocar un botón de compra en cualquier lado de tu página web.

Cómo usar los shortcodes de Woocommerce

Ahora que conoces la lista de todos los shortcodes para Woocommerce que hay disponibles, el siguiente paso es obvio: contarte las distintas formas que hay para usarlos.

Así siempre elegirás la mejor opción según lo que necesites.

1. Shortcodes con el editor clásico de WordPress

Este es el método que te hemos mostrado al principio del post y como has visto, consiste en escribir el shortcode dentro del texto de la página o post.

Que como método, está claro que es el más sencillo pero a la vez, si no lo haces bien tiene cierto riesgo.

Y es que Woocommerce ya crea páginas automáticas donde incluye los shortcodes más comunes y por tanto, si las modificas puedes hacer un estropicio bien gordo.

Así que nuestro consejo es que siempre que optes por este método, sea en una página o post creado desde cero.

2. Shortcodes en un constructor visual

Si usas Elementor, Thrive Builder, Gutenberg o cualquier otro constructor visual para diseñar las páginas de tu tienda online, estás de enhorabuena.

Y lo estás porque gracias a ellos, puedes colocar los shortcodes de Woocommerce justo en el lugar que desees:

  • En una columna.
  • Dentro de una tabla.
  • Junto a un elemento concreto.
  • Etc.

Además, el proceso sigue siendo muy sencillo porque lo único que tienes que hacer es añadir un módulo de texto personalizado y en él, escribir el shortcode que necesites.

Eso sí, recuerda que todo lo que crees con estas herramientas siguen siendo páginas o posts, así que hazlo con precaución.

3. Shortcodes en un widget

Los widgets en WordPress son la caña, porque te permiten mostrar lo que quieras (información, imágenes, enlaces…) en una parte concreta de tu web.

Y aunque Woocommerce instala widgets propios, la mejor manera de sacarles todo el provecho es creando los tuyos propios.

Para ello, el sistema es prácticamente idéntico al de los constructores visuales: añadir un widget de texto personalizado y en él, escribir el shortcode que quieras.

De esta manera, ya sea en la barra lateral, en el pie de página o cualquier otro lugar donde tu plantilla te permita, puedes colocar una funcionalidad de Woocommerce sin apenas esfuerzo.

Y hablando de este tema, tenemos un post donde te contamos los mejores widgets para WordPress.

4. Shortcodes con un plugin

Woocommerce no deja de ser WordPress con añadidos para una tienda online y por tanto, puedes instalarle plugins para aumentar sus funcionalidades.

Y desde luego, uno de los más cómodos es el que te permite acceder a todos sus shortcodes de forma visual.

Como imaginarás, en el repositorio oficial de WordPress hay unas cuantas opciones pero desde luego, para nosotros la mejor opción es el plugin oficial de Woocommerce.

Que es el que te indicamos en el apartado «qué son los shortcodes de Woocommerce».

¡Pero mucho cuidado! Te recordamos que cuantos más plugins instales, más posibilidades de que la velocidad de carga de tu web se vea afectada de forma negativa.

Así que si te apañas con el método «manual», mejor que mejor. 😉

Los shortcodes de Woocommerce, todo un mundo por descubrir

Hasta aquí el post sobre los shortcodes de Woocommerce. Como habrás visto, se trata de un tema bastante amplio pero puede llegar a resultar algo complejo.

Con esto queremos decir que hay muchas posibilidades de que nos hayamos dejado algo en el tintero. Si piensas que así es, nos encantaría que nos escribieses en los comentarios de más abajo.

¡Es la única manera de tener un post completo al 100%!

¿Qué nos dices? ¿Seguimos más abajo? 😉