Tabla de contenidos:<\/p>
- \u00bfQu\u00e9 es un shortcode y c\u00f3mo funciona?<\/a>
- \u00bfC\u00f3mo se usa un shortcode en WooCommerce?<\/a><\/li>
- \u00bfQu\u00e9 son los atributos de un shortcode?<\/a><\/li><\/ul><\/li>
- Shortcodes de p\u00e1ginas principales<\/a>
- Shortcode de Carrito<\/a><\/li>
- Shortcode de Finalizar Compra<\/a><\/li>
- Shortcode de Mi Cuenta<\/a><\/li>
- Shortcode de Seguimiento del pedido<\/a><\/li><\/ul><\/li>
- Shortcodes de productos<\/a>
- Shortcode de cat\u00e1logo de productos<\/a><\/li>
- Shortcode de p\u00e1gina de producto<\/a><\/li>
- Shortcode de productos de la categor\u00eda de producto<\/a><\/li>
- Shortcodes de categor\u00edas de producto<\/a><\/li><\/ul><\/li>
- Shortcodes de carrito y notificaciones<\/a>
- Shortcode de a\u00f1adir al carrito<\/a><\/li>
- Shortcode de url de a\u00f1adir al carrito<\/a><\/li>
- Notificaciones de WooCommerce<\/a><\/li><\/ul><\/li>
- \u00bfLos shortcodes est\u00e1n en desuso? El futuro son los bloques de Gutenberg<\/a>
- \u00bfSignifica esto que tienes que dejar de usar shortcodes ahora mismo?<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n
\u00bfQu\u00e9 es un shortcode y c\u00f3mo funciona?<\/span><\/h2>\n
Un shortcode es un atajo de c\u00f3digo<\/b>. Una peque\u00f1a etiqueta entre corchetes que, al colocarla en el contenido de una p\u00e1gina o entrada de WordPress, ejecuta autom\u00e1ticamente una funci\u00f3n y muestra el resultado en su lugar<\/b>.<\/p>\n
En lugar de tener que escribir decenas de l\u00edneas de c\u00f3digo para mostrar, por ejemplo, el formulario de finalizaci\u00f3n de compra, simplemente escribes [woocommerce_checkout] en el contenido de esa p\u00e1gina y WooCommerce hace todo el trabajo por ti. Sin programar, sin tocar archivos del servidor, sin complicaciones.<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-compra-WooCommerce-300x86.png\" "\\"\\"")
<\/p>\nLos shortcodes no son algo exclusivo de WooCommerce, llevan en WordPress desde la versi\u00f3n 2.5 y los utilizan miles de plugins para a\u00f1adir funcionalidades de forma sencilla. Lo que s\u00ed es espec\u00edfico de WooCommerce es el conjunto de shortcodes propios que incluye para gestionar las partes m\u00e1s importantes de tu tienda.<\/p>\n
\u00bfC\u00f3mo se usa un shortcode en WooCommerce?<\/span><\/h3>\n
Actualmente existen dos formas que dependen del editor que est\u00e9s usando en tu WordPress:<\/p>\n
Si usas el editor de bloques de Gutenberg<\/b>, tienes que a\u00f1adir un bloque de tipo \u00abShortcode\u00bb, que encontrar\u00e1s busc\u00e1ndolo por ese nombre en el buscador de bloques. Una vez a\u00f1adido, simplemente pegas el shortcode dentro y ya est\u00e1:<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-carrito-Gutenberg-300x150.jpg\" "\\"\\"")
<\/p>\nSi usas el editor cl\u00e1sico<\/b>, puedes pegarlo directamente en el contenido de la p\u00e1gina o entrada, en la pesta\u00f1a de texto o visual, y funcionar\u00e1 igualmente:<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-carrito-editor-clasico-300x55.png\" "\\"\\"")
<\/p>\nAl a\u00f1adir estos shortcodes se mostrar\u00e1 su contenido en la parte visible de la p\u00e1gina, puedes hacer una preview de prueba para ver c\u00f3mo se queda. Ahora que ya sabes su uso y como implementarlo en los editores de WordPress aun queda una cuesti\u00f3n m\u00e1s antes de que te ense\u00f1e todos los que hay.<\/p>\n
\u00bfQu\u00e9 son los atributos de un shortcode?<\/span><\/h3>\n
Algunos shortcodes funcionan solos, como el que te he mostrado antes [woocommerce_cart], que simplemente muestra el carrito sin necesidad de configurar nada m\u00e1s. Pero otros admiten atributos, que son par\u00e1metros adicionales que puedes a\u00f1adir para personalizar el resultado<\/b> que se muestra.<\/p>\n
Los atributos se escriben dentro del mismo shortcode<\/b>, despu\u00e9s del nombre y antes del corchete de cierre, con el formato atributo=\u00bbvalor\u00bb. Por ejemplo:<\/p>\n
[products limit=\u00bb4″ orderby=\u00bbpopularity\u00bb columns=\u00bb3″]<\/p>\n
En este caso limit, orderby y columns son atributos que le indican a WooCommerce cu\u00e1ntos productos mostrar(4), en qu\u00e9 orden(popularidad) y en cu\u00e1ntas columnas(3). Cada shortcode tiene sus propios atributos disponibles, que te ir\u00e9 explicando uno a uno a lo largo del art\u00edculo.<\/p>\n
Por \u00faltimo, y no menos importante, los atributos siempre van con el valor entre comillas<\/b>, y el orden en que los escribas no importa. Puedes ponerlos en el orden que quieras y el resultado ser\u00e1 el mismo.<\/p>\n
Shortcodes de p\u00e1ginas principales<\/span><\/h2>\n
Cuando instalas WooCommerce por primera vez, el plugin crea autom\u00e1ticamente algunas p\u00e1ginas esenciales para el funcionamiento de tu tienda: el carrito, el checkout, mi cuenta y tienda. Estas p\u00e1ginas, (menos la tienda) funcionan porque llevan dentro un shortcode que WooCommerce coloca autom\u00e1ticamente al crearlas.<\/p>\n
Esto tiene una implicaci\u00f3n pr\u00e1ctica importante ya que si alguna vez eliminas una de esas p\u00e1ginas por error, la duplicas o la recreas desde cero, necesitar\u00e1s saber qu\u00e9 shortcode poner dentro para que vuelva a funcionar correctamente<\/b>. Y si alg\u00fan 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\u00e1ginas tienen su shortcode correspondiente.<\/p>\n
Shortcode de Carrito<\/span><\/h3>\n
[woocommerce_cart]<\/b><\/p>\n
Muestra la p\u00e1gina del carrito completa: los productos que el cliente ha a\u00f1adido, las cantidades, el resumen del precio, el campo para introducir cupones de descuento y el bot\u00f3n para proceder al pago. Todos los elementos que te muestro en la imagen es gracias a ese shortcode:<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-carrito-WordPress-300x203.png\" "\\"\\"")
<\/p>\nPor lo tanto, sin este shortcode la p\u00e1gina del carrito existir\u00e1 en WordPress pero aparecer\u00e1 completamente en blanco. WooCommerce no sabe que esa p\u00e1gina tiene que mostrar el carrito a menos que se lo indiques con este shortcode, aunque parezca una tonter\u00eda muchos clientes se pensaban que por poner en el t\u00edtulo carrito se iba a mostrar…<\/p>\n
Como ya he comentado, no admite atributos adicionales, simplemente se coloca en el contenido de la p\u00e1gina y hace su funci\u00f3n.<\/p>\n
Shortcode de Finalizar Compra<\/span><\/h3>\n
[woocommerce_checkout]<\/b><\/p>\n
Muestra el formulario de finalizaci\u00f3n de compra o checkout. Este muestra los campos de direcci\u00f3n de env\u00edo y facturaci\u00f3n, el resumen del pedido, los m\u00e9todos de pago disponibles y el bot\u00f3n de confirmar compra.<\/p>\n
Es una de las p\u00e1ginas m\u00e1s importante, si el formulario de finalizar compra aparece en blanco o no funciona correctamente, lo primero que tienes que revisar es que esta p\u00e1gina existe, que est\u00e1 correctamente asignada en los ajustes de WooCommerce, es decir, desde WooCommerce > Ajustes > Avanzado > Instalaci\u00f3n de p\u00e1ginas<\/i>, y que tiene este shortcode en su contenido. Si te pierdes en la asignaci\u00f3n de p\u00e1ginas, revisa el art\u00edculo de ajustes de WooCommerce<\/strong><\/a>.<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-Finalizar-compra-WooCommerce-300x148.jpg\" "\\"\\"")
<\/p>\nPor otro lado, como te coment\u00e9 al principio del art\u00edculo, existe un bloque de checkout que es mucho mejor que el shortcode. Quiz\u00e1 recuerdes el post donde te expliqu\u00e9 en qu\u00e9 consiste y c\u00f3mo vender m\u00e1s con el checkout de WooCommerce<\/strong><\/a>.<\/p>\n
Shortcode de Mi Cuenta<\/span><\/h3>\n
[woocommerce_my_account]<\/b><\/p>\n
Muestra el \u00e1rea privada del cliente, donde puede consultar sus pedidos, gestionar sus direcciones de env\u00edo y facturaci\u00f3n, cambiar su contrase\u00f1a, ver sus descargas si ha comprado productos digitales y gestionar sus m\u00e9todos de pago guardados.<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-Mi-cuenta-WooCommerce-300x96.png\" "\\"\\"")
<\/p>\nSi permites que los clientes se registren en tu tienda, esta p\u00e1gina tiene que existir y tener este shortcode. Sin ella, el cliente no tendr\u00eda forma de acceder a su cuenta despu\u00e9s de registrarse.<\/p>\n
Shortcode de Seguimiento del pedido<\/span><\/h3>\n
[woocommerce_order_tracking]<\/b><\/p>\n
Muestra un formulario donde el cliente puede consultar el estado de su pedido introduciendo el n\u00famero de pedido y el email con el que compr\u00f3. No necesita estar registrado para usarlo, lo que lo hace especialmente \u00fatil para tiendas que permiten comprar como invitado.<\/p>\n
A diferencia de los tres anteriores, esta no es una p\u00e1gina que WooCommerce cree autom\u00e1ticamente al instalarse. Es posible que te haya sorprendido, ya que incluso muchos implementadores desconocen esta p\u00e1gina y es muy \u00fatil para calmar un poco al cliente y darle confianza mientras llega el pedido. As\u00ed que si quieres reducir las consultas de soporte del tipo \u00bfd\u00f3nde est\u00e1 mi pedido?<\/i>, porque le das al cliente una forma de consultarlo por s\u00ed mismo sin necesidad de contactarte.<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-seguimiento-pedido-300x82.png\" "\\"\\"")
<\/p>\nSi quieres tenerla en tu tienda tendr\u00e1s que crear la p\u00e1gina manualmente, a\u00f1adir este shortcode en su contenido y enlazarla desde donde consideres, ya sea en el men\u00fa, en el footer o en el email de confirmaci\u00f3n de pedido.<\/p>\n
Shortcodes de productos<\/span><\/h2>\n
Este grupo te lo he puesto en otra secci\u00f3n ya que se puede personalizar mucho m\u00e1s. Te permite mostrar productos en cualquier p\u00e1gina o entrada de tu web, con muchas opciones de filtrado y personalizaci\u00f3n. Son especialmente \u00fatiles si quieres crear p\u00e1ginas de aterrizaje con productos destacados, secciones de novedades en tu blog o cualquier sitio donde quieras mostrar productos fuera del cat\u00e1logo habitual de la tienda.<\/p>\n
Es el shortcode m\u00e1s completo y flexible de WooCommerce. Desde la versi\u00f3n 3.2 reemplaza a varios shortcodes m\u00e1s antiguos como [featured_products], [sale_products], [best_selling_products], [recent_products] o [top_rated_products]. Si en alg\u00fan art\u00edculo o tutorial antiguo ves alguno de esos, tienes que saber que ahora todo se hace con <\/b>[products]<\/b> y sus atributos<\/b>.<\/p>\n
Por s\u00ed solo muestra un listado de productos, pero lo realmente interesante es la cantidad de atributos que puedes combinar para filtrar y personalizar exactamente qu\u00e9 se muestra y c\u00f3mo. Los vemos agrupados por funci\u00f3n:<\/p>\n
Shortcode de cat\u00e1logo de productos<\/span><\/h3>\n
[products]<\/b><\/p>\n
Si lo pones por s\u00ed solo muestra un listado de productos, pero lo realmente interesante son los atributos que puedes a\u00f1adirle para filtrar y personalizar exactamente qu\u00e9 se muestra y c\u00f3mo. Te los ense\u00f1o:<\/p>\n
- \n
- limit controla cu\u00e1ntos productos se muestran. [products limit=\u00bb8″] muestra 8 productos. Si pones -1 los muestra todos sin l\u00edmite, aunque esto no es recomendable si tienes un cat\u00e1logo grande porque puede afectar al rendimiento de la p\u00e1gina.<\/li>\n
- columns define en cu\u00e1ntas columnas se organizan los productos. [products limit=\u00bb8″ columns=\u00bb4″] muestra 8 productos repartidos en 4 columnas.<\/li>\n
- orderby controla el criterio de ordenaci\u00f3n. Puedes ordenar por date (los m\u00e1s recientes primero), price (por precio), popularity (los m\u00e1s vendidos), rating (los mejor valorados) o rand (orden aleatorio, \u00fatil para mostrar productos distintos en cada visita).<\/li>\n
- order complementa al anterior y define si el orden es ascendente ASC o descendente DESC. Por ejemplo [products limit=\u00bb4″ orderby=\u00bbprice\u00bb order=\u00bbASC\u00bb] muestra los 4 productos m\u00e1s baratos.<\/li>\n
- category filtra por categor\u00eda usando el slug de la misma. [products category=\u00bbcamisetas\u00bb] muestra solo los productos de esa categor\u00eda. El slug es el identificador de la categor\u00eda que puedes ver en Productos > Categor\u00edas<\/i>.<\/li>\n
- ids muestra productos concretos por su ID. [products ids=\u00bb12, 45, 78″] muestra exactamente esos tres productos. Es muy \u00fatil para crear selecciones manuales en p\u00e1ginas de aterrizaje o en la p\u00e1gina de inicio, donde quieres controlar exactamente qu\u00e9 productos aparecen. Si no sabes cual es el ID, revisa la url de edici\u00f3n, el n\u00famero que sale es el del producto.<\/li>\n
- skus hace lo mismo que ids pero usando el SKU del producto en lugar del ID, lo que puede ser m\u00e1s c\u00f3modo si tienes tus productos bien identificados por SKU.<\/li>\n
- on_sale muestra solo los productos que est\u00e1n en oferta en ese momento. [products on_sale=\u00bbtrue\u00bb] es perfecto para crear una p\u00e1gina de ofertas sin tener que crear ni gestionar ninguna categor\u00eda especial. Cuando un producto deja de estar en oferta desaparece autom\u00e1ticamente de esa p\u00e1gina.<\/li>\n
- best_selling muestra los productos m\u00e1s vendidos. [products best_selling=\u00bbtrue\u00bb limit=\u00bb4″] es uno de los m\u00e1s usados en p\u00e1ginas de inicio para mostrar los productos m\u00e1s populares de la tienda.<\/li>\n
- top_rated muestra los productos con mejor valoraci\u00f3n media de los clientes. Funciona igual que best_selling pero bas\u00e1ndose en las rese\u00f1as en lugar de en las ventas.<\/li>\n
- visibility filtra por la visibilidad del producto. Puedes mostrar solo los que son visibles en el cat\u00e1logo, solo los que aparecen en b\u00fasquedas o ambos.<\/li>\n
- 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=\u00bbnovedades, destacados\u00bb]<\/li>\n
- paginate a\u00f1ade paginaci\u00f3n al listado. Por defecto est\u00e1 desactivada, lo que significa que el shortcode muestra todos los productos indicados en limit en una sola p\u00e1gina sin navegaci\u00f3n. Si activas paginate=\u00bbtrue\u00bb junto con un limit, WooCommerce dividir\u00e1 los resultados en p\u00e1ginas navegables. [products limit=\u00bb12″ columns=\u00bb4″ paginate=\u00bbtrue\u00bb]<\/li>\n
- class a\u00f1ade una clase CSS<\/a> al contenedor del shortcode, lo que te permite aplicarle estilos personalizados desde la hoja de estilos de tu tema. \u00datil si quieres que ese listado concreto tenga un aspecto diferente al resto. [products limit=\u00bb4″ class=\u00bbmi-seccion-destacada\u00bb]<\/li>\n
- attribute y terms permiten filtrar productos por atributo. Por ejemplo, si tienes un atributo \u00abcolor\u00bb puedes mostrar solo los productos en color rojo. [products attribute=\u00bbcolor\u00bb terms=\u00bbrojo\u00bb]. El atributo terms_operator controla c\u00f3mo se comparan esos t\u00e9rminos: 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\u00e9rminos indicados.<\/li>\n
- tag_operator y cat_operator funcionan igual que terms_operator pero aplicados a etiquetas y categor\u00edas respectivamente.<\/li>\n<\/ul>\n
Aunque te pueda abrumar un poco, lo interesante es que puedes combinar varios atributos en el mismo shortcode. Por ejemplo [products category=\u00bbtazas\u00bb on_sale=\u00bbfalse\u00bb limit=\u00bb4″ columns=\u00bb4″] mostrar\u00eda las 4 camisetas que est\u00e1n actualmente en oferta, en 4 columnas:<\/p>\n
![\"shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/shortcode-productos-woocommerce-300x138.png\" "\\"\\"")
<\/p>\nEste tipo de personalizaci\u00f3n es recomendable usarla en la p\u00e1gina principal para mostrar los productos por categor\u00edas que nos interesen para que el cliente tenga una idea general de lo que puede encontrar en la tienda.<\/p>\n
Shortcode de p\u00e1gina de producto<\/span><\/h3>\n
[product_page]<\/b><\/p>\n
Muestra la ficha completa de un producto concreto, con imagen, descripci\u00f3n, precio, bot\u00f3n de a\u00f1adir al carrito y todo lo dem\u00e1s, exactamente igual que si el cliente estuviera en la p\u00e1gina individual de ese producto.<\/p>\n
[product_page id=\u00bb828″] o [product_page sku=\u00bbtaza-wordcamp-2026″]<\/p>\n
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-pagina-producto-300x147.png\" "\\"\\"")
<\/p>\n\u00bfCu\u00e1ndo tiene sentido usarlo? Cuando quieres insertar un producto espec\u00edfico dentro de una entrada del blog, una p\u00e1gina informativa o cualquier contenido donde no encajar\u00eda un listado completo pero s\u00ed tiene sentido destacar un producto concreto. Por ejemplo, si escribes un art\u00edculo sobre c\u00f3mo cuidar una prenda de ropa y quieres mostrar el producto relacionado justo al final.<\/i><\/p>\n
Shortcode de productos de la categor\u00eda de producto<\/span><\/h3>\n
[product_category]<\/b><\/p>\n
Muestra los productos de una categor\u00eda espec\u00edfica. Admite los atributos per_page para controlar cu\u00e1ntos productos se muestran, columns para las columnas y orderby para el orden de los mismos.<\/p>\n
[product_category category=\u00bbofertas\u00bb per_page=\u00bb8″ columns=\u00bb4″ orderby=\u00bbdate\u00bb]<\/p>\n
La diferencia con usar [products category=\u00bbslug\u00bb] es m\u00ednima en la pr\u00e1ctica. Este shortcode est\u00e1 pensado espec\u00edficamente para mostrar una categor\u00eda, mientras que [products] es m\u00e1s flexible y permite combinar m\u00e1s filtros. Una vez m\u00e1s muy \u00fatil en la p\u00e1gina de inicio o art\u00edculos del blog.<\/p>\n
Shortcodes de categor\u00edas de producto<\/span><\/h3>\n
[product_categories]<\/b><\/p>\n
Muestra un listado de las categor\u00edas de productos de tu tienda, no los productos en s\u00ed. Es \u00fatil en p\u00e1ginas de inicio o p\u00e1ginas de cat\u00e1logo donde quieres que el cliente navegue por categor\u00edas antes de ver los productos.<\/p>\n
![\"shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/shortcode-categorias-productos-1-300x122.png\" "\\"\\"")
<\/p>\n[product_categories number=\u00bb3″ columns=\u00bb3″ hide_empty=\u00bb1″]<\/p>\n
El atributo number controla cu\u00e1ntas categor\u00edas se muestran, columns las organiza en columnas y hide_empty con valor 1 oculta las categor\u00edas que no tienen ning\u00fan producto asignado, evitando que el cliente llegue a una categor\u00eda vac\u00eda.<\/p>\n
Shortcodes de carrito y notificaciones<\/span><\/h2>\n
- Shortcode de url de a\u00f1adir al carrito<\/a><\/li>
- Shortcode de p\u00e1gina de producto<\/a><\/li>
- Shortcode de Finalizar Compra<\/a><\/li>
- \u00bfQu\u00e9 son los atributos de un shortcode?<\/a><\/li><\/ul><\/li>
- \u00bfC\u00f3mo se usa un shortcode en WooCommerce?<\/a><\/li>
![\"Shortcode](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Shortcode-anadir-al-carrito-300x90.jpg\" "\\"\\"")
<\/p>\n![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Bloques-de-Gutenberg-135x300.jpg\" "\\"\\"")
<\/p>\n![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2026\/06\/Bloque-coleccion-productos-299x161.gif\" "\\"\\"")
<\/p>\n