Guía de shortcodes de WooCommerce

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

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.

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.

Empecemos por repasar los conceptos básicos de los shortcodes y cómo utilizarlos.

¿Cómo funcionan los shortcodes de WooCommerce?

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.

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

Los parámetros 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.

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

[products limit="3" columns="3" orderby="popularity"]

El cuerpo, productos, 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.

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. Haz clic en el icono + y arrastra y suelta el bloque de código corto en el editor.

Lista de shortcodes de WooCommerce

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.

1. Página del carrito

[woocommerce_cart]

Este shortcode muestra la página del carrito de la compra en el espacio elegido dentro de tu tienda WooCommerce. 

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.

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.

2. Página de pago

[woocommerce_checkout]

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.

3. Página de cuenta de usuario

[woocommerce_my_account]

Este shortcode de WooCommerce muestra el área de cuenta de usuario. 

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.

Para los invitados que no han iniciado sesión, este shortcode muestra un formulario de inicio de sesión.

4. Formulario de seguimiento del pedido

[woocommerce_order_tracking]

Si tu tienda de comercio electrónico vende productos físicos, este shortcode permite a los clientes hacer un seguimiento de sus pedidos. 

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.

A diferencia de la sección Pedidos de [woocommerce_my_account], 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.

5. Mostrar una página de producto específica

[product_page]

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.

Aquí tienes un ejemplo del shortcode de la página de producto con ambos atributos:

[product_page id="123"]

[product_page sku="SKU123"]

Puedes utilizar el shortcode [product_page] varias veces en la misma página para mostrar diferentes productos. Sólo recuerda añadir un bloque de shortcode distinto para cada uno.

6. Listados de productos

[products]

Este es uno de los shortcodes de WooCommerce más versátiles debido a su amplia selección de atributos.

Mientras que [product_page] muestra una página de producto completa, el shortcode [products] 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.

Atributos del producto

Aquí tienes los atributos clave para personalizar la salida del shortcode [productos] de WooCommerce:

id

Este atributo muestra un artículo concreto por su ID de producto.

Ejemplo: [product id=”123″]

skus

Este atributo muestra un producto específico basado en su SKU. Evita utilizarlo junto con el atributo ID para evitar resultados contradictorios.

Ejemplo: [product sku=”SKU123″]

limit

Utiliza este atributo para controlar cuántos productos aparecen al mostrar varios productos utilizando un único shortcode.

Ejemplo: [products limit=”4″]

columns

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.

Ejemplo: [products columns=”5″]

orderby

Este atributo te permite especificar el orden de clasificación de los productos mostrados.

Aquí tienes las opciones disponibles:

• title (por defecto): ordenar por el título del producto.
• date: ordenar por la fecha de publicación del producto.
• popularity: ordenar por número de compras.
• rating: ordenar por valoración media del producto.
• rand: mostrar productos en orden aleatorio.
• id: ordenar por ID de producto.

Ejemplo: [products orderby=”date”]

order

Este atributo define si el orden de los productos es ascendente (ASC) o descendente (DESC). Por defecto es ascendente a menos que se especifique lo contrario.

Ejemplo: [products order=”DESC”]

category

Utiliza este atributo para mostrar productos de categorías específicas basándote en sus slugs. Separa los slugs de varias categorías con comas.

Ejemplo: [products category=”ropa,verano”]

tag

Este atributo muestra productos con etiquetas específicas. De forma similar al atributo category, utiliza comas para separar varias etiquetas de producto.

Ejemplo: [products tag=”nuevo”]

class

Este atributo añade una clase CSS personalizada para modificar el estilo de la salida. Antes de utilizarlo, debes crear una clase CSS personalizada en la hoja de estilos de tu tema (style.css).

Ejemplo: [products class=”main-paragraph”]

on_sale

Este atributo te permite mostrar los productos que están en oferta. Cuando se utiliza, WooCommerce filtra tus productos y muestra sólo los que tienen un precio de venta. Establécelo como true para activar este filtro o como false para mostrar todos los productos.

Evita utilizar on_sale con los atributos best_selling y top_rated para prevenir conflictos de visualización, ya que combinarlos puede crear confusión sobre qué criterios deben priorizarse.

Ejemplo: [products on_sale=”true”]

best_selling

Utiliza este atributo con un valor true para mostrar sólo los productos más vendidos. No lo utilices junto con los atributos on_sale y top_rated para evitar conflictos de priorización.

Ejemplo: [products best_selling=”true”]

top_rated

Este atributo muestra los productos mejor valorados en función de las valoraciones de los usuarios, aceptando true y false como opciones. Evita utilizarlo junto con los atributos on_sale y best_selling para evitar filtros conflictivos.

Ejemplo: [products top_rated=”true”]

paginate

Establece este atributo como verdadero para activar la paginación de los productos recuperados. Combínalo con el atributo límite para controlar el número de productos mostrados por página.

Ejemplo: [products paginate=”true”]

visibility

Este atributo filtra los productos por su estado de visibilidad, por ejemplo:

• visible (por defecto): productos visibles en la tienda y en los resultados de búsqueda.
• catalog: productos visibles sólo en la tienda, no en los resultados de búsqueda.
• search: productos visibles sólo en los resultados de búsqueda, no en la tienda.
• hidden: productos ocultos tanto de la tienda como de los resultados de búsqueda.
• featured: productos marcados como destacados.

Ejemplo: [products visibility=”catalog”]

7. Mostrar todas las categorías de productos disponibles

[product_categories]

Este shortcode permite a los usuarios navegar por las categorías de productos de tu sitio de WordPress más fácilmente. Muestra todas las categorías de productos por defecto, pero puedes personalizar el resultado utilizando los siguientes atributos:

• number: establece el número de categorías mostradas. Funciona de forma similar al atributo limit del shortcode [products].
• columns: define el número de columnas para mostrar las categorías recuperadas.
• include: determina qué categorías mostrar por sus IDs.
• order by: especifica el orden de clasificación de las categorías de productos mostradas. Estas son las opciones disponibles:
  • name: ordenar por nombre de categoría de producto.
  • id: ordenar por ID de categoría.
  • slug: ordenar por categoría slug.
  • menu_order: ordenar por el orden de menú asignado en los ajustes de WooCommerce.
  • count: ordenar por el número de productos de cada categoría.
• Order: define si el orden de la categoría de productos es ascendente (ASC) o descendente (DESC).
• hide_empty: ocultar las categorías que no tienen productos.
• parent: muestra las categorías de productos que son hijos de una categoría padre específica.

Ejemplo: [product_categories include=”12,15,18″ orderby=”slug” order=”ASC”]

8. Mostrar una categoría de producto específica

[product_category]

A pesar de tener un nombre similar al shortcode [product_categories], [product_category] se centra en mostrar productos de la categoría especificada.

Es ideal para mostrar productos relevantes en las páginas de destino de sus respectivas categorías o para destacar los artículos de moda de una categoría concreta.

Este shortcode requiere el atributo category con el slug de tu categoría de producto elegida para funcionar. Puedes emparejarlo con los siguientes atributos para personalizar el resultado:

• columns: establece el número de columnas para mostrar los productos. El valor por defecto es 4.
• orderby: determina el método de ordenación. Tiene las mismas opciones que el atributo orderby del shortcode [product_categories].
• order: especifica el orden de clasificación.
• per_page: limitar el número de productos mostrados por página.
• paginate: activa la paginación cuando se establece en true.

Ejemplo: [product_category category=”camisas” orderby=”price”]

9. Productos relacionados

[related_products]

Si añades este shortcode a la página de un producto, WooCommerce mostrará automáticamente los productos relacionados basándose en las categorías y etiquetas compartidas por el producto que se está viendo en ese momento.

Como no puedes elegir manualmente los productos relacionados, este shortcode se utiliza mejor en páginas de productos individuales para la venta cruzada.

Combina este shortcode con el atributo posts_per_page para limitar el número de productos relacionados mostrados. También puedes utilizar el atributo columns para controlar el diseño de la salida.

Ejemplo: [related_products posts_per_page=”3″ columns=”3″]

10. Productos añadidos recientemente

[recent_products]

Utiliza este shortcode para mostrar los productos añadidos más recientemente en lugares estratégicos, como tu página de inicio o las páginas de destino de las categorías. 

Combínalo con los atributos limit, columns y orderby para personalizar el resultado.

11. Productos destacados

[featured_products]

Este shortcode es ideal para destacar productos destacados o promociones en tu sitio. 

Al igual que el shortcode [recent_products], acepta los atributos limit, columns y orderby para personalizar la visualización.

12. Productos más vendidos

[best_selling_products]

Destaca tus productos más vendidos con este shortcode para establecer una prueba social, mostrando a los clientes que estos artículos son populares entre otros compradores. 

Este enfoque ayuda a influir en las decisiones de compra de los visitantes, evita que el inventario se mueva lentamente y genera confianza en tu mercado objetivo.

Utiliza los atributos limit, columns y orderby para personalizar la visualización de tus productos.

13. Productos mejor valorados

[top_rated_products]

Este shortcode muestra una lista de los productos mejor valorados en función de las opiniones de los clientes. Al igual que el shortcode [best_selling_products], es ideal para influir en las decisiones de compra y generar confianza en los clientes.

Combina este shortcode con los atributos limit, columns y orderby para personalizar la salida.

14. Productos rebajados

[sale_products]

Si quieres crear una página o sección de ventas dedicada a promocionar productos con descuento, este shortcode te facilita el trabajo. 

Sólo tienes que añadir los atributos limit, columns y orderby para personalizar el aspecto de la sección.

15. Botón de añadir al carrito y URL

[add_to_cart]

El shortcode [add_to_cart] añade un botón de añadir al carrito para un producto específico en la página o entrada que elijas. 

De esta forma, los clientes pueden añadir fácilmente artículos a su carrito sin visitar páginas de productos individuales, lo que resulta útil para promocionar productos en páginas que no son de WooCommerce.

Utiliza el atributo id o sku para vincular un producto al botón Añadir al carrito. A continuación, puedes personalizar el aspecto del botón con atributos adicionales, como:

• style: personaliza el estilo del botón con CSS en línea, que sólo se aplica a ese elemento concreto.
• show-price: mostrar el precio del producto junto al botón de añadir al carrito cuando se establece en true.
• class: añade una clase CSS personalizada reutilizable para modificar la apariencia del botón.
• quantity: especifica la cantidad añadida al carrito.

El siguiente shortcode es un ejemplo de uso de estos atributos para mostrar el precio del producto junto al botón y centrar su colocación:

[add_to_cart id=”49″ show_price=”true” style=”display: block; text-align: center;”]

Si prefieres no utilizar un botón para la función de añadir al carrito, considera utilizar [add_to_cart_url] para crear un enlace en su lugar. Este shortcode genera una URL directa que añade automáticamente un producto específico al carrito cuando se visita.

Es ideal para fomentar las ventas en correos electrónicos o áreas de tu sitio de WooCommerce donde la colocación de botones podría ser limitada.

Como este shortcode crea un enlace, sólo tienes que añadir el atributo id o sku del producto elegido.

Ejemplo: [add_to_cart_url id=”123″]

16. Notificaciones de la tienda en páginas que no son de WooCommerce

[shop_messages]

Este shortcode te permite mostrar mensajes o notificaciones de WooCommerce en cualquier parte de tu sitio cuando los clientes interactúan con él. 

Estos mensajes pueden incluir alertas como “Producto añadido al carrito”, “Cupón aplicado correctamente” o mensajes de error si algo va mal durante el pago.

Cuando se coloca estratégicamente, el shortcode [shop_messages] puede ayudar a reducir la confusión en puntos críticos del recorrido del cliente y mejorar la experiencia de compra en general. También es útil en páginas personalizadas en las que los clientes deben ver avisos importantes.

Este shortcode no tiene atributos, así que sólo tienes que colocarlo en la ubicación que desees. Los mensajes son personalizables, pero para ello es necesario utilizar un filtro de WordPress o anular los archivos del tema en el directorio de notificaciones.

17. Campo de búsqueda de productos en vivo con filtros

[woocommerce_product_search]

WooCommerce Product Search, una extensión premium de WooCommerce, ofrece este shortcode para mostrar la funcionalidad de filtro de búsqueda de productos en tiempo real en páginas y entradas. 

A medida que los clientes escriben palabras clave en el campo de búsqueda, aparecen resultados coincidentes en tiempo real, mejorando la experiencia del usuario.

Por defecto, el shortcode [woocommerce_product_search] muestra los títulos de los productos con sus descripciones breves, los precios y los botones de añadir al carrito. Para personalizar la visualización, consulta la documentación de la extensión para ver los atributos disponibles.

Puedes ampliar la funcionalidad de búsqueda con varios filtros. Utiliza estos filtros con el shortcode [woocommerce_product_filter_products] para mostrar los resultados de la búsqueda de forma dinámica:

• [woocommerce_product_filter]: muestra un filtro de búsqueda de productos en vivo donde los visitantes pueden introducir palabras clave para refinar sus resultados.
• [woocommerce_product_filter_attribute]: muestra un filtro de atributos de producto en vivo, ideal para tiendas que venden productos variables.
• [woocommerce_product_filter_category]: incorpora un filtro de categoría de producto activo para que sólo se muestren los resultados especificados por categoría.
• [woocommerce_product_filter_price]: muestra un filtro de precios en vivo con un campo de entrada y un control deslizante para establecer el rango de precios deseado.
• [woocommerce_product_filter_tag]: añade un filtro de etiquetas de producto en vivo donde los visitantes pueden refinar los resultados por las etiquetas elegidas.
• [woocommerce_product_filter_rating]: incorpora un filtro de valoración de productos en vivo para mostrar los productos según la valoración media de los clientes.
• [woocommerce_product_filter_sale]: muestra un filtro en vivo para productos con descuento.
• [woocommerce_product_filter_stock]: muestra los productos que están en stock o disponibles para pedidos pendientes.
• [woocommerce_product_filter_reset]: añade un botón para borrar todos los filtros activos.

Problemas comunes con los shortcodes en WooCommerce

A pesar de agilizar la personalización del sitio web, los shortcodes de WooCommerce no son inmunes a los errores. Exploremos algunas de las formas más comunes de solucionar problemas con los shortcodes de WooCommerce.

Los shortcodes no se muestran correctamente

Esto es lo que puedes hacer para arreglar un shortcode que aparece como texto plano en la página en lugar de mostrar el contenido de WooCommerce previsto:

• Comprueba el formato del shortcode: insértalo en una página o entrada de blog utilizando un bloque de shortcode en el editor visual de WordPress. Si utilizas un editor de texto, comprueba que no haya errores tipográficos o etiquetas HTML adicionales que puedan interferir con el shortcode.
• Utiliza comillas dobles rectas (“): las comillas rizadas (”) no son estándar en el código y pueden hacer que el shortcode se rompa y se muestre incorrectamente.
• Actualiza WooCommerce y WordPress: las versiones obsoletas pueden no admitir ciertos códigos cortos, impidiendo que funcionen correctamente.
• Comprueba la compatibilidad del tema: si al cambiar a un tema predeterminado de WordPress se resuelve el problema, es posible que tu tema actual esté causando el problema. Ponte en contacto con el equipo de soporte del tema para buscar soluciones o cambia de tema para evitar futuros errores.
• Comprueba la compatibilidad de los plugins: desactiva todos los plugins excepto WooCommerce y comprueba si el shortcode funciona. Si funciona, reactiva los plugins uno a uno para identificar el problema. Considera la posibilidad de ponerte en contacto con el equipo de soporte del plugin en conflicto para informar del problema y encontrar una solución.

Los shortcodes no se están visualizando correctamente

Este problema suele ocurrir en páginas o entradas personalizadas de WooCommerce. Prueba estos métodos para solucionarlo:

• Verifica la colocación del shortcode: asegúrate de que la página en la que vas a colocar el shortcode no entra en conflicto con páginas existentes de WooCommerce, como las páginas Tienda o Pago. Además, comprueba la documentación del shortcode de WooCommerce para confirmar que el shortcode funciona en la zona elegida.
• Actualiza la configuración de los enlaces permanentes: ve a Configuración → Enlaces permanentes en el panel de control del administrador y haz clic en Guardar cambios para restablecer la estructura de enlaces permanentes. Esto borrará cualquier URL almacenada en caché y resolverá potencialmente el problema.

Los productos no aparecen en los shortcodes

Si los productos de WooCommerce no se muestran correctamente al utilizar shortcodes relacionados con productos, prueba estas soluciones:

• Comprueba la visibilidad de los productos: asegúrate de que los productos que quieres mostrar tienen el estado Publicado y están configurados como Públicos. Puedes comprobarlo en la sección Publicar del editor de WooCommerce.
• Verifica las categorías y etiquetas de los productos: asigna las categorías y etiquetas adecuadas a los productos, especialmente si estás filtrando por estos atributos en el shortcode.
• Utiliza los atributos correctos: comprueba dos veces los atributos utilizados en el shortcode para confirmar que coinciden con los productos que quieres mostrar.

Alternativas de shortcodes para WooCommerce

Aunque los códigos cortos son una herramienta útil para personalizar tu sitio de WooCommerce, hay alternativas más fáciles y visuales que quizá quieras probar. Aquí tienes algunas de las alternativas útiles. 

Bloques de WordPress

Desde que el editor de bloques Gutenberg se integró en WordPress, muchos plugins, incluido WooCommerce, ofrecen ahora sus funciones en formato de bloque. 

Los bloques son fáciles de añadir y permiten previsualizaciones en tiempo real, lo que los convierte en una solución apta para principiantes con un menor riesgo de errores que los shortcodes.

Para utilizar bloques, haz clic en Alternar insertador de bloques (+) y explora las opciones disponibles. Arrastra y suelta los bloques que necesites en el editor, y personaliza cada uno utilizando los ajustes de la barra lateral derecha.

Plugins de constructores de páginas de WordPress

Muchos plugins de constructores de páginas populares se integran con WooCommerce, lo que permite una personalización avanzada en páginas personalizadas con una sencilla interfaz de arrastrar y soltar.

También proporcionan diferentes elementos del sitio para añadir contenido dinámico sin codificar, ampliando tus opciones de personalización.

Aquí tienes algunos de los mejores plugins constructores de páginas para WooCommerce:

• Beaver Builder (versión premium a partir de 99 dólares/año)
• Divi (desde 70 dólares al/año o 199 dólares/pago único)
• Visual Composer (versión premium a partir de 49 dólares/año)
• SeedProd (versión premium a partir de 39.50 dólares/año)

Editor de sitios de WordPress

El editor de sitios integrado es una gran alternativa a los plugins constructores de páginas, accesible a través de Apariencia → Editor en el panel de control de WordPress. 

Utiliza un enfoque de edición basado en bloques, que te permite crear páginas con plantillas existentes o una colección de bloques y patrones, eliminando la necesidad de codificación.

Esta solución es ideal para mantener una tienda WooCommerce de rápido rendimiento, ya que no requiere plugins adicionales.

Conclusión

Los shortcodes de WooCommerce son una herramienta poderosa para personalizar tu tienda online. Son especialmente útiles para los propietarios de negocios que desean funciones avanzadas sin necesidad de codificar.

Si se utilizan correctamente con los atributos adecuados, pueden ampliar considerablemente la funcionalidad de tu tienda.

Esperamos que este artículo te haya ayudado a entender cómo utilizar eficazmente los shortcodes de WooCommerce y a solucionar cualquier problema relacionado con su uso. 

Si tienes alguna pregunta, consulta nuestra sección de preguntas frecuentes o deja un comentario a continuación.

Shortcode de WooCommerce – Preguntas frecuentes

Acá algunas de las preguntas más comunes sobre los shortcodes en WooCommerce.  

Todo el contenido de los tutoriales en este sitio web está sujeto a los rigurosos estándares y valores editoriales de Hostinger.