Hola a todos!
Para los que no usen el tema Divi, quizá se les dificulte un poco el mostrar los productos que deseen, en el lugar que deseen. Hoy veremos un método al alcance de cualquier usuario de Woocommerce muy al margen del tema o constructor que usen. Estamos hablando de los shortcodes de Woocommerce. Más específicamente el shortcode Products. Aprenderemos como personalizarlo al máximo y utilizar todo su potencial.
Módulo tienda de Divi vs Shortcode Products Woocommerce
Primero mencionemos lo más evidente: La tienda de Divi, al ser un módulo, permite personalizar y agregar estilos mucho más fácilmente. Utilizando los ya conocidos controles de Divi Builder. Por otro lado, si deseamos utilizar Shortcodes, cambios más profundos en los estilos requerirá utilizar algo de código CSS personalizado.
¿Y qué ventaja muestran los shortcodes de Woocommerce? Pues debido a su gran cantidad de atributos (que detallaremos más adelante) nos dan más libertad para elegir exactamente qué productos queremos que se muestren.
Por ejemplo:
Podemos mostrar productos de una etiqueta en específico (El módulo tienda de Divi sólo te permite elegir categorías específicas, más no etiquetas)
Podemos utilizar operadores para configurar cómo se trabajará con múltiples categorías o etiquetas (Si mostrar los productos que pertenezcan al menos a una, o que necesariamente pertenezcan a todas)
Se pueden mostrar productos de IDs específicos.
Interesante, ¿cierto?
¿Y si quiero que mi loop de productos muestre categorías, etiquetas u otros metadatos de cada producto?
En el caso que desees que cada producto muestre categorías, etiquetas a las que pertenece, u otro dato adicional, puedes optar por el plugin Divi Flash.
Éste plugin añade el módulo de Grid de productos. Su función es similar a la del módulo tienda, pero viene con funciones avanzadas.
En la imagen de abajo, pueden ver todos los elementos que se pueden agregar a los ítems del loop de producto.
Si desean utilizar éste plugin en su página web, pueden utilizar el servicio de activación de licencias de Rapihosting (Nuestro servicio de hosting WordPress de confianza), dónde pueden conseguir la activación de una licencia lifetime en su sitio, a un muy buen precio. Puedes darle un vistazo desde aquí.
Ahora así, empecemos a hablar de los shortcodes…
Shortcodes de Woocommerce
Los Shortcodes son código abreviado que permiten insertar porciones de código dentro de nuestro contenido. Habitualmente tienen la forma de un texto entre corchetes: [Shortcode].
Woocommerce cuenta nativamente con muchos shortcodes o códigos cortos para mostrar distintos aspectos de la tienda. Por ejemplo el botón de añadir al carrito, la página de checkout, etc.
En ésta ocasión nos vamos a centrar en el shortcode products; cuya función, como dice su nombre, es la de llamar a los productos de la tienda.
¿Dónde agregar los Shortcodes de Woocommerce?
Éstos pueden agregarse en cualquier editor de texto, también en campos que permitan añadir html.
En el caso del editor por defecto de WordPress: Gutenber, hay un bloque especial para añadirlos. Simplemente pegamos o escribimos nuestro shortcode allí y listo.
En el caso del Tema Divi, puedes agregarlo tanto en el módulo texto como en el módulo cómo el módulo Código. Para éstos ejercicios voy a utilizar el módulo código.
Recuerden que el modo de uso es el mismo en cualquier editor o tema que usen.
¿Quieres más Tutoriales cómo éste?
Queridos lectores, cada semana subo un artículo con nuevos trucos geniales para Divi y Woocommerce que debo decir que no encuentras en ningún otro lugar. Para que no te pierdas nada, suscríbete a mi lista de contactos para que recibas automáticamente en tu bandeja de entrada cada nuevo artículo que suba de forma gratuita!! ¿No es fantástico?
Así que inscríbete ya mismo desde aquí:
Shortcode Products
La forma general de éste shortcode es la siguiente:
Shortcode WooCommerce mostrar todos los productos: Con el simple hecho de agregarlo, ya se muestran todos los productos de la tienda.
Ya que el shortcode por si sólo muestra TODOS los productos, es habitual querer limitar la cantidad de productos mostrados. Para ello utilizaremos el atributo: “limit”.
Los atributos, son parámetros que configuran algunas funciones del shortcode. Aparte de limit, hay algunas otras muy interesantes. Veamos cada una de ellas…
Atributos del Shortcode Products
En el ejemplo anterior, al añadir el atributo limit, se reduce los productos mostrados a sólo cuatro. Los atributos configuran parámetros específicos en la función de shortcode. Hay varios atributos que nos ayudarán a que lo que se muestre sea exactamente lo que queremos.
La forma de añadirlos es poniendo el nombre del atributo, seguido por el signo de igual y luego, entre comillas, el valor elegido.
En el caso de limit su valor era cuatro, para limitar la vista a cuatro productos.
Aquí pieden ver una lista de los principales atributos:
limit: el número de productos para mostrar. El valor predeterminado es-1(mostrar todo) al listar productos, y-1(mostrar todo) para las categorías.columns: el número de columnas para mostrar. El valor predeterminado es4.paginate: activa la paginación. Usar en conjunción conlimit. El valor predeterminado esfalse(falso), establece este valor entrue(verdadero) para añadir paginación.orderby: ordena los productos, para mostrarlos según la opción ingresada. Se pueden seleccionar una o más opciones agregando ambos campos con un espacio entre ellos. Las opciones disponibles son:date: la fecha en que se publicó el producto.id: el post ID del producto.menu_order: el orden del menú, si está configurado (los números más bajos se muestran primero).popularity: la cantidad de compras.rand: ordena los productos al azar durante la carga de la página (puede que no funcione con sitios que usan almacenamiento en caché, ya que podría guardar un orden específico).rating: la calificación promedio del producto.title: el título del producto. Este es el modo predeterminado.
skus: lista de SKU de productos separados por comas.category: lista de slugs de categoría separados por comas.tag: lista de slugs de etiquetas, separada por comas.order: indica si el orden del producto es ascendente (ASC) o descendente (DESC), utilizando el método establecido enorderby. El valor predeterminado esASC.on_sale: recupera los productos en oferta.
tag_operator: operador para comparar etiquetas. Las opciones disponibles son:AND: mostrará productos de todas las etiquetas elegidas.IN: mostrará productos con las etiquetas elegidas. Este es el valor predeterminado de tag_operator.NOT IN: mostrará productos que no están en las etiquetas elegidas.
cat_operator: operador para comparar términos de categoría. Las opciones disponibles son:AND: mostrará los productos que pertenecen a todas las categorías elegidas.IN: mostrará productos dentro de la categoría elegida. Este es el valor predeterminado de cat_operator.NOT IN: mostrará productos que no están en la categoría elegida.
ids: mostrará productos basados en una lista de post IDs, separados por comas.
Ejemplos de uso del Shortcode
Mostrar todos los productos de la tienda (Por defecto en cuatro columnas, ordenado por orden alfabético):
[products]
Mostrar todos los productos pero en tres columnas:
[products columns="3"]
Mostrar sólo 6 productos en 4 columnas:
[products limit="6" columns="4"]
Mostrar sólo 6 productos por página en 3 columnas, con paginación:
[products limit="6" columns="3" paginate="true"]
Mostrar los productos de la categoría: “categoria1”
[products category="categoria1"]
Mostrar los productos de la Etiqueta: “etiqueta1”
[products tag="etiqueta1"]
Pueden ponerse múltiples categorías así como etiquetas, separadas por comas. En ese caso se mostrarán los productos que pertenezcan AL MENOS a un elemento de la lista.
[products tag="etiqueta1,etiqueta2,etiqueta3"]
[products category="categoria1,categoria2"]
Si queremos que se muestren productos que pertenezcan NECESARIAMENTE a todos los elementos de la lista SIMULTÁNEAMENTE, podemos utilizar el operador cat_operator para las categorías y el tag_operator para las etiquetas, con el valor de AND.
[products tag="etiqueta1,etiqueta2,etiqueta3" tag_operator="AND"]
[products category="categoria1,categoria2" cat_operator="AND"]
El operador también puede tomar el valor de NOT, en éste caso nos serviría para excluir términos.
Por lo tanto la expresión de abajo podría interpretarse como:
“Mostrar todos los productos, excluyendo a los que pertenezcan a la etiqueta1 o etiqueta2”
[products tag="etiqueta1,etiqueta2" tag_operator="NOT"]
Con el atributo order by podemos ordenar los productos mostrados según el criterio que decidamos:
/*Ordenar por Título*/
[products orderby="title"]
/*Ordenar por Fecha de Publicación*/
[products orderby="date"]
/*Ordenar por ID*/
[products orderby="id"]
*Ordenar por la cantidad de compras*/
[products orderby="popularity"]
*Ordenar por la calificación promedio */
[products orderby="rating"]
Cabe mencionar que éstas ordenaciones siguen una dirección. Por ejemplo de A a Z en el caso del ordenamiento por títulos, y de menor a mayor en el caso de ordenamiento por ids, etc. Podemos alterar esa dirección con el atributo order. Siendo el valor de ASC (de ascendente) su valor por defecto. Para invertirlo usaríamos el valor DESC (de descendente). Entonces, podemos leer el enunciado de abajo como:
Mostrar todos los productos de la tienda ordenados según el título, pero en sentido inverso, es decir, desde la Z hasta la A.
[products orderby="title" order="DESC"]
Hasta ahora hemos visto cómo llamar a grupos de productos según diferentes criterios. Pero, ¿Y si necesitamos productos específicos?. Para esos casos podemos usar el atributo IDs. Con el cual podemos hacer una lista de productos según su id para que sean los únicos que aparezcan. El enunciado de abajo podría leerse como:
“Mostrar sólo los productos cuyos ids sean 343, 345 y 346”
[products ids="343,345,346"]
Por si no lo recuerdas, los ids de los productos pueden verse desde la lista de todos los productos en el panel de wordpress.
Hay muchas circunstancias dónde te será muy útil mostrar únicamente productos que estén en oferta. Para ello usaríamos el atributo on_sale con el valor de true.
Veremos un ejemplo de cómo llamaríamos al siguiente enunciado:
“Mostrar sólo los productos de la categoría: “categoria1″ que estén en oferta”
[products category="categoria1" on_sale="true"]
Como pueden ver, los shortcodes para mostrar productos son una herramienta muy versátil que te ayudará en distintas situaciones. Una potente ayuda que debemos saber manejar.
0 comentarios