Shortcodes en Woocommerce: Qué son y cómo utilizarlos

Si llevas un tiempo trabajando con WordPress o WooCommerce, es probable que en algún momento hayas visto algo como [woocommerce_cart] o [products limit=»4″] en el contenido de una página y te hayas preguntado qué es eso exactamente, si lo puedes tocar o si es mejor dejarlo como está.

Eso es un shortcode. Y entender qué son, cómo funcionan y cuándo usarlos es algo que tarde o temprano necesitas saber si gestionas una tienda en WooCommerce, porque están en las páginas más importantes de tu tienda, como el carrito, el checkout o el área de cliente.

El problema es que si no tienes conocimientos técnicos pueden parecer intimidantes. Ves ese código entre corchetes y no sabes para lo que sirve, pensando que si lo tocas algo va a dejar de funcionar(y es probable). Y si tienes algo más de experiencia, puede que los hayas estado usando sin entender del todo qué opciones tienes disponibles o cómo sacarles más partido.

Es por eso que en este artículo vas a encontrar todos los shortcodes que incluye WooCommerce por defecto, explicados de forma clara: qué hace cada uno, cuándo tiene sentido usarlo, qué atributos puedes añadirle para personalizarlo y qué errores conviene evitar. Tanto si los conocías ya de antes como si no, este artículo merece la pena estudiarlo.

Al final del artículo también te cuento algo importante: por qué los shortcodes están perdiendo protagonismo desde la llegada de los bloques de Gutenberg, qué significa eso para tu tienda y si realmente merece la pena aprenderlos hoy en día.

¿Qué es un shortcode y cómo funciona?

Un shortcode es un atajo de código. Una pequeña etiqueta entre corchetes que, al colocarla en el contenido de una página o entrada de WordPress, ejecuta automáticamente una función y muestra el resultado en su lugar.

En lugar de tener que escribir decenas de líneas de código para mostrar, por ejemplo, el formulario de finalización de compra, simplemente escribes [woocommerce_checkout] en el contenido de esa página y WooCommerce hace todo el trabajo por ti. Sin programar, sin tocar archivos del servidor, sin complicaciones.

Los shortcodes no son algo exclusivo de WooCommerce, llevan en WordPress desde la versión 2.5 y los utilizan miles de plugins para añadir funcionalidades de forma sencilla. Lo que sí es específico de WooCommerce es el conjunto de shortcodes propios que incluye para gestionar las partes más importantes de tu tienda.

¿Cómo se usa un shortcode en WooCommerce?

Actualmente existen dos formas que dependen del editor que estés usando en tu WordPress:

Si usas el editor de bloques de Gutenberg, tienes que añadir un bloque de tipo «Shortcode», que encontrarás buscándolo por ese nombre en el buscador de bloques. Una vez añadido, simplemente pegas el shortcode dentro y ya está:

Si usas el editor clásico, puedes pegarlo directamente en el contenido de la página o entrada, en la pestaña de texto o visual, y funcionará igualmente:

Al añadir estos shortcodes se mostrará su contenido en la parte visible de la página, puedes hacer una preview de prueba para ver cómo se queda. Ahora que ya sabes su uso y como implementarlo en los editores de WordPress aun queda una cuestión más antes de que te enseñe todos los que hay.

¿Qué son los atributos de un shortcode?

Algunos shortcodes funcionan solos, como el que te he mostrado antes [woocommerce_cart], que simplemente muestra el carrito sin necesidad de configurar nada más. Pero otros admiten atributos, que son parámetros adicionales que puedes añadir para personalizar el resultado que se muestra.

Los atributos se escriben dentro del mismo shortcode, después del nombre y antes del corchete de cierre, con el formato atributo=»valor». Por ejemplo:

[products limit=»4″ orderby=»popularity» columns=»3″]

En este caso limit, orderby y columns son atributos que le indican a WooCommerce cuántos productos mostrar(4), en qué orden(popularidad) y en cuántas columnas(3). Cada shortcode tiene sus propios atributos disponibles, que te iré explicando uno a uno a lo largo del artículo.

Por último, y no menos importante, los atributos siempre van con el valor entre comillas, y el orden en que los escribas no importa. Puedes ponerlos en el orden que quieras y el resultado será el mismo.

Shortcodes de páginas principales

Cuando instalas WooCommerce por primera vez, el plugin crea automáticamente algunas páginas esenciales para el funcionamiento de tu tienda: el carrito, el checkout, mi cuenta y tienda. Estas páginas, (menos la tienda) funcionan porque llevan dentro un shortcode que WooCommerce coloca automáticamente al crearlas.

Esto tiene una implicación práctica importante ya que si alguna vez eliminas una de esas páginas por error, la duplicas o la recreas desde cero, necesitarás saber qué shortcode poner dentro para que vuelva a funcionar correctamente. Y si algún cliente te dice que el carrito aparece en blanco o que no puede llegar al checkout, lo primero que debes comprobar es que estas páginas tienen su shortcode correspondiente.

Shortcode de Carrito

[woocommerce_cart]

Muestra la página del carrito completa: los productos que el cliente ha añadido, las cantidades, el resumen del precio, el campo para introducir cupones de descuento y el botón para proceder al pago. Todos los elementos que te muestro en la imagen es gracias a ese shortcode:

Por lo tanto, sin este shortcode la página del carrito existirá en WordPress pero aparecerá completamente en blanco. WooCommerce no sabe que esa página tiene que mostrar el carrito a menos que se lo indiques con este shortcode, aunque parezca una tontería muchos clientes se pensaban que por poner en el título carrito se iba a mostrar…

Como ya he comentado, no admite atributos adicionales, simplemente se coloca en el contenido de la página y hace su función.

Shortcode de Finalizar Compra

[woocommerce_checkout]

Muestra el formulario de finalización de compra o checkout. Este muestra los campos de dirección de envío y facturación, el resumen del pedido, los métodos de pago disponibles y el botón de confirmar compra.

Es una de las páginas más importante, si el formulario de finalizar compra aparece en blanco o no funciona correctamente, lo primero que tienes que revisar es que esta página existe, que está correctamente asignada en los ajustes de WooCommerce, es decir, desde WooCommerce > Ajustes > Avanzado > Instalación de páginas, y que tiene este shortcode en su contenido. Si te pierdes en la asignación de páginas, revisa el artículo de ajustes de WooCommerce.

Por otro lado, como te comenté al principio del artículo, existe un bloque de checkout que es mucho mejor que el shortcode. Quizá recuerdes el post donde te expliqué en qué consiste y cómo vender más con el checkout de WooCommerce.

Shortcode de Mi Cuenta

[woocommerce_my_account]

Muestra el área privada del cliente, donde puede consultar sus pedidos, gestionar sus direcciones de envío y facturación, cambiar su contraseña, ver sus descargas si ha comprado productos digitales y gestionar sus métodos de pago guardados.

Si permites que los clientes se registren en tu tienda, esta página tiene que existir y tener este shortcode. Sin ella, el cliente no tendría forma de acceder a su cuenta después de registrarse.

Shortcode de Seguimiento del pedido

[woocommerce_order_tracking]

Muestra un formulario donde el cliente puede consultar el estado de su pedido introduciendo el número de pedido y el email con el que compró. No necesita estar registrado para usarlo, lo que lo hace especialmente útil para tiendas que permiten comprar como invitado.

A diferencia de los tres anteriores, esta no es una página que WooCommerce cree automáticamente al instalarse. Es posible que te haya sorprendido, ya que incluso muchos implementadores desconocen esta página y es muy útil para calmar un poco al cliente y darle confianza mientras llega el pedido. Así que si quieres reducir las consultas de soporte del tipo ¿dónde está mi pedido?, porque le das al cliente una forma de consultarlo por sí mismo sin necesidad de contactarte.

Si quieres tenerla en tu tienda tendrás que crear la página manualmente, añadir este shortcode en su contenido y enlazarla desde donde consideres, ya sea en el menú, en el footer o en el email de confirmación de pedido.

Shortcodes de productos

Este grupo te lo he puesto en otra sección ya que se puede personalizar mucho más. Te permite mostrar productos en cualquier página o entrada de tu web, con muchas opciones de filtrado y personalización. Son especialmente útiles si quieres crear páginas de aterrizaje con productos destacados, secciones de novedades en tu blog o cualquier sitio donde quieras mostrar productos fuera del catálogo habitual de la tienda.

Es el shortcode más completo y flexible de WooCommerce. Desde la versión 3.2 reemplaza a varios shortcodes más antiguos como [featured_products], [sale_products], [best_selling_products], [recent_products] o [top_rated_products]. Si en algún artículo o tutorial antiguo ves alguno de esos, tienes que saber que ahora todo se hace con [products] y sus atributos.

Por sí solo muestra un listado de productos, pero lo realmente interesante es la cantidad de atributos que puedes combinar para filtrar y personalizar exactamente qué se muestra y cómo. Los vemos agrupados por función:

Shortcode de catálogo de productos

[products]

Si lo pones por sí solo muestra un listado de productos, pero lo realmente interesante son los atributos que puedes añadirle para filtrar y personalizar exactamente qué se muestra y cómo. Te los enseño:

• limit controla cuántos productos se muestran. [products limit=»8″] muestra 8 productos. Si pones -1 los muestra todos sin límite, aunque esto no es recomendable si tienes un catálogo grande porque puede afectar al rendimiento de la página.
• columns define en cuántas columnas se organizan los productos. [products limit=»8″ columns=»4″] muestra 8 productos repartidos en 4 columnas.
• orderby controla el criterio de ordenación. Puedes ordenar por date (los más recientes primero), price (por precio), popularity (los más vendidos), rating (los mejor valorados) o rand (orden aleatorio, útil para mostrar productos distintos en cada visita).
• order complementa al anterior y define si el orden es ascendente ASC o descendente DESC. Por ejemplo [products limit=»4″ orderby=»price» order=»ASC»] muestra los 4 productos más baratos.
• category filtra por categoría usando el slug de la misma. [products category=»camisetas»] muestra solo los productos de esa categoría. El slug es el identificador de la categoría que puedes ver en Productos > Categorías.
• ids muestra productos concretos por su ID. [products ids=»12, 45, 78″] muestra exactamente esos tres productos. Es muy útil para crear selecciones manuales en páginas de aterrizaje o en la página de inicio, donde quieres controlar exactamente qué productos aparecen. Si no sabes cual es el ID, revisa la url de edición, el número que sale es el del producto.
• skus hace lo mismo que ids pero usando el SKU del producto en lugar del ID, lo que puede ser más cómodo si tienes tus productos bien identificados por SKU.
• on_sale muestra solo los productos que están en oferta en ese momento. [products on_sale=»true»] es perfecto para crear una página de ofertas sin tener que crear ni gestionar ninguna categoría especial. Cuando un producto deja de estar en oferta desaparece automáticamente de esa página.
• best_selling muestra los productos más vendidos. [products best_selling=»true» limit=»4″] es uno de los más usados en páginas de inicio para mostrar los productos más populares de la tienda.
• top_rated muestra los productos con mejor valoración media de los clientes. Funciona igual que best_selling pero basándose en las reseñas en lugar de en las ventas.
• visibility filtra por la visibilidad del producto. Puedes mostrar solo los que son visibles en el catálogo, solo los que aparecen en búsquedas o ambos.
• tag filtra productos por etiqueta usando el slug de la misma, igual que category pero con etiquetas. Puedes pasar varias separadas por comas. [products tag=»novedades, destacados»]
• paginate añade paginación al listado. Por defecto está desactivada, lo que significa que el shortcode muestra todos los productos indicados en limit en una sola página sin navegación. Si activas paginate=»true» junto con un limit, WooCommerce dividirá los resultados en páginas navegables. [products limit=»12″ columns=»4″ paginate=»true»]
• class añade una clase CSS al contenedor del shortcode, lo que te permite aplicarle estilos personalizados desde la hoja de estilos de tu tema. Útil si quieres que ese listado concreto tenga un aspecto diferente al resto. [products limit=»4″ class=»mi-seccion-destacada»]
• attribute y terms permiten filtrar productos por atributo. Por ejemplo, si tienes un atributo «color» puedes mostrar solo los productos en color rojo. [products attribute=»color» terms=»rojo»]. El atributo terms_operator controla cómo se comparan esos términos: IN muestra los que tienen ese atributo (valor por defecto), NOT IN los que no lo tienen, y AND los que tienen todos los términos indicados.
• tag_operator y cat_operator funcionan igual que terms_operator pero aplicados a etiquetas y categorías respectivamente.

Aunque te pueda abrumar un poco, lo interesante es que puedes combinar varios atributos en el mismo shortcode. Por ejemplo [products category=»tazas» on_sale=»false» limit=»4″ columns=»4″] mostraría las 4 camisetas que están actualmente en oferta, en 4 columnas:

Este tipo de personalización es recomendable usarla en la página principal para mostrar los productos por categorías que nos interesen para que el cliente tenga una idea general de lo que puede encontrar en la tienda.

Shortcode de página de producto

[product_page]

Muestra la ficha completa de un producto concreto, con imagen, descripción, precio, botón de añadir al carrito y todo lo demás, exactamente igual que si el cliente estuviera en la página individual de ese producto.

[product_page id=»828″] o [product_page sku=»taza-wordcamp-2026″]

¿Cuándo tiene sentido usarlo? Cuando quieres insertar un producto específico dentro de una entrada del blog, una página informativa o cualquier contenido donde no encajaría un listado completo pero sí tiene sentido destacar un producto concreto. Por ejemplo, si escribes un artículo sobre cómo cuidar una prenda de ropa y quieres mostrar el producto relacionado justo al final.

Shortcode de productos de la categoría de producto

[product_category]

Muestra los productos de una categoría específica. Admite los atributos per_page para controlar cuántos productos se muestran, columns para las columnas y orderby para el orden de los mismos.

[product_category category=»ofertas» per_page=»8″ columns=»4″ orderby=»date»]

La diferencia con usar [products category=»slug»] es mínima en la práctica. Este shortcode está pensado específicamente para mostrar una categoría, mientras que [products] es más flexible y permite combinar más filtros. Una vez más muy útil en la página de inicio o artículos del blog.

Shortcodes de categorías de producto

[product_categories]

Muestra un listado de las categorías de productos de tu tienda, no los productos en sí. Es útil en páginas de inicio o páginas de catálogo donde quieres que el cliente navegue por categorías antes de ver los productos.

[product_categories number=»3″ columns=»3″ hide_empty=»1″]

El atributo number controla cuántas categorías se muestran, columns las organiza en columnas y hide_empty con valor 1 oculta las categorías que no tienen ningún producto asignado, evitando que el cliente llegue a una categoría vacía.

Shortcodes de carrito y notificaciones

Este grupo es el menos conocido de todos pero tiene sus casos de uso concretos, especialmente el primero. Son shortcodes pensados para situaciones donde quieres facilitar al máximo el proceso de compra, mostrar notificaciones de WooCommerce fuera de las páginas habituales de la tienda o en pequeñas tiendas online que venden pocas referencias.

Shortcode de añadir al carrito

[add_to_cart]

Muestra el botón de «Añadir al carrito» de un producto concreto en cualquier lugar de tu web. Necesitas indicarle el ID del producto con el atributo id.

[add_to_cart id=»828″]

Te puede parecer una tontería si ya funciona correctamente en la ficha de producto pero… imagina que tienes un producto y quieres que el cliente pueda comprarlo directamente desde la página de inicio, desde una entrada del blog o desde una landing page de una campaña de ads, sin tener que ir a la ficha del producto. Con este shortcode colocas el botón exactamente donde quieres y el cliente puede añadirlo al carrito desde ahí directamente:

Admite algunos atributos adicionales interesantes:

• show_price controla si se muestra el precio junto al botón como en la imagen. [add_to_cart id=»828″ show_price=»true»] muestra precio y botón juntos, lo que tiene mucho sentido si el cliente no ha visto antes el precio del producto en esa página.
• quantity define la cantidad que se añade al carrito al pulsar el botón. Por defecto es 1, pero puedes cambiarlo si por ejemplo vendes productos que se compran habitualmente en packs.
• style permite añadir algo de estilo básico al botón directamente desde el shortcode, aunque si quieres personalizarlo en profundidad lo más recomendable es hacerlo desde el CSS de tu tema.

Shortcode de url de añadir al carrito

[add_to_cart_url]

No muestra el botón, sino que devuelve la URL directa de añadir al carrito de un producto concreto. Puedes usarla para crear tu propio botón con el diseño que quieras, para enlazar desde un banner, desde una imagen o desde cualquier elemento de tu página.

[add_to_cart_url id=»828″]

Por ejemplo, si tienes un banner en tu página de inicio promocionando un producto concreto y quieres que al hacer clic lo añada directamente al carrito en lugar de ir a la ficha del producto, puedes usar esta URL como destino del enlace. Aun así, personalmente prefiero meter la url directamente ya que tardo menos tiempo y es menos tedioso.

Notificaciones de WooCommerce

[shop_messages]

Muestra los mensajes y notificaciones de WooCommerce en páginas que no son páginas propias de WooCommerce. Por defecto, cuando el cliente añade un producto al carrito o ocurre algún evento en la tienda, las notificaciones que genera WooCommerce solo aparecen en las páginas de la tienda, el carrito o el checkout. Con este shortcode puedes hacer que esas notificaciones aparezcan también en cualquier otra página de tu web:

Es el shortcode menos utilizado de este grupo y en la mayoría de tiendas no necesitarás usarlo. Pero si tienes una página de inicio muy personalizada con elementos de tienda integrados, o si usas páginas de aterrizaje con productos, puede ser útil para que el cliente vea las confirmaciones de WooCommerce sin tener que ir al carrito. No admite atributos adicionales, simplemente se coloca en el contenido de la página donde quieres que aparezcan las notificaciones.

¿Los shortcodes están en desuso? El futuro son los bloques de Gutenberg

Si has llegado hasta aquí leyendo el artículo, ya conoces todos los shortcodes que incluye WooCommerce por defecto. Pero hay algo importante que conviene que sepas antes de irte a tu tienda a implementarlos todos: los shortcodes están en un proceso gradual de sustitución, y es importante que lo tengas en cuenta.

Desde que WordPress apostó de forma decidida por el editor de bloques de Gutenberg, WooCommerce ha ido creando bloques propios que hacen exactamente lo mismo que los shortcodes, pero de una forma mucho más visual e intuitiva.

La propia documentación oficial de WooCommerce ya avisa de esto explícitamente: los bloques son la forma más simple y flexible de mostrar productos en páginas y entradas, y el foco del desarrollo ha pasado de los shortcodes a los bloques.

¿Entonces qué hago?

La mayoría de shortcodes que has visto en este artículo ya tienen su bloque equivalente en Gutenberg(mostrar productos, url de añadir al carrito, mostrar categorías…). En lugar de escribir [products limit=»4″ orderby=»popularity»] y tener que recordar todos los atributos posibles, con el bloque «Colección de productos» simplemente lo arrastras a la página y desde el panel lateral configuras visualmente cuántos productos mostrar, en qué orden, de qué categoría y con qué aspecto, viendo el resultado en tiempo real sin escribir una sola línea de código:

Lo mismo ocurre con el carrito y el checkout: ambos tienen bloques propios que no solo replican la funcionalidad del shortcode sino que la mejoran, con más opciones de personalización y mejor rendimiento. De hecho, el bloque de checkout de WooCommerce es notablemente superior al shortcode en cuanto a posibilidades de personalización y velocidad de carga.

Algunos shortcodes como [woocommerce_order_tracking] todavía no tienen un bloque equivalente oficial, así que para esos casos los shortcodes siguen siendo la única opción nativa disponible y en uso.

¿Significa esto que tienes que dejar de usar shortcodes ahora mismo?

No necesariamente. Si tienes una tienda funcionando con un tema clásico que no usa bloques, los shortcodes seguirán funcionando sin problema. WooCommerce no los ha eliminado ni tiene previsto hacerlo a corto plazo, así que no van a dejar de funcionar de un día para otro.

Pero si estás empezando una tienda desde cero o estás pensando en migrar a un tema de bloques, tiene mucho más sentido aprender a usar los bloques de WooCommerce desde el principio. Es hacia donde va todo el ecosistema, donde se concentra el desarrollo activo y donde estarán las novedades en el futuro.

En resumen, los shortcodes son una herramienta que conviene conocer, especialmente para entender cómo funcionan las páginas principales de tu tienda o para casos puntuales donde no existe un bloque equivalente. Pero si puedes resolver lo mismo con un bloque de Gutenberg, esa es la opción más moderna y con más recorrido a futuro.