WooCommerce Shortcodes – ¿Qué son y como se usan?

WooCommerce es un poderoso complemento de comercio electrónico para WordPress. Viene con muchas características y opciones, para facilitar las ventas en línea tanto para los propietarios de las tiendas como para los clientes. 

Uno de los beneficios principales de WooCommerce, es que ofrece mucha flexibilidad, especialmente cuando se trata de agregar códigos abreviados (WooCommerce Shortcodes) a cualquier página de tu tienda.

¿Qué son los códigos cortos o Shortcodes?

Los códigos abreviados de WooCommerce, conocidos también como Shortcodes, son pequeños fragmentos de código que pueden realizar varias tareas dentro de tu tienda en WooCommerce. Por ejemplo, el shortcode [products] se puede usar para mostrar una lista de productos en una determinada página. 

Muchos complementos y temas diferentes, incluyendo WooCommerce, usan códigos cortos. Como tal, el código abreviado a menudo estará precedido por el nombre del propio complemento para diferenciarlo de otros, como este ejemplo:

[pluginname_shortcode]

Cuando instalas WooCommerce por primera vez y posteriormente utilizas el asistente de configuración, WooCommerce crea automáticamente varias páginas por defecto. Si ingresas a editar cualquiera de estas páginas, notarás que contienen un código abreviado como el que te muestro a continuación.

Cuando se visita la página, el shortcode carga el contenido relevante. Por ejemplo, si esa página usa el shortcode [woocommerce_cart] entonces se cargará la página del carrito de WooCommerce.

Las páginas que usualmente usan un shortcode para WooCommerce son las siguientes:

• Tienda

• Carrito

• Finalizar la compra

• Mi cuenta

¿Por qué deberíamos usar códigos cortos de WooCommerce?

Los códigos cortos son una manera fácil de personalizar tu tienda de WooCommerce. Al pegar un código abreviado (y modificar algunos parámetros menores), puedes mostrar fácilmente cualquier tipo de contenido, que provenga de WooCommerce, en cualquier página o sección de tu sitio web.

Podrías elegir qué productos deben mostrarse, cómo se deben ordenar y cuántos mostrarse por página. Podrías también agregar botones de compra, agregar productos al carrito y hasta usar esos códigos en el pie de página de tu sitio.

Para colocar códigos cortos de WooCommerce, no necesitas saber codificar. Solo necesitas copiar y pegar una línea de texto en cualquier parte de tu sitio web. ¡Es bastante fácil!

¿Cómo se insertan los shortcodes?

Hay diversas maneras, dependiendo del tema para WordPress que estés utilizando, pero si utilizas el famoso editor por defecto Gutenberg, simplemente presiona el símbolo de +, cuando estés editando una página y agrega un nuevo bloque. A continuación escribe la palabra “shortcode” en la barra de búsqueda y selecciona ese mismo bloque en cuanto te aparezca.

Posteriormente, pega o escribe el determinado shortcode que desees usar.

Finalmente, tendrías que guardar los cambios para verlos aplicados en tu página.

Editor Clásico

Si prefieres usar el editor clásico de WordPress, este proceso de agregar códigos cortos es también muy fácil.

Simplemente, coloca el código abreviado, como en el ejemplo de la imagen de arriba, asegurándote de incluir los corchetes ([ código ]). Puedes usar tanto la pestaña de visual o de texto (text).

Widget

También existe esta otra forma de integrar shortcodes y eso es por medio de Widgets en WordPress.

Lo que tienes que hacer es simplemente agregar un widget de texto y dentro pegar el shortcode deseado. Para verlo aplicado, simplemente visita tu página y refréscala, para ver los cambios.

Lista de todos los WooCommerce shortcodes

A continuación te dejo la lista de todos los shortcodes de WooCommerce.

[woocommerce_cart]

Este shortcode agrega la funcionalidad del carrito de WooCommerce a la determinada página. Mostrará todos los productos que el usuario haya agregado a su carrito.

[woocommerce_checkout]

Este shortcode muestra la página de pago.

[woocommerce_my_account]

Este shortcode muestra la página Mi cuenta, que contiene toda la información del cliente, así como sus pedidos anteriores en la tienda.

[woocommerce_order_tracking]

Este shortcode no es muy común usarlo, pero crea una página de “seguimiento de pedidos”, que permite a los clientes ver el estado actual de sus órdenes.

[products]

El shortcode de [products] es uno de los más potentes y ampliamente utilizados en WooCommerce. Como probablemente hayas adivinado, muestra tus productos. Hay un montón de parámetros que te permiten personalizar los tipos y cantidades de productos que se deben mostrar.

Para agregar un parámetro, simplemente escribe el shortcode, seguido del signo = y el valor deseado entre comillas. Asegúrate de que esté dentro del código abreviado [products].

Por ejemplo, para mostrar 3 productos de la categoría de zapatos “shoes”, usa este código abreviado:

[products limit=”3” category=”shoes”]

El parámetro limit

Controla el número de productos que se muestran. Por defecto, será -1, que muestra todos los productos.

Ejemplo: [products limit=”1”]

El parámetro de categoría mostrará productos que tienen una categoría determinada. Puedes agregar más de una categoría colocando una coma entre ellas.

Ejemplo: [products category=”shoes, hats”]

Hay algunos parámetros que te ayudan a controlar el diseño de las páginas de tus productos.

1. columns.

Este parámetro controla el número de columnas. De forma predeterminada, está configurado en 4, aunque esto generalmente colapsará en un número más pequeño en el móvil (dependiendo de tu tema).

Ejemplo: [products columns=”3”]

2. paginate.

Este parámetro determinará si las páginas de resultados de tu producto se paginarán. Solo tienes dos opciones: verdadero o falso. De forma predeterminada, se establece en falso.

Probablemente, querrá usar el parámetro de paginación junto con el parámetro de límite que mencionamos anteriormente. Por lo tanto, el parámetro de límite determinará cuántos elementos se enumeran en cada página.

Ejemplo: [products paginate=”true”]

3. orderby.

Este parámetro tiene una serie de opciones que te permiten personalizar cómo se ordenan tus productos. Por defecto, estarán ordenados por el título del producto.

Podrás agregar más de una opción separándolas con un solo espacio.

• date: Esto ordena los productos por la fecha de publicación (nuevo primero)
• id: esta configuración ordenará los productos por su ID de publicación
• menu_order: Esto ordenará los productos por el orden del menú (primero los números más bajos)
• popularity: Esto ordenará los productos por el número de compras (la mayoría primero)
• rand: muestra los productos en un orden aleatorio. Puede haber problemas con los sitios que usan complementos de caché.
• rating: Esto ordenará los productos por su calificación promedio, de mayor a menor.

Ejemplo: [products orderby=”date”]

4. order.

Según la configuración de orden anterior, esto determina si el orden será ascendente (ASC) o descendente (DESC). Por defecto, es ASC.

Ejemplo: [products order=”ASC”]

5. skus.

SKU significa unidad de mantenimiento de existencias. Es un sistema diseñado para realizar un seguimiento de los productos en diferentes mercados. Si bien WooCommerce no los requiere, son muy recomendables, especialmente si planeas vender tus productos al por mayor. Puedes usar un complemento para generar automáticamente números SKU, para todos tus productos.

Este parámetro te permite agregar SKU específicos, que deben estar separados por comas.

Ejemplo: [products skus=”tshirt-white-small, tshirt-white-medium”]

6. tag.

Este shortcode te permite mostrar productos con una determinada etiqueta. Puedes agregar más de una etiqueta poniendo una coma entre ellas.

Ejemplo: [products tag=”blue, summer”]

7. class.

Este shortcode agrega una clase contenedora HTML alrededor del elemento, lo que le permite modificarlo con CSS.

Ejemplo: [products class=”custom-element”]

8. on_sale

Para utilizar este parámetro, solo necesitas aplicar las opciones de falso o verdadero. Asegúrate de no usarlo al mismo tiempo que best_selling o top_rated.

Ejemplo: [products on_sale=”true”]

9. best_selling.

Este shortcode mostrará los productos más vendidos. Las opciones son verdadero y falso. Asegúrate de no usarlo al mismo tiempo que on_sale o top_rated.

Ejemplo: [products best_selling=”true”]

10. top_rated.

El parámetro top_rated mostrará los productos mejor calificados. Las opciones disponibles son verdadero y falso. No lo uses al mismo tiempo que on_sale o best_selling.

Ejemplo: [products top_rated=”true”]

Categorías de productos

Estos dos códigos abreviados te permiten mostrar las categorías de productos. Al igual que con los productos en sí, hay un gran número de opciones de personalización disponibles.

[products _categories]

Sin ningún parámetro, este shortcode mostrará todas tus categorías de tus productos en una sola página. Si deseas agregar más de una categoría, también debes usar este código abreviado.

[products _category]

Este es el shortcode genérico para mostrar una categoría en particular. Deberás agregar un parámetro específico, que se enumera a continuación, para mostrar uno (o más).

Parametros.

1. ids

Mostrar categorías específicas por sus ID.

Ejemplo: [products _categories ids=”1,2”]

2. limit

Esto determina el número de categorías que se mostrarán.

Ejemplo: [products _categories limit=”5”]

3. columns

Este parámetro determina el número de columnas. De forma predeterminada, se establece en 4.

Ejemplo: [products _categories limit=”5”]

4. hide_empty

Esto ocultará las categorías vacías. Hay dos opciones: “1” y “0”. “1” ocultará las categorías vacías, mientras que “0” las mostrará. De forma predeterminada, se establece en “1”.

Ejemplo: [products _categories hide_empty=”1”]

5. parent

Este parámetro mostrará las categorías secundarias de una categoría principal específica, que está dirigida por id. Por ejemplo, [parent=”3”] mostrará las categorías secundarias de la categoría cuyo id es 3.

Si establece el parent en “0”, solo se mostrarán las categorías de nivel superior.

Ejemplo: [products _categories parent=”0”]

6. orderby

Este shortcode controla el orden en que se muestran las categorías. De forma predeterminada, los ordenará por nombre, pero también puedes cambiarlo a id, slug o menu_order.

Ejemplo: [products _categories orderby=”id”]

7. order

Relacionado con orderby, este parámetro hará que el orden sea ascendente (ASC) o descendente (DESC). De forma predeterminada, está configurado en “ASC”.

Ejemplo: [products _categories order=”ASC”]

Otros códigos cortos útiles

[add_to_cart]

Este código abreviado te permite crear fácilmente un botón Agregar al carrito para un producto específico, que está dirigido por identificación. Hay bastantes parámetros. Al igual que con otros códigos cortos, cada uno debe colocarse entre dos comillas, “como este”.

id: Elija el producto por ID

style: personaliza el CSS del botón directamente

sku: Elija el producto por SKU

show_price: Elija si el precio se muestra con el botón. Hay dos opciones, “VERDADERO” y “FALSO”

class: asigne una clase HTML al botón, para que pueda orientarlo con código CSS

quantity: Elija la cantidad de producto que se agregará al carrito. En la mayoría de los casos, esto será solo “1”

Ejemplo: [add_to_cart id=”34” style=”border: 1px solid #111111;” show_price=”TRUE” quantity=”1” class=”example-cart-button”]

[add_to_cart_url]

Este shortcode mostrará la URL real de un producto en particular. Solo hay dos parámetros:

id: orientar el producto por ID

sku: orientar el producto por SKU

Ejemplo: [add_to_cart_url id=”99″]

[shop_messages]

Este código abreviado te permitirá mostrar notificaciones como “Este producto se ha agregado a su carrito” en cualquier página que lo tenga.

Shortcodes para descuentos

WooCommerce también ofrece una forma de mostrar los cupones disponibles en cualquier página. Sin embargo, deberás comprar su complemento Smart Coupons, sobre el que puede leer más aquí.

Conclusión

Como habrás visto, existen muchos shortcodes en WooCommerce. Aquí solo basta con echar a andar tu imaginación y crear las páginas que desees para colocar cualquiera de los shortcodes mencionados en esta publicación.

Si te interesa aprender más sobre el uso de WooCommerce, contamos con un tutorial gratuito, el cual es una guía completa acerca de su uso, personalización y confirmación. Solo sigue este botón, para registrarte.

Adicionalmente, si quieres dejar tu comentario o apartar más información a este artículo, seria de gran ayuda, para otros lectores. Muchas gracias y te invitamos a leer algunas de nuestras otras publicaciones.