Los shortcodes son esos códigos cortos que se ponen entre corchetes para que WordPress los sustituya automáticamente por algún contenido que el propio WordPress provee (como es el caso de, por ejemplo, [gallery], el shortcode para insertar una galería de imágenes) o bien que facilita un plugin. Como en el caso WooCommerce.
De hecho, WooCommerce incluye una buena cantidad de shortcodes que te permitirán hacer dos cosas: crear las páginas necesarias (si no lo has hecho con el asistente) o mostrar productos cómo y dónde quieras.
Todos ellos los vamos a ver en este artículo, junto con una explicación y ejemplos de uso de cada uno. Pero primero, ¡hagamos las cosas fáciles!
Tabla de contenidos
Los shortcodes de WooCommerce en el editor de WordPress
Y lo más fácil sería, por supuesto, poder insertar los shortcodes en el texto directamente utilizando el editor sin tener que recordarlos. Bueno, pues se puede.
De hecho hasta la versión 2.1 esta era una funcionalidad que venía con el propio WooCommerce, que al activarlo añadía un botón desplegable para incluir los shortcodes en la caja de texto. Sin embargo desde la versión 2.2 este botón dejó de incluirse con la instalación estándar de WooCommerce.
Pero aún se puede incluir aparte simplemente instalando el plugin WooCommerce Shortcodes, que hace precisamente eso: añadir al editor visual el botón que, si ya usabas WooCommerce antes de la versión 2.2 (aproximadamente septiembre de 2014), conocerás de sobra.
Gracias a ese botón desplegable puedes insertar un shortcode de WooCommerce directamente desde el editor visual de WordPress sin necesidad de recordarlos. Pero claro, eso no te libra de conocerlos, ya que si no difícilmente podrás saber cuál necesitas o cuál de ellos buscas.
Así que vamos a repasarlos.
Shortcodes en WooCommerce
WooCommerce incluye shortcodes de tres tipos: unos un poco especiales (cuatro concretamente), que sirven para «construir» las páginas que necesita la tienda para funcionar, otros dos que sirven para mostrar llamadas a la acción y el resto que sirven para mostrar productos o selecciones de productos.
Vamos a verlos todos ellos, junto con ejemplos de uso de cada uno.
Shortcodes de las páginas de WooCommerce
Como decía más arriba, se trata de cuatro shortcodes especiales que se utilizan para crear las páginas que necesita la tienda para funcionar.
Normalmente, cuando se utiliza el asistente de instalación de WooCommerce, lo hace él sólo automáticamente, pero si no ejecutamos el asistente lo deberemos hacer de forma manual.
Estos shortcodes son:
[woocommerce_cart]
[woocommerce_checkout]
[woocommerce_order_tracking]
[woocommerce_my_account]
Cuya función es, respectivamente:
- Muestra la página del carrito
- Muestra la página de pedido y pago
- Muestra el formulario de seguimiento del estado del pedido
- Muestra la página de «Mi cuenta»
Cada uno de estos shortcodes debe ir solo en una página individual, sin ningún otro contenido aparte del shortcode correspondiente.
De los cuatro, sólo uno de ellos acepta argumentos, y es el de [woocommerce_my_account] que crea la página «Mi cuenta», donde aparecen los últimos pedidos realizados por el cliente. Pues bien, si no se especifica nada WooCommerce mostrará los últimos quince pedidos, pero la cantidad se puede especificar en el shortcode con el argumento order_count. Por ejemplo:
[woocommerce_my_account order_count=»10″]
Esto mostrará en la página de «Mi cuenta» los diez últimos pedidos del cliente, en lugar de los quince por defecto. Si quieres que muestre todos los pedidos que haya realizado el cliente sin límite de número, hay que darle a order_count el valor -1:
[woocommerce_my_account order_count=»-1″]
Shortcodes de WooCommerce para llamadas a la acción
Ahora vienen un par de shortcodes que tampoco son habituales, y que nos vendrán bien para algunos casos muy concretos, ya que sirven para permitir al cliente enviar productos al carrito de una forma algo distinta a la habitual. Son los siguientes:
[add_to_cart]
[add_to_cart_url]
Estos shortcodes muestran en pantalla, respectivamente, el botón para añadir al carrito un producto concreto y la URL necesaria para crear un enlace que haga eso mismo. Por supuesto, puestos así como están ahí arriba no hacen nada, ya que hay que indicar para qué producto son. Se puede hacer mediante los atributos id (indicando el ID del producto) o sku (si lo que indicas es el SKU, es decir, la referencia).
Lo vas a ver mucho más claro con un par de ejemplos:
[add_to_cart id=»155″]
Eso mostraría en pantalla un botón para añadir al carrito el producto con ID 155. En este cortísimo vídeo (2 minutos) puedes ver las diferentes formas de averiguar el ID de un producto:
Así, el anterior shortcode mostrará en pantalla un botón para añadir al carrito el producto con ID 155… siempre que sea un producto simple, claro está. Si es un producto variable aparecerá algo así:
Con el precio de la variedad más barata y un botón invitando al cliente a elegir la variación que desea. De igual modo, si el producto es agrupado lo que aparecerá será algo parecido, con el rango de precios y el botón invitando a elegir tipos y cantidades:
Por otro lado, el otro shortcode admite también los mismos argumentos, id o sku. Por ejemplo:
[add_to_cart_url id=»42″]
Lo que generaría una URL que mandaría al producto con ID 42 al carrito. Por supuesto, esto no se puede usar así, en crudo, ya que en pantalla sólo se vería lo siguiente:
http://www.tutiendaonline.com/cart/?add-to-cart=42
Sin embargo es muy útil para construir enlaces del tipo pincha aquí para añadir al carrito el fabuloso producto del que te he estado hablando.
Ojo, porque sólo funciona para productos simples. Si enlazamos así un producto variable o uno agrupado el usuario no será dirigido al carrito con el producto en él, sino a la propia página de producto.
Shortcodes de WooCommerce para mostrar productos
Actualización: Desde WooCommerce 3.2 los shortcodes de productos quedan sustituidos por el nuevo shortcode products, más general. Tienes un tutorial completo sobre este shortcode, con todos los atributos y ejemplos de uso, en el siguiente artículo:
Y llegamos ya a los shortcodes más habituales y que más vamos a usar sin duda de WooCommerce: los shortcodes que sirven para mostrar productos o selecciones de productos. El más simple de todos es el que muestra un producto individual, utilizando los atributos id o sku:
[product id="155"]
Que mostraría algo así:
Como ves lo que se muestra es una simple previsualización del producto, con la miniatura de la imagen, el nombre y el precio, en la que se puede pinchar para ir a la ficha de producto. Pero también podemos ir un paso más allá e incluir, con un sólo shortcode, la ficha de producto:
[product_page id="155"]
Así convertimos cualquier página o entrada que queramos en la ficha de ese producto. Incluyendo descripción, precio, selector de variaciones (si es variable), botón de añadir al carrito, pestañas de información adicional y de comentarios... ¡La ficha de producto completa!
Hasta ahora hemos mostrado un sólo producto, pero también disponemos de un shortcode para mostrar varios productos, los que nosotros queramos. Por ejemplo:
[products ids="23,24,25,26"]
Que mostrará una sucesión de los cuatro productos:
O podemos mostrar todos los de una misma categoría de una forma muy sencilla:
[product_category category="categoria"]
Y, hablando de categorías, tenemos también (¿cómo no?) un shortcode para mostrar las categorías que tenemos en la tienda junto su miniatura y el número de productos incluidos en cada una de ellas:
[product_categories]
Por supuesto, también puedes elegir unas categorías determinadas (y en el orden que quieras), con un:
[product_categories ids="9,7,28,10"]
Por último, podemos mostrar una selección de productos a través de sus atributos. Por ejemplo:
[product_attribute attribute="color" filter="rojo"]
El resultado sería la visualización de todos los productos que tengan asignado el atributo "color" con el valor "rojo" entre sus variedades:
Además de todos estos, tenemos una serie de shortcodes que nos permiten mostrar grupos predefinidos de productos. Son los siguientes:
[recent_products]
[featured_products]
[sale_products]
[best_selling_products]
[top_rated_products]
[related_products]
Estos shortcodes mostrarían, respectivamente:
- Los últimos productos añadidos
- Los productos destacados
- Los productos rebajados
- Los más vendidos
- Los mejor valorados
- Los productos relacionados
Todos ellos (incluidos los que muestran los productos de una misma categoría o los productos según sus atributos) admiten modificadores que permiten variar el número de los artículos mostrados, su orden, su disposición en columnas, etcétera.
Como todo ello ya lo expliqué en este otro artículo a él te remito, ya que además complementa a este perfectamente. En él no sólo te enseño cómo funciona cada uno de esos modificadores, sino también algunos truquillos muy útiles a la hora de utilizarlos.
Conclusiones
Como ves WooCommerce nos permite un amplio abanico de posibilidades a la hora de mostrar los productos, al margen de la propia tienda gracias a los shortcodes. ¡Utilízalos! Si lo haces de forma original e inteligente puede ayudarte a conseguir más ventas.
Integra los productos con las entradas de tu blog, inserta selecciones de productos en lugares donde éstos sean relevantes, y verás como aumentas la venta de los mismos.
Y, como siempre, si tienes cualquier duda o consulta sobre este asunto o sobre cualquier otro tema relacionado con WordPress o con WooCommerce, estoy a tu disposición.
