El mundo del comercio electrónico se basa en la flexibilidad. Una tienda online exitosa debe poder cambiar, adaptar y destacar productos específicos en cualquier momento. Aunque muchos propietarios de tiendas creen que esto requiere un desarrollador, lo cierto es que una potente herramienta integrada en WooCommerce lo facilita: el shortcode de producto de WooCommerce. Esta sencilla pero versátil herramienta permite mostrar productos, crear cuadrículas personalizadas y crear páginas dinámicas sin escribir ni una sola línea de código.
Esta guía completa te enseñará a dominar el [products] . Aprenderás a usar sus atributos para crear presentaciones de productos impactantes y personalizadas para cualquier página, publicación o área de widgets. Tanto si eres principiante y buscas añadir algunos productos a tu página de inicio como si eres un usuario avanzado que necesita crear una landing page compleja y filtrable, este artículo es tu referencia completa.
Fundamentos: Lista de códigos cortos esenciales para WooCommerce
Antes de profundizar en el [products] , entendamos qué son los shortcodes y su función en WordPress. Un shortcode es un pequeño fragmento de código entre corchetes, como [shortcode] . WordPress lo reemplaza como un marcador de posición con contenido dinámico o funcionalidad al visualizar la página. Puedes usar shortcodes en cualquier lugar donde puedas añadir texto, incluyendo el editor clásico, los bloques de Gutenberg y constructores de páginas como Elementor .
Aunque nos centramos en el [productos] , WooCommerce incluye una lista completa de shortcodes para las páginas esenciales de la tienda. Estos shortcodes suelen colocarse en las páginas que WooCommerce crea automáticamente durante la configuración:
[woocommerce_cart]– Muestra el contenido de la página del carrito.[woocommerce_checkout]– Muestra el formulario de pago.[woocommerce_my_account]– Representa el panel de la cuenta del cliente.[woocommerce_order_tracking]– Proporciona un formulario para que los clientes rastreen sus pedidos.
El [products] es el más versátil de todos. Es clave para mostrar productos en páginas y publicaciones distintas a la página principal de la tienda. Su estructura básica es simplemente [products] . Por sí solo, este shortcode mostrará una cuadrícula de tus productos más recientes. Sin embargo, su verdadero poder reside en sus atributos.
Explorar más: Cómo configurar un carrito de compras de WP para ventas en línea fluidas
Transforme sus páginas de productos con códigos cortos potentes
Dale vida a tu tienda WooCommerce con diseños dinámicos y experiencias de compra fluidas.
La anatomía del código corto [productos]
La verdadera flexibilidad del shortcode de producto de WooCommerce reside en sus atributos. Los atributos son parámetros que se añaden entre corchetes para controlar qué productos se muestran y su aspecto. Se pueden considerar como comandos que dan instrucciones específicas al shortcode.
Aquí tienes un vistazo rápido a los atributos más comunes que usarás. Esta es tu lista esencial de shortcodes de productos de WooCommerce.
| Atributo | Función | Valores posibles |
límite | Establece el número de productos a mostrar. | Cualquier número entero positivo (por ejemplo, 8, 12) |
columnas | Establece el número de columnas en la cuadrícula. | 1 a 6 |
ordenar por | Especifica cómo se ordenan los productos. | fecha , título , id , popularidad , calificación , rand |
orden | Establece el orden de clasificación. | ASC (Ascendente) o DESC (Descendente) |
identificaciones | Muestra productos específicos por ID. | Lista separada por comas de ID de productos (por ejemplo, "1,2,3") |
skus | Muestra productos específicos por SKU. | Lista de SKU de productos separados por comas (p. ej., "sudadera-01, camiseta-02" ) |
categoría | Filtros por categoría de producto, slug o ID. | Lista de categorías separadas por comas (p. ej., "ropa, accesorios" ) |
en venta | Muestra productos que están actualmente en venta. | verdadero |
visibilidad | Filtros por visibilidad del producto. | visible , catálogo , búsqueda , destacado |
paginar | Habilita la paginación de una lista de productos. | verdadero |
clase | Agrega una clase CSS personalizada a la cuadrícula. | Cualquier nombre de clase CSS (por ejemplo, "my-custom-grid" ) |
Recuerda siempre usar comillas rectas ( " ) alrededor de los valores de tus atributos. Un error común es usar comillas curvas, ya que pueden romper el código corto.
Lea también: Cómo solucionar que los productos de WooCommerce no se muestren en la página de la tienda: soluciones rápidas
Dominar la selección de productos: casos prácticos y avanzados de uso de códigos cortos
Ahora, observa ejemplos reales de shortcodes de productos de WooCommerce y aprende a usarlos eficazmente. Estos ejemplos te ayudarán a crear secciones de producto dinámicas y personalizadas en cualquier página.
Mostrando productos destacados
El shortcode de productos destacados de WooCommerce es una excelente manera de mostrar tus artículos más vendidos o promocionados en la página de inicio. Para usarlo, primero debes marcar los productos como "destacados" en el panel de WooCommerce. Ve a "Productos", coloca el cursor sobre un artículo y haz clic en el icono de la estrella. La estrella se volverá azul, indicando que el producto está destacado.
Código corto: [products visibility="featured"]
Este shortcode muestra todos los productos que has marcado como destacados. Puedes combinarlo con otros atributos para refinar la visualización.
Ejemplo: Mostrar 8 productos destacados en una cuadrícula de 4 columnas, ordenados aleatoriamente. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Productos específicos por ID o SKU
A veces necesitas mostrar uno o dos productos específicos, por ejemplo, en una entrada de blog o en una landing page . Aquí es donde el shortcode de ID de producto de WooCommerce resulta útil. Puedes usar el ids con una lista de ID de producto separados por comas.
Código corto: [products ids="12, 35, 78"]
También puedes utilizar SKU de productos, que pueden ser más fáciles de recordar.
Código corto: [products skus="shirt-01, pants-02"]
Cómo encontrar IDs y SKUs: En tu panel de WordPress, ve a WooCommerce → Productos. El ID del producto aparece en una pequeña columna junto al nombre del producto. También puedes pasar el cursor sobre el título del producto para verlo en la URL. El SKU se encuentra en la página de edición del producto, en la sección "Datos del producto".
Filtrar por categoría
El shortcode de categoría de producto de WooCommerce es uno de los atributos más potentes. Permite crear secciones dedicadas a un tipo de producto específico, como la sección "Camisetas nuevas" o la página "Accesorios".
Código corto: [categoría de productos="camisetas"]
Para encontrar el slug de una categoría, ve a WooCommerce → Productos → Categorías . El slug es un nombre fácil de usar para la URL de la categoría.
Ejemplo: Mostrar 9 productos de las categorías "sudaderas" y "camisetas" en 3 columnas. [categoría de productos="sudaderas, camisetas" límite="9" columnas="3"]
Exhibición de productos en oferta y más vendidos
Crear una página dedicada a las ventas es una excelente estrategia de marketing. Puedes lograrlo fácilmente con un shortcode.
Código corto para productos en oferta: [products on_sale="true"]
Del mismo modo, puede mostrar sus productos de mayor rendimiento.
Código corto para los más vendidos: [products best_selling="true"]
Combinación de filtros para pantallas personalizadas
La verdadera magia surge al combinar múltiples atributos. Esto permite crear cuadrículas de productos precisas y atractivas.
Ejemplo: Mostrar los 12 productos más populares y en oferta de la categoría "ropa" en 4 columnas. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Este control detallado le permite crear una experiencia de compra única que mantiene a los clientes interesados.
Opciones de visualización avanzadas: paginación, ordenación y estilo personalizado
El código corto de producto WooCommerce selecciona productos y controla su apariencia y comportamiento en una página.
Paginación para listas de productos grandes
Necesita paginación en páginas con muchos productos para evitar tiempos de carga y una mala experiencia de usuario . El paginate gestiona esto a la perfección.
Código corto: [productos paginate="true" per_page="12"]
El per_page funciona con paginate para especificar cuántos artículos aparecen en cada página. Este es un elemento crucial del shortcode de producto de WooCommerce con funcionalidad de paginación.
Ordenar y clasificar
Puede dictar el orden de sus productos utilizando los atributos orderby y order
orderby="price": ordena los productos por su precio.orderby="rating": ordena por calificación promedio del cliente.orderby="popularity": ordena por el número de compras.orderby="rand": baraja los productos aleatoriamente en cada carga de página.
El orden El atributo dicta la dirección de la clasificación. order="ASC" para ascendente (por ejemplo, precio bajo a alto) y order="DESC" para descendente (por ejemplo, precio alto a bajo).
Ejemplo: Mostrar 10 productos ordenados por calificación más alta primero. [límite de productos="10" orden por="calificación" orden="DESC"]
Estilo personalizado con clases
Para diseñadores y desarrolladores, el de clase es una herramienta potente para personalizar el shortcode de productos de WooCommerce. Permite añadir una clase CSS única al contenedor de la cuadrícula de productos. Esto permite aplicar estilos personalizados a la salida del shortcode sin afectar a otras cuadrículas de productos del sitio.
Código corto: [productos clase="hero-products"]
Luego, en su CSS personalizado, puede apuntar a esta clase: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Consejos de compatibilidad
El shortcode de producto de WooCommerce funciona con el editor clásico, el editor de bloques de Gutenberg (mediante un bloque dedicado a "Shortcode") y la mayoría de los principales creadores de páginas. Además, está diseñado para ser responsivo, lo que significa que se adapta a diferentes tamaños de pantalla. Sin embargo, siempre prueba tus shortcodes en computadoras de escritorio y dispositivos móviles para asegurarte de que se muestren correctamente.
Casos de uso estratégico: dónde y por qué usar códigos cortos de productos
Conocer la sintaxis es una cosa; usarla estratégicamente es otra. Aquí tienes algunas ideas para mejorar tu tienda usando el shortcode de producto de WooCommerce .
- Página de inicio: crea secciones dedicadas a los artículos “Nuevos llegados”, “Los más vendidos” y “En oferta” para guiar a los visitantes a tus productos más esenciales de inmediato.
- Entradas de blog: Inserta un producto individual o una pequeña cuadrícula de productos en una entrada de blog. Si escribes una entrada de blog sobre el estilo de una chaqueta nueva, usa un código corto para mostrar esa chaqueta específica y otros productos complementarios directamente debajo de la entrada.
- Páginas de destino de categorías: Crea páginas de destino personalizadas para una categoría específica. Puedes añadir un texto único y usar un código corto para mostrar solo los productos de esa categoría.
- Páginas de destino de marketing: para una nueva campaña, puede crear una página de destino que presente productos con una etiqueta específica o de una nueva colección, utilizando un código corto de producto WooCommerce personalizado para impulsar las conversiones.
Leer más: Cómo agregar una opción de propina en la página de pago de WooCommerce
Mejores prácticas de resolución de problemas y optimización
Incluso con una herramienta sencilla como un shortcode, pueden surgir problemas. Aquí te explicamos cómo solucionar problemas comunes y asegurar el buen rendimiento de tu sitio web.
- Revisar errores tipográficos: Un corchete faltante, un error tipográfico en el nombre de un atributo o comillas incorrectas pueden hacer que el shortcode se muestre como texto sin formato. Revisa el código.
- Buscar IDs y slugs: Asegúrate de usar los IDs de producto, SKUs y slugs de categoría correctos. La forma más sencilla de verificarlos es en el panel de WordPress.
- Almacenamiento en caché y rendimiento: Mostrar demasiados productos con un solo shortcode puede ralentizar tu sitio. Usa los
de límiteypaginaciónpara controlar la cantidad de productos. Usa un buen plugin de almacenamiento en caché para acelerar la carga de las páginas.
- Necesidades avanzadas: Si necesitas filtrado dinámico, paginación AJAX u otras funciones complejas, podrías necesitar un plugin dedicado. Herramientas como WooCommerce Product Table o WooCommerce Product Filters pueden ampliar significativamente la funcionalidad del shortcode.
Conclusión: Tu kit de herramientas para exhibiciones dinámicas de productos en WooCommerce
El shortcode de producto de WooCommerce es revolucionario para los propietarios de tiendas. Ofrece una forma sencilla pero eficaz de crear presentaciones de productos dinámicas, atractivas y altamente personalizadas en tu sitio web. Al dominar el [products] y sus atributos, puedes transformar tus páginas estáticas en atractivas herramientas de comercialización.
Empieza con lo básico, como una sección de productos destacados en tu página de inicio, y luego experimenta con combinaciones más avanzadas para crear landing pages únicas e integrar productos estratégicamente en el contenido de tu blog. Este shortcode te permite crear una tienda online profesional e intuitiva sin necesidad de modificar el código. ¡Guarda esta guía en tus favoritos y empieza a crear mejores presentaciones de productos hoy mismo!
Preguntas frecuentes sobre los códigos cortos de productos de WooCommerce
¿Qué es un código corto de WooCommerce?
Un código corto de WooCommerce es un pequeño fragmento de texto entre corchetes (por ejemplo, [productos] WordPress lo reemplaza con contenido dinámico de su tienda WooCommerce, como listas de productos, contenido del carrito o formularios de pago.
¿Cómo uso la lista de códigos cortos de productos de WooCommerce?
Puedes usar la lista de códigos cortos de productos de WooCommerce añadiendo el [products] y sus atributos a cualquier página, entrada o área de widgets de tu sitio de WordPress. Cada atributo te permite filtrar o personalizar la visualización del producto.
¿Cómo puedo mostrar productos de una categoría específica?
Puedes usar el category dentro del [products] . Por ejemplo, [products category="clothing"] mostrará todos los productos de la categoría "clothing". Este es el shortcode de la categoría de producto de WooCommerce.
¿Puedo mostrar productos de una etiqueta o atributo específico usando un código corto?
Sí. El [productos] permite filtrar por slugs de etiquetas ( tag="new-collection" ) e incluso por atributos personalizados y sus términos. Esto proporciona un alto nivel de control sobre los productos que se muestran.
¿Cómo uso un código corto de productos destacados de WooCommerce?
Para usar el shortcode de productos destacados de WooCommerce, primero márcalos como destacados haciendo clic en el icono de estrella junto a ellos en la lista de productos. Luego, usa el shortcode [products visibility="featured"] en cualquier página o entrada.
