Shortcodes de WooCommerce

En este tutorial veremos todos los shortcodes (códigos cortos) que WooCommerce trae por defecto, para qué sirven y cómo utilizarlos correctamente.

¿Qué son los shortcodes?

Por si no estáis familiarizado con los shortcodes, vamos a definirlos rápidamente. Un shortcode o código corto es simplemente una palabra entre corchetes, así:

• [palabra]

En ocasiones el shortcode puede tener una etiqueta de abertura y de cierre, de este estilo:

• [palabra] [/palabra]

Y en muchos casos también puede tener parámetros, así:

• [palabra parametro1="algo" parametro2="algo más"]

La magia de esta palabra entre corchetes es que sólo debes escribirla en el editor de WordPress, y cuando alguien la mira en la web, automáticamente se convierte en otro contenido. Una imagen, un texto, un producto, un post, un bucle... cualquier cosa.

Por ejemplo, si yo escribo "nvideos" entre corchetes en el editor, esto se convierte en el número de vídeos que hay en mis cursos, o sea 6905.

Si queréis saber más sobre los shortcodes, echad un vistazo a la lección Cómo crear tus propios shortcodes del curso de Curso creación de plugins para WordPress.

Así pues, vamos a ver qué shortcodes van de serie con WooCommerce, y en qué se "convierten" cuando alguien los ve en la web.

1. Shortcodes de las páginas de WooCommerce

Estos 4 shortcodes son un poco especiales, porque coinciden con las 4 páginas que crea WooCommerce durante su proceso de instalación. Estos shortcodes suelen ser la única cosa que hay en cada una de esas páginas:

• [woocommerce_cart] – Muestra la página "Carrito".
• [woocommerce_checkout] – Muestra la página de pago.
• [woocommerce_order_tracking] – Muestra el estado del pedido.
• [woocommerce_my_account] – Muestra la página "Mi Cuenta".

Como WooCommerce genera automáticamente estas páginas, lo más seguro es que no los tengamos que usar en la vida, pues una vez e ha establecido, no lo debemos tocar nunca más.

2. Shortcodes de productos de WooCommerce

Aunque WooCommerce ya tiene la página "tienda" en la que se muestran todos los productos, en algunas ocasiones queremos mostrar sólo ciertos productos en alguna página o entrada.

Empecemos por lo más fácil. Mostrar un producto en concreto, en cualquier página o entrada, con este shortcode:

• [product]

Podemos indicar el producto que queremos mostrar tanto por su "id" como por su "sku", por ejemplo:

• [product id="123"] - Producto con el "id" 123
• [product sku="ref.abc"] - Producto con la referencia ref.abc

Esto mostrará sólo el producto en sí, pero si queremos podemos mostrar toda la página entera del producto, con el siguiente shortcode:

• [product_page id="123"] - Página del producto con el "id" 123
• [product_page sku="ref.abc"] - Página del producto con la referencia ref.abc

Como veis, hasta el momento sólo hemos mostrado un producto, en singular. Pero también podemos mostrar un listado de productos. Para ello tenemos los siguientes shortcodes:

• [products ids="123, 124, 125"] - Listado de los 3 productos 123, 124 y 125.
• [recent_products] - Listado de los últimos productos.
• [featured_products] - Listado de productos destacados.
• [sale_products] - Listado de productos rebajados.
• [best_selling_products] - Listado de los productos más vendidos.
• [top_rated_products] - Listado de los productos mejor valorados.
• [related_products] - Listado de productos relacionados.

Aparte de los listados que nos propone WooCommerce, también podemos crear nuestros propios listados a partir de la clasificación que tenemos de categorías o atributos.

A nivel de categorías, podemos mostrar tanto los productos de una categoría, como las categorías en sí. Empecemos mostrando los productos de una categoría en concreto. Lo haremos con este shortcode:

• [product_category category="electrodomesticos"] - Listado de productos de la categoría "Electrodomésticos".

Y si lo que queremos mostrar es un listado de las categorías de productos que tenemos en la tienda, podemos hacerlo con este otro shortcode:

• [product_categories] - Listado de las categorías de la tienda.

Otra forma de clasificar y mostrar los productos es a través de los atributos. Lo conseguiremos a través de este shortcode:

• [product_attribute attribute='color' filter='negro'] - Listado de los productos de color negro

Todos los shortcodes de listados de productos tienen dos atributos muy interesante llamados "orderby" y "order":

• El atributo "orderby" nos permite indicar el criterio con el que queremos ordenar los productos. Tenemos las siguientes opciones:
  • menu_order: El número que se ha elegido en la ficha de producto
  • title: El nombre del artículo, alfabéticamente
  • date: La fecha de publicación del producto
  • rand: Orden aleatorio
  • id: El identificador del producto
• El atributo "order" nos permite elegir entre ordenar de forma ascendente o descendente el criterio anterior.
  • asc: Orden ascendente
  • desc: Orden descendente

Vemos algunos ejemplos:

• [product_category category="ropa" orderby="date" order="asc"]: Mostrará los productos de la categoría "ropa" ordenados por fecha, desde los más antiguos a los mas nuevos.
• [best_selling_products orderby="rand"]: Mostrará los productos más vendidos en orden aleatorio.
• [recent_products orderby="title" order="desc"]: Mostrará los productos más recientes ordenados inversamente por su nombre.

3. Shortcodes de carrito

Finalmente, tenemos los shortcodes de carrito. Estos son muy interesantes, porque nos permiten crear el típico botón de "Añadir al carrito" para cualquier producto. Tenemos dos variaciones: Botón y URL.

• [add_to_cart id="123"] - Este shortcode mostrará un botón para añadir al carrito el producto 123, estemos dónde estemos.
• [add_to_cart_url id="123"] - Este shortcode mostrará una URL que si se visita, añadirá al carrito el producto 123.

Estos son estupendos para CTAs inline, ya que en cualquier artículo que escribamos de nuestro blog, podemos colocar un enlace que meta directamente cualquier producto en el carrito. Y eso es facilitar mucho el trabajo al cliente.

Resumen y conclusión

WooCommerce viene con una colección de shortcodes muy prácticos que nos permiten mostrar páginas, productos y botones de añadir al carrito allí donde queramos.

Gracias a estos shortcodes podemos incorporar productos dentro de nuestro contenido creado para inbound marketing, de forma que no los tendremos sólo en la tienda, sino que los podemos incorporar en toda nuestra web.

Si queréis saber más sobre las inline CTAs y el marketing de contenidos, echad un vistazo al Curso de Inbound Marketing. Si os suscribís tendréis acceso tanto a ese como al resto de cursos de marketing online.