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

¿Qué son los shortcodes?

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 estos códigos 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, etc.

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_cartx] – Muestra la página “Carrito”.
  • [woocommerce_checkoutx] – Muestra la página de pago.
  • [woocommerce_order_trackingx] – Muestra el estado del pedido.
  • [woocommerce_my_accountx] – 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 se 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:

  • [productx]

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

  • [xproduct id=”123″x] – Producto con el “id” 123
  • [xproduct sku=”ref.abc”x] – 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:

  • [xproduct_page id=”123″x] – Página del producto con el “id” 123
  • [xproduct_page sku=”ref.abc”x] – 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:

  • [xproducts ids=”123, 124, 125″x] – Listado de los 3 productos 123, 124 y 125.
  • [xrecent_productsx] – Listado de los últimos productos.
  • [xfeatured_productsx] – Listado de productos destacados.
  • [xsale_productsx] – Listado de productos rebajados.
  • [xbest_selling_productsx] – Listado de los productos más vendidos.
  • [xtop_rated_productsx] – Listado de los productos mejor valorados.
  • [xrelated_productsx] – 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:

  • [xproduct_category category=”electrodomesticos”x] – 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:

  • [xproduct_categoriesx] – 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:

  • [xproduct_attribute attribute=’color’ filter=’negro’x] – 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:

  • [xproduct_category category=”ropa” orderby=”date” order=”asc”x]: Mostrará los productos de la categoría “ropa” ordenados por fecha, desde los más antiguos a los mas nuevos.
  • [xbest_selling_products orderby=”rand”x]: Mostrará los productos más vendidos en orden aleatorio.
  • [xrecent_products orderby=”title” order=”desc”x]: 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.

  • [xadd_to_cart id=”123″x] – Este shortcode mostrará un botón para añadir al carrito el producto 123, estemos dónde estemos.
  • [xadd_to_cart_url id=”123″x] – 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.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *