Los códigos cortos de WooCommerce te permiten mostrar información de tu tienda de formas nuevas y emocionantes. WooCommerce viene pre-construido con códigos cortos, y puedes instalar complementos para agregar más. Ya sea que desee enumerar productos en una mesa, mostrar el carrito en cualquier lugar de su sitio u otra cosa , ¡ha venido al lugar correcto!
Probablemente hayas encontrado códigos cortos antes, ya sea que seas nuevo en WordPress o lo hayas estado usando durante algún tiempo. Los códigos cortos son, como su nombre indica, piezas cortas de código que realizan algún tipo de función. Los códigos cortos de WooCommerce, por ejemplo, te permiten agregar funciones relacionadas con WooCommerce a páginas, publicaciones, barras laterales y áreas widgetizadas de WordPress en tu sitio web.
Si está buscando una manera de simplificar la experiencia de compra, puede hacerlo utilizando códigos cortos de WooCommerce. Pueden ayudarte a mejorar los flujos de compra de usuarios y optimizar tu tienda en línea para conversiones.
Por ejemplo, puedes usar códigos cortos de WooCommerce para:
- Mostrar una lista de tus productos mejor valorados en tu página de inicio.
- Exhiba productos relacionados siempre que un cliente exprese interés en un producto.
- Resalte los productos destacados en bloques de Gutenberg, barras laterales y otras áreas widgetized.
Con esto en mente, en esta guía completa, explicaremos cómo puedes usar códigos cortos de WooCommerce para ofrecer mejores experiencias de usuario y aumentar tus ganancias. En el camino, también explicaremos cuándo (y por qué) debe usar cada código corto. Veremos los códigos cortos que vienen con WooCommerce en sí, y los códigos cortos que puedes agregar con otros complementos.
Cómo usar los códigos cortos de WooCommerce
Los códigos cortos se ven y suenan un poco técnicos, pero en realidad están diseñados para que los use cualquiera. No necesitas ninguna habilidad de codificación.
Simplemente inserte el código corto en cualquier editor de texto dentro de WordPress, o en un bloque de ‘Código corto’ si está utilizando Gutenberg o un creador de páginas como Elementor o Visual Composer:
Puede combinar códigos cortos y mostrar varios códigos cortos en una sola página. Por ejemplo, puede combinar el código corto de seguimiento de pedidos con el código corto de la cuenta de usuario. Todo lo que tienes que hacer es insertar ambos códigos cortos en la misma página. Se vería algo como esto:
Lista de productos WooCommerce códigos cortos
También hay códigos cortos para enumerar productos de diferentes maneras en su tienda. Estos agregan flexibilidad adicional, para que no te quedes atascado con las vistas restringidas que obtienes en las páginas de tienda y categoría. En su lugar, puede usar códigos cortos de WooCommerce para enumerar uno o más productos literalmente en cualquier lugar de su sitio de WordPress, ya sea en una vista de lista basada en cuadrícula o tabla.
Código corto de productos WooCommerce
WooCommerce tiene un código corto que le permite enumerar productos específicos en un diseño de cuadrícula:
. También puede agregarle otros parámetros (como orderby y columnas) para personalizar la apariencia del front-end.
Usted puede elegir el número de productos de lista por fila. Por ejemplo, si desea mostrar seis productos en tres columnas ordenados por fecha en orden ascendente, usaría el código corto: . Del mismo modo, para mostrar los productos en orden descendente, simplemente reemplazaría ASC por DESC.
Código corto de vista rápida de WooCommerce
El código corto funciona a la perfección con el complemento WooCommerce Quick View Pro. Esto agrega botones de vista rápida a la lista de productos como una forma rápida de permitir que las personas realicen su compra sin salir de la página actual:
Todo lo que tienes que hacer es instalar el plugin WooCommerce Quick View Pro en tu sitio de WordPress y añadirá automáticamente botones de vista rápida al front-end. De esta manera, los clientes pueden ver los atributos y variaciones de los productos y agregar productos al carrito sin tener que navegar a la página de un solo producto.
Lea nuestra guía completa del código corto WooCommerce Quick View Pro.
Código corto de tabla de productos WooCommerce
Mientras que el código corto de productos WooCommerce incorporado es bastante flexible, solo te permite mostrarlos en un diseño de cuadrícula. Eso no es ideal para las tiendas que desean mostrar más productos por página, por ejemplo, si está creando un formulario de pedido rápido de una página o una tienda mayorista. En ese caso, podría estar mejor con un código corto de tabla de productos.
Aunque WooCommerce en sí no tiene un código corto de tabla de productos, puedes agregar uno fácilmente con el complemento de Tabla de productos WooCommerce. El código abreviado básico es y puedes configurarlo usando más de 50 opciones de código abreviado.
Vea la lista completa de opciones de código corto que obtiene con la Tabla de productos WooCommerce.
Código corto para agregar al carrito de WooCommerce
WooCommerce viene con un código corto incorporado que le permite insertar un botón para agregar al carrito para un producto específico en cualquier lugar que desee. Simplemente agregue el ID y / o SKU del producto que desea mostrar el botón agregar al carrito para:
Si desea incluir el precio del producto, use:
Para los productos simples, se mostrará un botón añadir al carro.
Para productos variables, mostrará un botón ‘Seleccionar opciones’:
Personalmente, no me gusta esto porque los clientes tienen que visitar la página de un solo producto para elegir sus variaciones. Es mejor usar la Tabla de productos de WooCommerce para enumerar uno o más productos variables en una tabla, con menús desplegables de variación:
De esta manera, los clientes pueden seleccionar opciones y agregarlas al carrito desde la página en la que se encuentran actualmente.
Código corto de categoría de producto
El código corto de categoría de producto enumera productos de una categoría específica en un diseño de cuadrícula estándar.
Este es el código abreviado para ello:
Si no te gusta el diseño de cuadrícula, o si quieres más control sobre qué información mostrar sobre cada uno producto, luego puede usar el código corto de la Tabla de productos WooCommerce en su lugar. El complemento de Tabla de productos WooCommerce viene con una opción de código corto de categoría, que puede usar para enumerar productos de categorías específicas solo:
A diferencia del shortcode integrado que viene con WooCommerce, puedes elegir qué columnas de información mostrar sobre cada producto y permitir a los clientes seleccionar variaciones y elegir cantidades directamente desde la tabla de productos. Esto hace que las compras sean mucho más rápidas y aumenta tu tasa de conversión.
Código corto de las categorías de productos de WooCommerce
Los códigos cortos de las categorías de productos enumeran sus categorías de productos, en lugar de los productos que contienen. Por ejemplo:
enumerará 4 de sus categorías de WooCommerce, ordenadas por nombre.
Echemos un vistazo a algunos de los atributos y códigos cortos que acompañan a las categorías de productos:
- el límite controla el número de categorías que se muestran.
- orderby controla el orden de clasificación; «nombre» y «fecha» son opciones válidas.
- el pedido representa el orden de las categorías de productos, es decir, «ASC «o»DESC».
- las columnas muestran el número de columnas en las que están dispuestas las categorías.
- hide_empty se utiliza para ocultar categorías de productos sin productos.
- parent solo te permite mostrar categorías de productos de primer nivel.Los identificadores
- representan que los identificadores de categoría se pueden establecer de acuerdo con solo los resultados especificados de salida.
Productos recientes
El código corto de productos recientes de WooCommerce muestra los productos que agregaste recientemente a tu tienda en línea.
Este es el código abreviado para productos recientes:
Sin embargo, si desea mostrar la fecha real en que se agregó el producto a su tienda en línea, o si desea más control, luego puede usar el complemento de Tabla de productos WooCommerce en su lugar.
Simplemente ordene la tabla de productos por fecha en orden descendente y use el número límite de productos para controlar cuántos productos incluir:
Si incluye una columna de fecha en la tabla, los clientes pueden ver fácilmente qué productos se agregaron recientemente a la tienda.
Productos destacados
El código corto de productos destacados para WooCommerce te permite enumerar productos destacados por separado del resto de tu tienda. Úselo para listar productos destacados en cualquier lugar que desee, por ejemplo, en publicaciones de blog u otras páginas.
productos Destacados son WooCommerce productos que tienen una estrella azul icono junto a ellos en la página de Productos:
Este es el código corto para mostrar productos destacados: . La salida debería verse algo como esto:
De nuevo, si no te gusta la cuadrícula de imágenes, puedes enumerar productos destacados utilizando el código corto del complemento de tabla de productos de WooCommerce:
enumera los productos destacados en un diseño de tabla, con las columnas de información que elija en la página de configuración del complemento.
Código corto de productos de venta de WooCommerce
El código corto de productos de venta te permite mostrar productos actualmente a la venta. Puedes mostrarlos fácilmente usando el código abreviado:
Código abreviado de productos más vendidos
Use el siguiente código abreviado de WooCommerce para mostrar sus productos más vendidos de todos los tiempos en una cuadrícula:
Los botones de vista rápida aparecen en el front-end si tiene instalado el plugin WooCommerce Quick View Pro en su sitio de WordPress.
Si prefiere un diseño de mesa, también puede enumerar los productos más vendidos o populares con el código corto de la Tabla de productos WooCommerce como este:
Lea nuestro tutorial completo sobre cómo enumerar productos populares con la Tabla de productos WooCommerce.
Productos mejor valorados
Puedes usar el código corto de Productos mejor valorados junto con la función integrada de reseñas y calificaciones de WooCommerce para mostrar tus productos mejor valorados. Usar el shortcode:
También puede enumerar los productos de mayor calificación en una vista de tabla utilizando el código corto de Tabla de productos WooCommerce:
Código corto de productos relacionados
Los productos relacionados son una lista de productos similares al producto que está navegando el cliente. Estos aparecerán directamente debajo del producto principal en la página de un solo producto, pero puedes usar el código corto de productos relacionados con WooCommerce para enumerar productos relacionados en otros lugares.
Usar el shortcode para mostrar productos relacionados en cualquier lugar en su sitio de WordPress.
Código corto del botón Agregar al carrito
El código corto WooCommerce te permite mostrar el precio y el botón agregar al carrito de un solo producto en función de su ID. Así es como se ve en el front-end:
Puede considerar agregar esto a un área widgetized en su tienda en línea o en una publicación de blog.
Este shortcode trabaja con el WooCommerce Quick View Pro plugin. Cuando usas ambos complementos juntos, los botones de vista rápida aparecerán junto a los botones agregar al carrito. Esto es ideal si está mostrando productos variables o si desea que los clientes puedan cambiar la cantidad antes de agregar al carrito. Los clientes pueden ver información adicional sobre el producto, elegir cantidades y variaciones y agregar al carrito desde una caja de luz de vista rápida. Esto los mantiene en la página original en lugar de llevarlos a una página de producto separada.
Si prefieres mostrar los botones agregar al carrito para varios productos, o si no te gusta el formato predeterminado con la imagen grande, puedes usar la Tabla de productos WooCommerce en su lugar.
Elija las columnas que desea incluir en la tabla de productos (¡asegúrese de incluir la columna agregar al carrito!) y use el código corto para insertarlo en cualquier lugar que desee. Utilice la opción incluir para elegir qué productos incluir, por ejemplo:
¿Puedo mostrar códigos cortos dentro de códigos cortos?
A veces, es posible que desee anidar códigos cortos , por ejemplo, para agregar el código corto del reproductor de audio de WordPress para que agregue un reproductor de música incrustado a la lista de productos.
Normalmente no puedes anidar los códigos cortos de WooCommerce. Sin embargo, puedes lograr esto usando el código corto de la Tabla de productos de WooCommerce para enumerar productos y agregar otros códigos cortos a los campos que estás mostrando dentro de la tabla de productos.
Por ejemplo, supongamos que desea enumerar 8 productos, con un reproductor de audio integrado para cada uno. Puede agregar el reproductor de audio a los campos de descripción corta o larga del producto y mostrarlos como columnas en la tabla. A continuación, utiliza el código corto de la Tabla de productos WooCommerce para enumerar esos productos específicos, incluida la columna de descripción corta o larga que contiene los reproductores de audio.
Para hacer que los códigos cortos de otros complementos funcionen dentro de la tabla de productos, asegúrese de habilitar la opción ‘Códigos cortos’ en la página de configuración de la tabla de productos WooCommerce:
Códigos cortos de página de WooCommerce
Comencemos por echar un vistazo a algunos de los códigos cortos de página de WooCommerce más comunes. Estos crean automáticamente páginas enteras, como el carrito o el pago.
Carrito de compras de WooCommerce
El código corto del carrito de compras de WooCommerce – – te permite mostrar el carrito de compras del cliente en el front-end de tu sitio web de WordPress. Puede agregarlo a páginas o publicaciones de WordPress o mostrarlo en áreas widgetized (como la barra lateral).
Se verá algo como esto en el front-end:
Cuando instalas y activas WooCommerce en tu sitio web de WordPress, crea automáticamente algunas páginas para ti, incluida la página del Carrito, que utiliza este código corto. Puede usar el código corto para agregar el carrito a partes adicionales de su sitio.
página de pago de WooCommerce
Puedes usar el código corto de pago de WooCommerce – – para generar una página de pago completa en tu sitio web de comercio electrónico. Esta página también se crea automáticamente para usted cuando instala WooCommerce. También puede usar el código corto para insertar el pago en otro lugar (por ejemplo, debajo de una tabla de productos para crear compras de una página).
El WooCommerce checkout abreviado incluye detalles de facturación, los detalles de la orden, y la opción de enviar a una dirección diferente.
seguimiento de pedidos de WooCommerce
WooCommerce permite a los propietarios de tiendas crear una página de seguimiento de pedidos utilizando el código corto . Aunque esta página no viene con WooCommerce fuera de la caja, usted puede simplemente crear una nueva página e insertar el código corto en el editor de texto para crear su propio. Debería verse algo como esto en el front-end:
Página de cuenta de usuario de WooCommerce
WooCommerce crea automáticamente una página de Mi cuenta cuando la instala por primera vez en su sitio web. Esto se hace utilizando el código corto . Puede usar el código corto para insertar el área de cuenta en ubicaciones adicionales en todo su sitio.
El código corto de Mi cuenta funciona como un formulario de inicio de sesión y registro para los usuarios que han cerrado sesión. Como resultado, también puede usar esto como un código corto de inicio de sesión de WooCommerce.
Agregue códigos cortos de WooCommerce más fácilmente con un botón de barra de herramientas
Mientras puede encontrar todo tipo de complementos de códigos cortos de WooCommerce en la web, le recomendamos usar el complemento gratuito de códigos cortos de WooCommerce de WooThemes. Una vez instalado y activado, este complemento agrega un botón desplegable TinyMCE al editor de texto de WordPress para brindarle un fácil acceso a todos los códigos cortos incorporados de WooCommerce. Esto le ahorra tener que copiar y pegar los códigos cortos.
Después de activar el plugin de códigos cortos de WooCommerce, verás un nuevo botón de código corto en tu editor de texto de WordPress. Una vez que haga clic en este botón, aparecerá una lista desplegable que contiene todos los códigos cortos estándar de WooCommerce:
Solución de problemas de códigos cortos de WooCommerce
A veces, pega el código corto de WooCommerce correcto en el editor de texto, pero no se muestra la salida correcta. En este caso, asegúrese de que no incrustó accidentalmente el código corto dentro de las etiquetas <pre>. Puede eliminar estas etiquetas entrando en el editor de texto HTML.
Los mejores códigos cortos de WooCommerce para Tabla de productos
Antes de terminar, aquí hay un desglose rápido de los códigos cortos de WooCommerce incorporados más útiles que puede usar con el complemento de Tabla de productos WooCommerce y los complementos de Vista rápida Pro de WooCommerce:
| Plugin Required | Shortcode name | WooCommerce shortcode | Description |
| None | Shopping Cart | Displays a shopping cart on the front-end of the website | |
| None | Checkout Page | Displays a complete checkout page. | |
| None | Order Tracking | Displays an order tracking form for your e-commerce website. | |
| Ninguno | Página de cuenta de usuario | Muestra una página «Mi cuenta» para usuarios | |
| Tabla de productos WooCommerce | Botón de Precio/Carrito de productos | Añade un botón de precio de producto (o añadir al carrito) a la tabla de productos. | |
| WooCommerce Quick View Pro | Código corto de múltiples productos | Muestra varios productos (seleccionados) en una página o publicación con botones de vista rápida. | |
| WooCommerce Quick View Pro | Categoría de Producto | Muestra a categorías específicas de productos en el front-end del sitio web. | |
| WooCommerce Quick View Pro | Categoría de producto por Slug | Muestra productos de una categoría de producto específica junto con botones de vista rápida. | |
| WooCommerce Quick View Pro | Productos recientes | Muestra una lista de los productos más recientes que ha agregado a su tienda en línea junto con botones de vista rápida. | |
| WooCommerce Quick View Pro | Productos Destacados | Muestra una lista de los productos destacados con vista rápida de los botones. | |
| WooCommerce Quick View Pro | Producto de venta | Muestra una lista de todos los productos a la venta con botones de vista rápida. | |
| WooCommerce Quick View Pro | Producto más vendido | Muestra una lista de sus productos más vendidos con botones de vista rápida. | |
| WooCommerce Quick View Pro | parte Superior Nominal del Producto | Muestra una lista de las top rated productos con vista rápida de los botones. | |
| WooCommerce Quick View Pro | Producto relacionado | Muestra una lista de productos relacionados con botones de vista rápida en páginas de productos individuales. | |
| WooCommerce Quick View Pro | Muestra una «Añadir Al Carrito» botón de un solo producto, utilizando el ID de producto |
Recarga tu tienda WooCommerce con códigos cortos!
Los códigos cortos de WooCommerce son pequeños fragmentos de código que te permiten agregar funciones nítidas a tu tienda en línea. Puedes agregarlos a páginas de compras, publicaciones o áreas ampliadas de tu sitio web (como la barra lateral). Algunos códigos cortos de WooCommerce también admiten parámetros que puedes usar para personalizar la salida.
Sin embargo, no todos los códigos cortos de WooCommerce ofrecen una buena experiencia de usuario. En lugar de pegarlos tal cual, puede considerar usarlos junto con el complemento WooCommerce Product Table o el complemento WooCommerce Quick View Pro.
Por ejemplo, es la única manera de permitir a los clientes elegir cantidades y variaciones fuera de la página del producto, y le permite mostrar información adicional sobre cada producto y controlar el tamaño de la imagen. Si desea flexibilidad adicional, puede instalar la Tabla de productos WooCommerce y comenzar a experimentar con sus más de 50 opciones de código corto. Esto le dará un aspecto más ordenado y organizado en el front-end, al tiempo que garantiza que su sitio mejore la experiencia de compra del cliente.
Para recapitular, los códigos cortos de WooCommerce le permiten mejorar el recorrido del comprador, ver más productos a la vez y facilitar a los clientes navegar rápidamente por el proceso de pago. También puedes probar otros complementos de código corto de WooCommerce (como códigos cortos de cupones de WooCommerce) que te permiten aprovechar funciones avanzadas como agregar códigos de cupón a tu tienda en línea.