Cómo mostrar productos destacados en WooCommerce

Cuando quieres aumentar las ventas de determinados productos, bien sea porque se trata de artículos con un gran margen de beneficio, o bien porque te interesa liquidar stock de artículos que tienes en almacén desde hace mucho tiempo, el objetivo principal es desviar la atención de los clientes a esos productos estrella.

El problema es que cuanto mayor es tu catálogo de productos en WooCommerce, más difícil es hacer que tus clientes se fijen en los productos que a ti te interesan. Pues bien, en este artículo vamos a ver cómo mostrar productos destacados en WooCommerce usando un sencillo shortcode. (Si aún no sabes qué es un shortcode, te recomiendo que eches un vistazo a esto)

La idea es hacer uso del shortcode para separar la página de catálogo de productos en dos apartados; uno superior para mostrar los productos destacados y el segundo apartado se situará justo debajo y mostrará el catálogo de productos de WooCommerce.

Configurar un producto como destacado en WooCommerce.

Antes de insertar y configurar el shortocode, hay que definir qué productos queremos destacar, de lo contrario no se mostrará nada.

Configurar un producto como destacado es extremadamente sencillo. Simplemente basta con entrar en la sección «Productos» y en el listado de productos que tienes publicados, marca la estrella en aquellos que desees destacar. A continuación te muestro una captura de cómo debes hacerlo:

Añadiendo una sección de productos destacados en tu tienda WooCommerce.

Una vez tienes definidos los productos destacados que quieres promocionar, es hora de crear el apartado del que hablaba al principio y después insertar el shortcode que mostrará los productos. Para ello debemos ir a la sección «Páginas > Todas las páginas«, en el listado de páginas buscamos la página «Tienda» y por último hacemos clic en «Editar«.

Ahora, en el menú del editor de texto de la página verás un botón que tiene un icono con forma de carrito de compra, ese es el menú de shortcodes que trae por defecto WooCommerce. Si haces clic en él, se desplegará una lista de opciones, en este caso la que nos interesa es «Featured product«, así que clica sobre ella para añadir el shortcode al editor.

NOTA: A partir de la versión 2.2 de WooCommerce el botón de shortcodes no viene integrado en la instalación y por eso no aparece en el menú del editor. Para volver a disponer del menú de shortcodes, debes instalar un plugin adicional que WooCommerce ha desarrollado para esta función.

El plugin del que hablo es «WooCommerce Shortcodes» y puedes descargarlo desde el repositorio de plugins. No hay que configurar nada, simplemente activar y listo.

Si te fijas, ahora en el editor de texto se ha añadido automáticamente un código parecido a este: [featured_products per_page=»4″ columns=»4″ orderby=»date» order=»desc»]. Con esto podríamos hacer clic en «Actualizar» y ya se mostrarían los productos destacados en la parte superior de nuestra tienda. Sin embargo, antes de hacerlo, me gustaría mostrarte como puedes personalizar el shortcode a tu gusto, usando los 4 parámetros que tiene disponibles. A continuación te explico para qué sirve cada uno:

• per_page
  Se usa para indicar el número de artículos destacados que deseas mostrar por página. Sólo acepta números enteros como valor.
• columns
  Con este parámetro indicas en cuántas columnas quieres mostrar la lista de productos. Sólo acepta números enteros como valor.
• orderby
  Indica qué parámetro vas a usar para ordenar la lista de productos. El valor por defecto es «date«, que ordena los productos por fecha de publicación. Otros valores que puedes usar son: «ID«, «title«, «name«, «type» o «rand«. Puedes ver la lista completa de valores aquí.
• order
  Con este parámetro indicas si quieres mostrar los resultados en orden ascendente o descendente. Los valores permitidos son «asc» y «desc«.

Por ejemplo, si yo quiero mostrar sólo 2 productos destacados por página, ordenados por fecha descendente (es decir, los productos destacados más nuevos se mostrarán primero), entonces mi shortcode tendrá este aspecto:

Y los productos destacados se mostrarían en mi tienda así:

Como puedes ver, los productos destacados no están centrados en la página y eso hace que aparezca un hueco en blanco un poco desagradable. Esto se debe a que no he especificado el número de columnas en las que deseo dividir la lista de productos destacados y por defecto se asigna el valor 4. En este caso como sólo voy a mostrar 2 productos por página y quiero que estos abarquen todo el ancho, entonces tendré que asignar al parámetro «columns» el valor 2, resultando un shortcode tal que así: [featured_products per_page=»2″ columns=»2″ orderby=»date» order=»desc»]. Ahora los productos destacados están divididos también en dos columnas, pero esta vez si ocupan todo el ancho de la página.

Espero que este ejemplo te haya servido para entender cómo funciona el shortcode de productos destacados en WooCommerce y las infinitas combinaciones posibles que puedes hacer con sus parámetros.

Es este artículo sólo te he mostrado cómo mostrar los productos destacados en la página de tienda que crea WooCommerce por defecto, pero puedes usar el shortcode en cualquier página de tu web. Esto te da libertad, por ejemplo, para crear tus propias páginas de promociones simplemente combinando shortcodes dentro del editor.