![WooCommerce Shortcode: Atributos de producto [product_atttibute]](https://oscarabadfolgueira.com/wp-content/uploads/2020/05/woocommerce-shortcode_atributos_de_producto-product_atttibute.jpg)
[product_attribute]
El shortcode [products] nos permite mostrar products por ID, SKY, categorías, atributos, con soporte de paginación, orden aleatorio y etiquetas de productos.
Este shortcode puede reemplazar el uso de otros shortcodes como:
- [featured_products]
- [sale_products]
- [best_selling_products]
- [recent_products]
- [product_attibute]
- [top_rated_products]
Ejemplo de uso de [products]
Antes de ahondar en las posibilidades que nos ofrecen los atributos que podemos usar con este shorcode no está de más que veamos que efectivamente, el shortcode [products] muestra la lista de productos de nuestro WooCommerce.
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/gucomers-shortcode-products-editor.png)
Y este será el resultado:
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/gucomers-shortcode-products-resultado.png)
Atributos de producto
A continuación se indican de manera resumida los atributos que se pueden usar con el shortcode [products].
Atributos de productos
limit
Establece el número de productos que se mostrarán.
Por defecto se establece «-1» que mostrará todos los productos en el caso de productos o categorías en su caso.
Ejemplo:
Limitar el número de productos que se muestran a 7 [products limit=»7″]
columns
Establece el número de columnas que se mostrarán.
Por defecto será 4.
Ejemplo:
Establecer el número de columnas a 3 [products columns=»3″]
paginate
Habilita la paginación.
Se usa junto con el atributo limit.
Por defecto está establecido a false (desactivado). Para activar establecer a true.
Ejemplo:
Habilitamos la paginación y establecemos el número de productos a 7 por cada página que se muestre. [products limit=»7″ paginate=»true»]
orderby
Ordena los productos que se muestran en el listado.
Podemos pasarle una o varias opciones a este atributo añadiendo. Si le indicamos varias opciones, éstas debes estar separadas por espacios.
Las opciones disponibles son:
- date – La fecha en la que fué publicado el producto.
- id – El ID del post del producto.
- menu_order – El orden del menú (primero se mostrarán los números más bajos).
- popularity – El número de compras.
- rand – Se ordenan los productos de forma aleatoria (no funciona en sitios que utilizan caché).
- rating – El promedio de valoración del producto.
- title – El título del producto. Esta es la opción establecida por defecto.
Ejemplos:
Orden del listado de productos por el número de compras [products orderyby=»popularity»]
Mostrar el listado por orden de lista (título) [products orderby=»title»]
skus
Muestra un listado de prodctos gracias a los SKU que le indicamos al atributo.
Este atributo se ulizará en casos muy concretos en los que tengamos que mostrar un listado con una serie de productos específicos y en lugar de usar el ID de cada producto, usaremos sus SKUS.
Ejemplo:
Mostrar tres productos cuyos SKUs son : «logo-collection», «woo-single» y «woo-polo». [products skus=»logo-collection, woo-single, woo-polo»]
category
Muestra el listado de productos de una o varias categorías especificadas por su slug.
Si indicamos varios slugs, lo haremos separados por comas.
Ejemplo:
Mostrar el listado de productos de las categorías cuyos slugs son: «music» y «hoodies». [products category=»music, hoodies»]
tag
Muestra el listado de productos de una o varias etiquetas especificadas por su slug.
Si indicamos varios slugs, lo haremos separados por comas.
Ejemplo:
Mostrar el listado de productos de las categorías cuyos slugs son: «tag1» y «tag2». [products tag=»tag1, tag2″]
order
Establece si el orden del listado de productos es ascentente (ASC) o descendente (DESC).
Por defecto está establecido como ascendente (ASC).
Se usa junto con el atributo orderby.
Ejemplo:
Mostrar el listado por orden de lista (título) en orden descdendente [products orderby=»title» order=»DESC»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode_products_order.png)
class
Añade una clase CSS especificada por nosotros al contenedor del listado de productos. De esta manera podremos modificar el aspecto mediante código CSS.
Ejemplo:
Añadimos la clase «miclase» [products class=»miclase»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode_products_class.png)
on_sale
Muesta un listado con productos en oferta es decir, con decuento.
Esta opción no se puede usar en junto con «best_selling» o «top_rated«.
Opciones:
- true – Se mostrarán solo los productos en oferta.
- false – Se mostrarán todos los productos.
Ejemplo:
Mostrar el listado de los productos en oferta [products on_sale=»true»]
best_selling
Muesta un listado con productos más vendidos.
Esta opción no se puede usar en junto con «on_sale» o «top_rated«.
Opciones:
- true – Se mostrarán los productos más vendidos.
- false – Se mostrarán todos los productos.
Ejemplo:
Mostrar el listado de los productos más valorados [products best_selling=»true»]
top_rated
Muesta un listado con productos mejor valorados.
Esta opción no se puede usar en junto con «on_sale» o «best_selling.
Opciones:
- true – Se mostrarán los prodcutos mejor valorados.
- false – Se mostrarán todos los productos.
Ejemplo:
Mostrar el listado de los productos mejor valorados [products top_rated=»true»]
Atributos de contenido de producto
attribute
Muestra los productos en base al slug del atributo especificado.
Ejemplo:
Mostrar el listado de los productos que tengan el atributo color [products attribute=»color»]
terms
Lista de términos de atributos separados por comas para usar junto con «attribute«.
En este caso podemos establecer los valores de los atributos que queremos que se muestren. En el caso del atributo color, podemos especificar que se muestren sólo los productos que tengan el color «gray»
Ejemplos:
Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» [products attribute=»color» terms=»gray»]
Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» o «blue» [products attribute=»color» terms=»gray, blue»]
terms_operator
Permite utilizar un operador para comparar los términos de atributo.
Los operadores disponibles son:
- AND – Mostrará los productos que tengan todos los términos de atributo.
- IN – Muestra los productos que tengan el atributo especificado. Esta es la opción establecida por defecto.
- NOT IN – Mostrará los productos que no tengan los atributos especificados.
Ejemplos:
Mostrar el listado de los productos que no sean de color «blue» ni «gray» [products limit=»-1″ attribute=»color» terms=»blue, gray» terms_operator=»NOT IN»]
Mostrar el listado de los productos que tengan establecido como color los términos «blue» y «gray». [products attribute=»color» terms=»blue, gray» terms_operator=»AND»]
tag
Muestra un listado de productos usando el slug de las etiquetas (slug).
Ejemplo:
Mostrar el listado de los productos que que tengan la etiqueta «tag1» y los que tengan la etiqueta «tag2» [products tag=»tag1, tag2″]
tag_operator
Permite utilizar un operador para comparar las etiquetas (tags).
Es similar al atributo «terms_operantor» pero en este caso con etiquetas.
Los operadores disponibles son:
- AND – Mostrará los productos que tengan todas las etiquetas.
- IN – Muestra los productos que tengan la etiqueta especificada. Esta es la opción establecida por defecto.
- NOT IN – Mostrará los productos que no tengan las etiquetas especificadas.
Ejemplo:
Mostrar el listado de los productos que tengan establecidas las etiquetas «tag1» y «tag2». [products tag=»tag1, tag2″ tag_operator=»AND»]
visibility
Muestra los productos en base a la visibilidad especificada.
Los operadores disponibles son:
- visible – Productos visibles en la tienda y en los resultados de búsqueda. Esta es la opción establecida por defecto.
- catalog – Productos visibles sólo en la tienda.
- search – Productos visibles sólo en los resultados de búsqueda.
- hidden – Productos establecidos como ocultos, solo accesibles por la URL directamente.
- featured – Productos que se han establecido como destacados.
Ejemplos:
Mostrar el listado de los productos en lo que se ha establecido la visibilidad como «Oculto». [products visibility=»hidden»]
Mostrar el listado de productos destacados. [products visibility=»featured»]
category
Muestra los productos de la categoría indicada por slug.
Ejemplo:
Mostrar el listado de los productos de la cateogía «Music» cuyo slug es «music»: [products category=»music»]
cat_operator
Operador para comparar términos de categoría.
Las opciones disponibles son:
- AND – Muestra los productos que tengan todas las cateogrías indicadas.
- IN – Muestra los productos de esa categoría. Esta es la opción establecida por defecto.
- NOT IN – Mostrará los productos que no tengan establecida la categoría indicada.
Ejemplo:
Mostrar el listado de los productos de todas las categorías excepto de las categorías «Music», «Accesories» y «Tshirts»: [products category=»music, accessories, tshirts» cat_operator=»NOT IN»]
ids
Muestra los productos basándose en los IDs de los productos indicados.
Si introducimos varios IDs, tienen que ir separados por comas.
Ejemplo:
Mostrar el listado de los productos con los IDs «24», «32» y «34»: [products ids=»24, 32, 34″]
skus
Muestra los productos basándose en los SKUs de los productos indicados.
Si introducimos varios SKUs, tienen que ir separados por comas.
Ejemplo:
Mostrar el listado de los productos con los SKUs «woo-single», «woo-polo» y «woo-cap»: [products skus=»woo-single, woo-polo, woo-cap»]
Atributos de producto especiales
Estos atributos no se pueden utilizar junto con los atributos de contenido porque pueden causar un conflicto y no mostrarse.
best_selling
Muetra los productos más vendidos.
Debemos establecer este atributo a «true»
Ejemplo:
Mostrar el listado de los productos más vendidos: [products best_selling=»true»]
on_sale
Muetra los productos más en oferta o con decuento.
Debemos establecer este atributo a «true»
Ejemplo:
Mostrar el listado de los productos más vendidos: [products on_sale=»true»]
Ejemplos variados del shortcode [products]
Ejemplo 1
Queremos mostrar los productos en oferta en 3 columnas en orden de popularidad y un máximo de 6 productos.
[products limit=»6″ columns=»3″ orderby=»popularity» on_sale=»true»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode-products-ejemplo-1.png)
Ejemplo 2
En este segundo ejemplo queremos mostrar los productos en 6 columnas y con la paginación de tal forma que en cada página se muestren 12 productos.
[products limit=»12″ columns=»6″ paginate=»true»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode-products-ejemplo-2.png)
Ejemplo 3
Queremos que se muestren los productos en una sola fila, 2 productos por fila y por página unicamente y que también se muestre la paginación para que los visitantes puedan navegar entre ellos.
Además, también queremos que sólo se muestren los prodcuctos que tenemos en oferta con descuento.
[products limit=»2″ columns=»2″ paginate=»true» on_sale=»true»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode-products-ejemplo-3.png)
Ejemplo 4
Queremos mostrar los productos más vendidos en la tienda en 5 columnas y sin límite de productos para que se muestren todos.
[products limit=»-1″ columns=»5″ best_selling=»true»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode-products-ejemplo-4.png)
Ejemplo 5
Dándole una vuelta al ejemplo anterior, queremos que además se muestren los productos que tenemos en oferta por lo que añadiremos on_sale=»true» al shortcode del ejemplo anterior y ya puestos, como son menos, los mostraremos en 3 columnas.
[products limit=»-1″ columns=»3″ best_selling=»true» on_sale=»true»]
![WooCommerce Shortcode - Productos [products]](https://oscarabadfolgueira.com/wp-content/uploads/2020/04/woocommerce-shortcode-products-ejemplo-5.png)
