WooCommerce es el principal plugin de comercio electrónico para WordPress, que permite a millones de empresas transformar sus sitios web en sólidas tiendas online. Sin embargo, mucha gente desconoce sus shortcodes.
Esta guía explica todo lo que necesitas saber sobre los shortcodes de WooCommerce, desde shortcodes esenciales que muestran productos y gestionan carritos hasta personalizaciones avanzadas para experiencias de usuario a medida.
Exploremos cómo estos pequeños fragmentos de código pueden influir significativamente en tu sitio web de comercio electrónico.
¿Qué son los shortcodes?
Los shortcodes se introdujeron en WordPress 2.5 en 2008. Son pequeños fragmentos de código encerrados entre corchetes como este: [shortcode]. Actúan como marcadores de posición que indican a WordPress que ejecute una función específica o muestre cierto contenido de forma dinámica.
Por ejemplo, en lugar de programar manualmente una compleja cuadrícula de productos, puedes utilizar un shortcode para crearla y mostrarla al instante en tu sitio web. Esto ahorra tiempo y reduce la posibilidad de errores, facilitando el mantenimiento y la actualización de tu sitio.
A lo largo de los años, los shortcodes han evolucionado, haciéndose más potentes y versátiles. WooCommerce aprovecha esta característica, ofreciendo una gama de shortcodes adaptados específicamente a la funcionalidad del comercio electrónico.
Primeros pasos con los shortcodes de WooCommerce
Para utilizar los shortcodes de WooCommerce en tu sitio de WordPress, asegúrate de que el plugin WooCommerce está instalado y activado.
Para ello, accede a tu panel de WordPress, ve a Plugins > Añadir nuevo y busca «WooCommerce» A continuación, haz clic en Instalar Ahora en el plugin WooCommerce y Actívalo.
Por último, puedes seguir el asistente de configuración de WooCommerce para configurar los ajustes básicos, como los detalles de la tienda, los métodos de pago y las opciones de envío.
Cuando instalas el plugin WooCommerce, tu sitio de WordPress se actualiza automáticamente con las páginas Carrito, Pago y Mi cuenta. Sin embargo, puedes hacer más con tus productos, y eso es lo que exploraremos con los shortcodes.
La sintaxis básica de los shortcodes
Los shortcodes de WooCommerce suelen incluir atributos adicionales para personalizar su salida. Esta es la estructura básica:
[shortcode attribute1="value1" attribute2="value2"]Por ejemplo, el shortcode [products limit="4" columns="2"] muestra cuatro productos en un diseño de dos columnas.
Cómo añadir shortcodes en entradas, páginas y widgets
Los shortcodes pueden añadirse casi en cualquier parte de WordPress. Puedes añadirlos a una entrada o a una página simplemente escribiéndolos o pegándolos en cualquier editor de texto dentro de WordPress o en un bloque de shortcodes si utilizas Gutenberg o cualquier constructor de páginas.
Para esta guía, vamos a utilizar Gutenberg:
- Ve a Entradas o Páginas en el panel de control de WordPress.
- Abre la entrada/página donde quieras añadir el shortcode.
- Haz clic en el icono + para añadir un nuevo bloque.
Pasos para añadir un shortcode con bloques de Gutenberg en WordPress. - Busca y selecciona el bloque Shortcode.
- Pega tu shortcode en el bloque.
Por ejemplo, supongamos que quieres mostrar una cuadrícula de tus últimos productos en tu página de inicio. Utilizando el editor de bloques, introducirías el shortcode: [products limit="3" columns="3"] y Actualizarías o Publicarías tu página.
Esto creará una cuadrícula con tres productos mostrados en una columna, ofreciendo una forma dinámica y atractiva de mostrar tus últimas ofertas.
También puedes añadir shortcodes a los widgets navegando a Apariencia > Widgets. Añade un widget de Texto a la zona de widgets que desees (barra lateral, pie de página, etc.). Introduce tu shortcode en el cuadro de texto dentro del widget y guarda el widget.
Shortcodes esenciales de WooCommerce
WooCommerce proporciona una variedad de shortcodes que te permiten mostrar productos, gestionar el carrito de la compra y mejorar el proceso de pago.
Exploremos los shortcodes más esenciales de WooCommerce, sus atributos y ejemplos detallados para ayudarte a utilizarlos eficazmente en tu tienda.
Shortcodes de visualización de productos
El shortcode [products] es uno de los shortcodes más versátiles de WooCommerce. Te permite mostrar una lista de productos en función de varios criterios.
Tiene muchos atributos que te permiten mostrar los productos como desees:
limit— Número de productos a mostrar. El valor por defecto es-1(mostrar todos).columns— Número de columnas. El valor por defecto es4.orderby— Ordenar los productos por criterios específicos comodate,title,price,popularity, etc.order— Orden de los productos. Puede serASC(ascendente) oDESC(descendente).category— Slug de la categoría del producto.tag— Slug de la etiqueta del producto.paginate— Permite la paginación. Puede sertrueofalse. Por defecto esfalse.
Por ejemplo, si quieres mostrar los últimos ocho productos en un diseño de cuatro columnas, ordenados por la fecha en que se añadieron en orden descendente. Puedes utilizar el siguiente shortcode.
[products limit="8" columns="4" orderby="date" order="DESC"]
Si además quieres habilitar la paginación para que el usuario pueda acceder a otros productos mientras se muestra el límite, puedes utilizar el atributo paginate.
[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]También puedes querer mostrar productos de una categoría específica. El atributo category te permite hacerlo. El shortcode siguiente muestra seis productos de la categoría «accesorios» en un diseño de tres columnas:
[products category="accesorios" limit="6" columns="3"]
Se muestran cinco productos porque actualmente sólo hay cinco en la categoría. Habrá siete disponibles cuando se añadan dos más a esa categoría, pero sólo aparecerán seis debido al límite.
El shortcode [product] también puede utilizarse para mostrar un único producto en función de su ID o SKU añadiendo el atributo id o sku. Por ejemplo, el siguiente shortcode muestra el producto con el ID 22.
[product id="22"]![Utilizar el shortcode [product] para mostrar un único producto por ID.](https://kinsta.com/wp-content/uploads/2024/06/single-product-id.png)
Si quieres mostrar más de un producto de forma selectiva, puedes utilizar los atributos ids y skus.
[products columns="3" ids="22,35,26"]Este shortcode muestra productos con los ID 22, 35, y 26.
Otro shortcode que puedes necesitar es el shortcode [product_page]. Este shortcode es similar a [product] pero muestra toda la página del producto, incluyendo pestañas, productos relacionados y opiniones. Por ejemplo, vamos a mostrar la página completa del producto con el ID 22.
[product_page id="22"]
Esto puede ser útil para una sección de producto característica dentro de una página o entrada.
También tienes acceso a un atributo cat_operator que te permite controlar cómo se filtran los productos en función de las categorías. Las opciones disponibles para este atributo son:
AND— Mostrar los productos de las categorías elegidas.IN— Mostrar los productos que pertenecen a cualquier categoría elegida (valor por defecto).NOT IN— Mostrar los productos que no pertenecen a las categorías elegidas.
Por ejemplo, si quieres mostrar productos de las categorías «ropa» y «accesorios», puedes utilizar el operador AND:
[products category="ropa, accesorios" cat_operator="AND"]También puedes excluir productos de una categoría concreta con el operador NOT In. Por ejemplo, si quieres mostrar todos los productos excepto los de la categoría «ropa».
[products category="ropa" cat_operator="NOT IN"]Shortcodes de carrito y pago
WooCommerce proporciona shortcodes específicos para las páginas esenciales del comercio electrónico, como el carrito, el proceso de pago y la cuenta de usuario.
Por ejemplo, el código corto [woocommerce_cart] puede mostrar la página del carrito de la compra, incluidos todos los artículos del carrito, las cantidades y el precio total.
Este shortcode debe colocarse en la página designada como página de tu carrito.
Del mismo modo, el código corto [woocommerce_checkout] muestra la página de pago en la que los clientes pueden introducir sus datos de facturación y envío y realizar sus pedidos.
Este shortcode debe colocarse en la página designada como página de pago.
El shortcode [woocommerce_my_account] puede utilizarse para mostrar la cuenta del usuario, incluyendo secciones para pedidos, descargas, direcciones y detalles de la cuenta.
Por último, el shortcode[woocommerce_order_tracking] te ayuda a mostrar un formulario en el que los clientes pueden introducir su ID de pedido y su correo electrónico para hacer un seguimiento de sus pedidos.
Este shortcode puede colocarse en cualquier página en la que quieras que los clientes hagan un seguimiento de sus pedidos.
Shortcode de categorías de productos
Cuando quieras mostrar una lista o cuadrícula de categorías de productos, puedes utilizar el shortcode [product_categories]. Tiene los siguientes atributos que se pueden utilizar para personalizar su apariencia:
number— Número de categorías a mostrar.columns— Número de columnas.orderby— Ordenar las categorías por criterios específicos.order— Orden de las categorías. Puede serASCoDESC.hide_empty— Ocultar categorías vacías. Puede ser1(verdadero) o0(falso).
Por ejemplo, si quieres mostrar las categorías de productos en una cuadrícula, puedes utilizar el siguiente shortcode:
[product_categories number="12" columns="4" orderby="name" order="ASC"]Este shortcode muestra 12 categorías de productos en una cuadrícula de cuatro columnas, ordenadas por nombre en orden ascendente.
Si añades miniaturas, aparecerán aquí, mejorando el aspecto de tu sitio. Puedes añadir miniaturas accediendo a Productos > Categorías > editando una categoría concreta y, a continuación, desplazándote hasta el campo Miniatura para subir la imagen.
Del mismo modo, si quieres mostrar productos de una categoría específica, puedes utilizar el shortcode [product_category]. Éste acepta un atributo per_page, que especifica el número de productos a mostrar por página. También acepta category para especificar el slug de la categoría del producto y columns para el número de columnas.
Por ejemplo, este código abreviado muestra ocho productos de la categoría «ropa» en un diseño de cuatro columnas.
[product_category category="ropa" per_page="8" columns="4"]
Shortcodes avanzados de WooCommerce
Más allá de los shortcodes básicos de visualización de productos, WooCommerce ofrece shortcodes avanzados que proporcionan un mayor control y opciones de personalización. Estos shortcodes te permiten adaptar la visualización y funcionalidad de tu tienda WooCommerce a tus necesidades específicas.
Personalizar la visualización de productos
El shortcode[products] es muy flexible y permite varias combinaciones de atributos para filtrar y mostrar los productos de forma diferente.
Aquí tienes algunos atributos más que puedes utilizar:
on_sale— Si quieres mostrar los productos en oferta.trueofalse.best_selling— Si quieres mostrar los productos más vendidos.trueofalse.top_rated— Si quieres mostrar los productos mejor valorados.trueofalse.
Con esto, puedes mostrar los productos en venta.
[products on_sale="true" limit="8" columns="4"]También puedes mostrar los productos más vendidos de una categoría utilizando el siguiente shortcode:
[products category="accesorios" best_selling="true" limit="6" columns="3"]Este shortcode muestra seis productos más vendidos de la categoría «accesorios» en un diseño de 3 columnas.
Shortcodes para casos de uso específicos
Los shortcodes de WooCommerce pueden adaptarse para satisfacer casos de uso específicos, proporcionando contenido dinámico basado en varios criterios. Por ejemplo, el shortcode [recent_products] puede utilizarse para mostrar los productos añadidos recientemente a tu tienda WooCommerce.
[recent_products limit="5" columns="5"]Este shortcode muestra los cinco productos añadidos más recientemente en un diseño de cinco columnas.
Del mismo modo, el shortcode [featured_products] se puede utilizar para mostrar los productos marcados como destacados en tu tienda WooCommerce.
[featured_products limit="6" columns="3"]
Este shortcode muestra seis productos destacados en un diseño de tres columnas.
Puedes marcar un producto como destacado navegando a la página de productos y marcándolo con una estrella, como se muestra en la imagen siguiente.
Supongamos que estás realizando ofertas de algunos productos concretos. Puedes utilizar el shortcode [sale_products] para mostrar los productos actualmente en oferta.
[sale_products limit="8" columns="3"]Para establecer un precio de oferta para tus productos, ve a Productos > Todos los productos y haz clic en el artículo que quieras ofrecer con descuento. A continuación, desplázate hasta la sección Datos del producto.
Si introduces cualquier valor en el campo Precio de oferta de WooCommerce ($), ese será el precio que verán los visitantes en el front end de la tienda. Este campo anula el valor del Precio normal ($). Si no vas a realizar una oferta, deja este campo vacío para no descontar productos accidentalmente.
Si tienes un plugin que te ayuda a configurar los productos más vendidos, también puedes utilizar el shortcode [best_selling_products] para mostrar los productos más vendidos en tu tienda WooCommerce.
[best_selling_products limit="10" columns="4"]El shortcode [top_rated_products] también puede mostrar los productos mejor valorados en tu tienda WooCommerce.
[top_rated_products limit="4" columns="2"]Resumen
Los shortcodes de WooCommerce son potentes herramientas que mejoran la funcionalidad de tu tienda online. Dominar estos shortcodes te permite personalizar la visualización de los productos, gestionar el carrito de la compra y optimizar el proceso de pago.
Siéntete libre de experimentar con diferentes combinaciones de shortcodes para encontrar la configuración perfecta para tu tienda. Con estas herramientas, puedes crear un sitio WooCommerce dinámico y atractivo que satisfaga las necesidades de tus clientes.
Después de crear la tienda online perfecta para tu negocio, deberás evitar una situación en la que tu tienda sufra ataques, sea lenta o se desconecte ocasionalmente, afectando al negocio.
El plugin WooCommerce a veces puede ralentizar los sitios de WordPress, especialmente en el caso de tiendas grandes con muchos productos. Afortunadamente, con Kinsta como proveedor de alojamiento para tu tienda WooCommerce, no tendrás que preocuparte por esto.
Deja una respuesta