{"id":43072,"date":"2024-10-31T15:42:54","date_gmt":"2024-10-31T14:42:54","guid":{"rendered":"\/tutoriales\/?p=43072"},"modified":"2026-03-10T16:43:03","modified_gmt":"2026-03-10T15:43:03","slug":"shortcodes-woocommerce","status":"publish","type":"post","link":"\/co\/tutoriales\/shortcodes-woocommerce","title":{"rendered":"Gu\u00eda de shortcodes de WooCommerce"},"content":{"rendered":"

Si tienes un sitio de WooCommerce, conocer el uso de los shortcodes puede ayudarte a sacar el máximo provecho del plugin. <\/p>

Los shortcodes son pequeños fragmentos de código que puedes colocar en tus páginas o entradas de WordPress para añadir funciones específicas de WooCommerce sin tener que codificar.<\/p>

Este artículo explorará todos los shortcodes de WooCommerce y sus funciones. También hablaremos de sus limitaciones y ofreceremos alternativas para personalizar tu tienda de WooCommerce.<\/p>

Empecemos por repasar los conceptos básicos de los shortcodes y cómo utilizarlos.<\/p>

¿Cómo funcionan los shortcodes de WooCommerce?<\/h2>

Los shortcodes de WooCommerce te permiten personalizar la funcionalidad y el contenido de tu tienda online sin necesidad de escribir código personalizado. Cada shortcode consta de dos partes clave: el cuerpo y los parámetros.<\/p>

El cuerpo <\/strong>es la parte principal del shortcode, entre corchetes. Indica a WooCommerce qué tipo de función o contenido debe mostrar.<\/p>

Los parámetros <\/strong>son ajustes opcionales que puedes añadir para personalizar la salida. Se sitúan después del cuerpo, dentro de los mismos corchetes. Cada parámetro tiene un atributo y un valor, separados por un signo igual.<\/p>

Por ejemplo, si quieres mostrar los tres productos más vendidos en tres columnas, el shortcode tendría el siguiente aspecto:<\/p>

[products limit=\"3\" columns=\"3\" orderby=\"popularity\"]<\/pre>
El cuerpo, productos<\/strong>, se refiere a la función principal que se va a ejecutar. Los tres parámetros del shortcode que siguen controlan el número de productos mostrados, su disposición y el método de ordenación.<\/p>
Para utilizar un shortcode, sólo tienes que añadirlo a la entrada o página que elijas en el editor de bloques de WordPress utilizando el bloque shortcode<\/strong>. Haz clic en el icono + <\/strong>y arrastra y suelta el bloque de código corto en el editor.<\/p>
\"Editor<\/figure>
\n
\"\"<\/a><\/figure><\/div>
Lista de shortcodes de WooCommerce<\/h2>
Exploremos los shortcodes de WooCommerce disponibles y cómo utilizarlos eficazmente. Ten en cuenta que estos códigos sólo funcionan en sitios web de WordPress con WooCommerce instalado.<\/p>
1. Página del carrito<\/h3>
[woocommerce_cart]<\/pre>
Este shortcode muestra la página del carrito de la compra en el espacio elegido dentro de tu tienda WooCommerce. <\/p>
Presenta el contenido del carrito de la compra del cliente y ofrece opciones para actualizar artículos, aplicar códigos de cupón y proceder a la compra.<\/p>
\"Página<\/figure>
La mayoría de los temas de WooCommerce incluyen automáticamente este shortcode en la página del carrito de la compra, pero puedes utilizarlo para crear uno personalizado. Como no tiene atributos personalizables, sólo tienes que pegar el código tal cual para utilizarlo.<\/p>
2. Página de pago<\/h3>
[woocommerce_checkout]<\/pre>
Este shortcode incrusta un formulario de pago en la página de pago de tu WooCommerce. Los clientes pueden utilizar el formulario para enviar su información de facturación y envío, elegir un método de pago y revisar su pedido antes de realizarlo.<\/p>
\"Página<\/figure>
3. Página de cuenta de usuario<\/h3>
[woocommerce_my_account]<\/pre>
Este shortcode de WooCommerce muestra el área de cuenta de usuario. <\/p>
Puedes utilizarlo para crear una página de cuenta de usuario en la que los clientes registrados puedan gestionar su información personal, hacer un seguimiento de los pedidos, gestionar las direcciones y cambiar las contraseñas.<\/p>
Para los invitados que no han iniciado sesión, este shortcode muestra un formulario de inicio de sesión.<\/p>
\"Página<\/figure>
4. Formulario de seguimiento del pedido<\/h3>
[woocommerce_order_tracking]<\/pre>
Si tu tienda de comercio electrónico vende productos físicos, este shortcode permite a los clientes hacer un seguimiento de sus pedidos. <\/p>
Muestra un formulario en el que pueden introducir su ID de pedido y su dirección de correo electrónico para comprobar el estado, lo que te permite crear rápidamente una página personalizada de seguimiento de pedidos.<\/p>
\"Formulario<\/figure>
A diferencia de la sección Pedidos <\/strong>de [woocommerce_my_account]<\/strong>, los usuarios no necesitan una cuenta ni iniciar sesión para utilizar esta función. Habilita la comprobación rápida del estado del pedido con este shortcode para mejorar la experiencia del usuario.<\/p>
5. Mostrar una página de producto específica<\/h3>
[product_page]<\/pre>
Utiliza este shortcode para mostrar un producto por su ID o código SKU (Stock Keeping Unit) en cualquier lugar de tu página o entrada. Muestra la información del producto, incluido el título, el precio, la descripción, las opiniones y un botón de añadir al carrito.<\/p>
\"Mostrar<\/figure>
Aquí tienes un ejemplo del shortcode de la página de producto con ambos atributos:<\/p>
[product_page id=\"123\"]\n\n[product_page sku=\"SKU123\"]<\/pre>
Puedes utilizar el shortcode [product_page]<\/strong> varias veces en la misma página para mostrar diferentes productos. Sólo recuerda añadir un bloque de shortcode distinto para cada uno.<\/p>
6. Listados de productos<\/h3>
[products]<\/pre>
Este es uno de los shortcodes de WooCommerce más versátiles debido a su amplia selección de atributos.<\/p>
Mientras que [product_page] <\/strong>muestra una página de producto completa, el shortcode [products] <\/strong>te permite mostrar detalles específicos del producto sin el diseño de la página completa. Es ideal para mostrar productos en un formato más compacto, como dentro de una lista o una entrada de blog.<\/p>
\"Listados<\/figure>
Atributos del producto<\/strong><\/p>
Aquí tienes los atributos clave para personalizar la salida del shortcode [productos] <\/strong>de WooCommerce:<\/p>
id<\/pre>
Este atributo muestra un artículo concreto por su ID de producto.<\/p>
Ejemplo: [product id=”123″]<\/strong><\/p>
skus<\/pre>
Este atributo muestra un producto específico basado en su SKU. Evita utilizarlo junto con el atributo ID <\/strong>para evitar resultados contradictorios.<\/p>
Ejemplo: [product sku=”SKU123″]<\/strong><\/p>
limit<\/pre>
Utiliza este atributo para controlar cuántos productos aparecen al mostrar varios productos utilizando un único shortcode.<\/p>
Ejemplo: [products limit=”4″]<\/strong><\/p>
columns<\/pre>
Este atributo establece el número de columnas para mostrar los productos, lo que es ideal para ahorrar espacio. Por defecto son cuatro columnas, a menos que se especifique lo contrario.<\/p>
Ejemplo: [products columns=”5″]<\/strong><\/p>
orderby<\/pre>
Este atributo te permite especificar el orden de clasificación de los productos mostrados.<\/p>
Aquí tienes las opciones disponibles:<\/p>