Ayer mismo hablaba en el blog acerca de las novedades que traerá WooCommerce 3.2, que se publicará a principios de octubre, y mencionaba que a partir de esa versión los shortcodes de productos van a cambiar.

De hecho todos ellos se van a sustituir por uno sólo: products. En cierto modo eso simplifica las cosas… pero por otra parte las complica porque, para cubrir las funcionalidades de los siete shortcodes que se retiran, tendrá montones de argumentos disponibles.

El shortcode products de WooCommerce 3.2

El 4 de octubre es la fecha prevista de llegada para WooCommerce 3.2 y una de las novedades que trae, como vimos ayer, es un cambio en los shortcodes de producto: todos ellos quedan sustituidos por uno sólo, [products].

Shortcodes de WooCommerce

Es decir, desde esta nueva versión de declaran como fuera de uso los siguientes shortcodes:

• [product_category]
• [featured_products]
• [sale_products]
• [best_selling_products]
• [recent_products]
• [product_attribute]
• [top_rated_products]

Es decir, todos lo que se usaban hasta ahora para mostrar productos, excepto el propio [products], que de momento se mantendrán por razones de compatibilidad pero que, más temprano que tarde, terminarán desapareciendo de WooCommerce.

Porque no es que este shortcode vaya a ser introducido en WooCommerce 3.2: simplemente va a ser potenciado, pero existir ya existe. De hecho, si tienes WooCommerce actualizado, puedes ir y probarlo. Si lo escribes directamente así, sin ningún atributo, verás que muestra todos los productos publicados y con la visibilidad de catálogo activada.

En resumen, el shortcode [products], por sí sólo, te crea una página como la de la tienda.

Atributos para el shortcode products

Pero claro, eso no basta: este shortcode deberá suplir las funcionalidades de todos los que desaparecen, es decir, deberá ser capaz de mostrar los productos destacados, los productos en oferta, los mejor valorados, los recientes, los más vendidos… y todo eso pudiendo configurar el número de productos mostrados, su orden…

De todo ello se encargarán, claro está, los atributos. Y aquí también hay cambios, porque algunos atributos son sustituidos:

• per_page pasa a denominarse limit
• operator se llamará ahora cat_operator
• filter a partir de ahora será terms

Así todo está mucho más claro y se vuelven prácticamente autoexplicativos, especialmente per_page ya que, a pesar de su nombre, los productos mostrados por shortcodes no soportan paginación, por lo que este atributo generaba muchas dudas y consultas.

Todos los atributos del shortcode products

Atento porque aquí viene la lista: nada menos que dieciséis atributos. Algunos de ellos son nuevos, algunos sólo se pueden usar si van acompañando a otros atributos concretos… No te asustes, al final todo tiene su lógica y vamos a ver ejemplos detallados. Bastará con tener la lista a mano (puedes guardar esta página en tus favoritos para consultarla siempre que lo necesites 🙂 ).

• limit, para establecer el número máximo de productos que mostrará el shortcode (antiguo per_page). Por defecto es -1, es decir, sin límite.
• columns, para configurar en cuántas columnas deben mostrarse, por defecto 4.
• orderby, para establecer el criterio de orden de los productos:
  • menu_order
  • title
  • date
  • rand (al azar)
  • price
  • popularity (más vendidos)
  • rating

  El valor por defecto es title. Si tienes buena memoria, verás que modified y comment_count se caen de la lista y que se han añadido algunos necesarios para sustituir a los viejos shortcodes, como rating y popularity.

• order, para indicar si el valor indicado en orderby debe tomarse en orden ascendente (order="asc") o descendente (order="desc").
• ids, lista de ID de producto separados por coma.
• skus, lo mismo pero usando el SKU.
• category, lista de categorías separadas por coma (usando el slug).
• cat_operator, que indica cómo considerar esas categorías: por defecto es IN (es decir, productos que pertenecen a esas categorías) pero admite también los operadores lógicos AND y NOT IN. Más abajo vemos algunos ejemplos.
• attribute, el slug de un atributo.
• terms, lista de términos (slugs) separados por coma, haciendo referencia al atributo declarado.
• terms_operator, para indicar cómo gestionar esos términos: IN (por defecto), AND o NOT IN.
• visibility mostrará los productos en función de su visibilidad:
  • featured
  • visible (por defecto)
  • catalog
  • search
  • hidden
  Visibilidad de los productos en WooCommerce
• class para aplicar una clase CSS y así poder personalizar la visualización (¡bien!).
• on_sale (true/false) para mostrar los productos en oferta.
• best_selling (true/false) para mostrar los más vendidos.
• top_rated (true/false) para mostrar los mejor valorados.

Estos tres últimos (on_sale, best_selling y top_rated) son mutuamente excluyentes, es decir, un shortcode sólo puede incluir uno de los tres.

En fin, ya ves que hay juego. Sé que a primera vista puede parecer un poco confuso, con los operadores y modificadores, pero ya verás como no lo es tanto. Además, eso da mucha más libertad y flexibilidad a la hora de mostrar los productos mediante shortcodes.

Ejemplos de uso del shortcode products

Y lo mejor para ver todo esto es, como siempre, unos ejemplos. Así quedará mucho más claro el uso de modificadores y operadores lógicos. Para empezar, las equivalencias con los shortcodes que quedan obsoletos:

Estos están bastante claros y no hace falta detenerse más en ello, creo yo. Si te queda alguna duda tienes a tu disposición tanto los comentarios como el formulario de contacto. Vamos a lo complicado (los operadores y selectores) con ejemplos concretos.

Ejemplo: shortcode para listar todos los productos que no sean de color azul (se entiende que has creado el atributo y lo has aplicado, incluso a productos simples). ¿Enrevesado? ¡Para nada! Observa:

Vamos con otro: shortcode para listar todos los productos destacados pero que no estén en la categoría de camisas:

Vayamos complicando un poco el asunto y usándolos en conjunción. ¿Qué tal si listamos los cuatro modelos de pantalones que más se venden en la tienda, en orden de más a menos vendidos, pero excluyendo los que sean negros?

Además, le vamos a aplicar la clase CSS «caja» para después personalizar la visualización del div que contiene los productos, poniéndole por ejemplo un fondo de un color diferente, un borde, etcétera. Dicho y hecho:

Conclusión

Como ves, este nuevo shortcode es muy flexible y muy potente, y permite crear criterios de visualización que antes no teníamos (imposible hacer lo visto en estos últimos ejemplos con los shortcodes anteriores).

Sí, a primera vista puede parecer un poco complicado por el número de atributos disponibles, pero basta con dar un par de repasos a la lista para conocer las posibilidades y después guardarla a mano. El cambio, creo yo, es muy positivo.

De hecho, para mí, sólo por poder aplicar clases CSS ya merece la pena 🙂