Etiqueta: Productos

About Productos

Subscribe Feeds

WooCommerce Shortcode: Atributos de producto [product_atttibute]

Posted on by Óscar Abad Folgueira

[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]

Y este será el resultado:

WooCommerce Shortcode - Productos [products]

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»]

WooCommerce - Shortcode "Products" atributo SKUs

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]

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]

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]

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]

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]

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]

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]

Bloque WooCommerce: Búsqueda de productos

Posted on by Óscar Abad Folgueira

Cuando instalamos WooCommerce en nuestros WordPress, automaticamente tendremos a nuestra disposición una serie de bloques para utilizar en el nuevo editor de bloques de WordPress.

Hoy vamos a ver el bloque «Búsqueda de productos«.

Bloque WooCommerce: Búsqueda de productos

Este bloque nos va a permitir añadir un buscador de productos muy útil en cualqueir página o entrada de nuestro ecommerce.

Para localizar este bloque así como el resto de bloques de WooCommerce, añadimos un nuevo bloque en un post que estemos editando y nos movemos a la última sección de bloques de WordPress como se puede ver en la siguiente captura:

WooCommerce Bloques

Si deplegamos la sección «WooCommerce» podremos ver todos los bloques que WooCommerce nos ofrece.

Bloque WooCommerce: Búsqueda de productos

Buscamos en bloque de «Búsqueda de productos» y hacemos click sobre el para añadir un bloque.

En ese momento, y sin configurar nada de nada, tendremos algo similar a lo siguiente:

Bloque WooCommerce: Búsqueda de productos

Sin tocar nada, como digo, ya tendríamos nuestra sección o bloque de «Búsqueda de productos en esta página o entrada.

Lo podemos comprobar viendo este post para asegurarnos de lo que muestra y cómo lo muestra:

Bloque WooCommerce: Búsqueda de productos

Como podemos observar en la captura anterior, lo que añade no es más que un campo de búsqueda muy sencillo en el que podemos introducir la o las palabras para buscar.

Además, disponemos de un botón en forma de «>» a la derecha del campo de búsqueda.

Podemos probarlo introduciendo parte de una palabra para ver el resultado, en este caso introduciré «hoo«:

Bloque WooCommerce: Búsqueda de productos

Y ahora vemos el resultado de esta búsqueda:

Bloque WooCommerce: Búsqueda de productos

Perfecto! Una forma sencilla y rápida de implementar un buscador de productos en cualqueir sitio de nuestra web.

Opciones del bloque WooCommerce «Pruductos en oferta»

Este bloque no tiene mucha opción que digamos, por lo menos de momento.

La única opción de que disponemos es la de «Contenido«.

Contenido

En este apartado podemos activar o desactivar que se muestre o no la etiqueta del campo de búsqueda. Es decir, que aparezca la palabra «buscar» encima del campo o no:

Bloque WooCommerce: Búsqueda de productos

Si desactivamos el check lo que veremos será lo siguiente:

Bloque WooCommerce: Búsqueda de productos

Observaciones sobre el bloque «Búsqueda de productos»

En el caso de este bloque me gustaría que apreciáramos un pequeño detalle y es que si nos fijamos, al realizar la búsqueda, el resultado se muestra en otra página y no en la misma en la que está el formulario de búsqueda.

En este caso, la url que figura en el navegador es: http://www.loquesea.com/?s=hoo&post_type=product

Y el fichero php que está gestionando esto es el de «archive-product.php».

Esto es una simple obervación para el caso en el que queramos modificar la forma o el diseño en el que se muestra este resultado de búsqueda.

Espero que esta información os sea de utilidad.

Cualquier duda y observación, dejadme un comentario.

Saludos y ánimo!

Mover las «equis» (aspas) de eliminar productos del carrito de WooCommerce debajo de la cantidad

Posted on by Óscar Abad Folgueira

En el carrito de WooCommerce disponemos de unas «equis» con las que podemos eliminar del carrito cada uno de los productos fácilmente.

Para que lo tengamos claro, aquí tenemos una captura de imagen donde se ve dónde estás estas «equis» de las que hablo:

Quitar las "equis" de eliminar productos del carrito de WooCommerce

Muy bien, ahora lo que queremos es quitarlas de donde están ahora y ponerlas justo debajo de los selectores de cantidad y para ello primero las vamos a quitar de donde están con el siguiente snippet:

Seguimos y ahora lo que vamos a hacer es ubicarlas justo debajo de los selectores de cantidad de producto para que nos quede de la siguiente forma:

Mover las "equis" de eliminar productos del carrito de WooCommerce debajo de la cantidad

Para eso utilizamos el siguiente snippet:

Este código lo podéis añadir al final del fichero funcions.php del tema activo.

Por supuesto habría que darle un poco de estilo con css para que se adapte mejor a nuestro tema y nuestras necesidades, pero eso es otra historia…

Cualquier cosa me dejáis un comentario y lo vemos.

Saludos y ánimo!

Bloque WooCommerce: Productos más recientes

Posted on by Óscar Abad Folgueira

Cuando instalamos WooCommerce en nuestros WordPress, automaticamente tendremos a nuestra disposición una serie de bloques para utilizar en el nuevo editor de bloques de WordPress.

Hoy vamos a ver el bloque «Productos más recientes«.

Bloque WooCommerce - Productos más recientes

Este bloque, como bien dice su nombre, nos permite mostrar los últimos productos añadidos a nuestro WooCommerce de una manera muy sencilla y rápida.

Para localizar este bloque así como el resto de bloques de WooCommerce, añadimos un nuevo bloque en un post que estemos editando y nos movemos a la última sección de bloques de WordPress como se puede ver en la siguiente captura:

WooCommerce Bloques

Si deplegamos la sección «WooCommerce» podremos ver todos los bloques que WooCommerce nos ofrece.

Bloque WooCommerce - Productos más recientes

Buscamos en gloque de «Productos más recientes» y hacemos click sobre el para añadir un bloque.

En ese momento, y sin configurar nada de nada, tendremos algo similar a lo siguiente:

Bloque WooCommerce - Productos más recientes

Sin tocar nada, como digo, ya tendríamos nuestra sección o bloque de «Productos más recientes» en esta página o entrada.

Lo podemos comprobar viendo este post para asegurarnos de lo que muestra y cómo lo muestra:

Bloque WooCommerce - Productos más recientes

Si no queremos más, lo dejamos así y listo pero si queremos realizar algunos cambios, vamos a revisar las opciones que tenemos en este bloque para adaptarlo lo máximo posible a nuestras necesidades.

Opciones del bloque WooCommerce «Pruductos más recientes»

Para ello, nos posicionamos en el bloque y vemos estas opciones de configuración en la parte derecha de la pantalla:

Bloque WooCommerce - Productos más recientes

Estructura

La primera sección que tenemos es la de «Estructura«:

WooCommerce bloque productos en oferta opciones esgtructura

Aquí podemos establecer el número de columnas por fila y la cantidad de filas que motraremos en este bloque de productos en oferta.

En el siguiente ejemplo hemos establecido 2 productos por fila y 2 filas para que se muestre de la siguiente forma:

Bloque WooCommerce - Productos más recientes

También disponemos de una opción de «Alinear el último bloque» para que se alinee verticalmente.

Contenido

En este apartado disponemos de varias opciones que podemos activar o deactivar a nuestro gusto.

Po defecto están todas activadas como podemos observar:

WooCommerce bloque productos en oferta opciones contenido

Estos ajustes son muy útiles cuando queremos deactivar ciertos elementos de los productos en el listado.

Las opciones, como podemos obervar son:

  • Título del producto.
  • Precio del producto.
  • Valoración del producto.
  • Botón de añadir al carrito.

Podemos desactivar y activar los que queramos o necesitemos.

A modo de ejemplo, desactivamos el precio del producto y el botón de «Añadir al carrito» y nos motraría de la siguiente forma:

Bloque WooCommerce - Productos más recientes

Ordernar por

La siguiente sección o apartado que aparece en los ajustes del bloque «Productos en más recientes» de WooCommerce es «Ordenar por«.

En esta sección podemos establecer la forma en la que se ordenan los producto en este bloque que hemos creado.

Las ocpiones disponibles son:

WooCommerce bloque productos en oferta ordenar por
  • Primero los más nuevos (Novedades).
  • Precio – de menor a mayor.
  • Precio – de mayor a menor.
  • Valoración – primero los mejor valorados.
  • Ventas – Primero los más vendidos.
  • Título – Por orden alfabético.
  • Orden del menú.

Como vemos, tenemos un buen número de opciones con las que podemos ajustar a nuestras necesidades cómo se muestran los «Productos más recientes«.

Filtrar por categoría de producto

En este apartado podemos filtrar los productos que se muestran por categorías por lo que podemos seleccionar una o varias categorías que queremos que se muestren y el resto que no se muestren.

En nuestro ejemplo vamos a suponer que solo queremos mostar los productos en oferta de la categoría «Clothing» en una sola fila de 3 elementos.

WooCommerce bloque productos en oferta filtar por categoría

Quedaría de la siguiente forma:

Bloque WooCommerce - Productos más recientes

Como hemos podido observar, WooCommerce nos ofrece mejoras con los bloques que podemos utilizar y los cambios que podemos realizar en los mismos.

Iremos viendo más tipos de bloques para sacarle el máximo partido.

Cualquier duda y observación, dejadme un comentario.

Saludos y ánimo!

Quitar las «equis» de eliminar productos del carrito de WooCommerce

Posted on by Óscar Abad Folgueira

Como es costumbre, antes de ponernos manos a la obra, nos ponemos en situación para saber exactamente lo que queremos hacer antes de hacerlo.

En este caso lo que queremos es que los clientes no puedan eliminar los productos del carrito una vez que ya los han añadido.

Si recordamos, en el carrito se muestrar una «equis», al lado de cada producto que si pulsamos en alguna de ellas, elimina el correspondiente producto del carrito.

Para muestra un botón y en este caso una captura de pantalla:

Quitar las "equis" de eliminar productos del carrito de WooCommerce

Ahora que sabemos a lo que nos referimos, vamos a utilizar un snippet muy sencillo para eliminar esas «equis».

Os recuerdo que este código lo podéis añadir al final del fichero functions.php del tema activo.

Una vez aplicado este código y ano aparecerán las «equis»:

Quitar las equis de eliminar producto en el carrito de WooCommerce

El video

Espero que este código os sea de utilidad.

Cualquier cosa, dejadme un comentario.

Saludos y mucho ánimo!

Comprobar si un producto está en el carrito de WooCommerce

Posted on by Óscar Abad Folgueira

Hoy traigo otro pequeño snippet para que sepamos cómo comprobar si un producto en concreto está en el carrito.

Para ello usaremos la función «find_product_in_cart( $product_id )» de la siguiente forma:

La función «find_product_in_cart()» nos devolverá true si encuentra el producto que le pasamos como parámetro se encuentra en el carrito.

De esta forma podremos trabajar con este resultado para, por ejemplo, mostrar algo, o añadir ese producto al carrito porque siempre tiene que estar, como en el ejemplo del «Producto regalo» que ya hicimos en otro tutorial.

Por lo tanto, aquí teneís el código de este snippet que primero comprueba si el producto cuyo ID es 80 está en el carrito y si no está, lo añade automaticamente.

El video

Ahora vamos a modificar un poco el ejemplo de tal forma que queremos que se añada cierto producto al carrito siempre que ya exista en el carrito otro en concreto.

Para este ejemplo, al producto que añadimos lo seguiremos llamando «Producto regalo» y al otro, al que tiene que estar en el carrito para que se añada éste lo llamaremos «Producto promoción«.

Entonces lo que hacemos es modificar un poquito el código para que:

  • Compruebe que el «Producto promoción» está en el carrito.
  • Si está, añadir el «Producto regalo» automaticamente.
  • Además, si está, antes de añadirlo, que compruebe si ya existe en el carrito.

Como podéis observar, esto se anima y podríamos hacer infinidad de cosas pero por hoy ya hemos tenido bastante.

El video

Si os interesa todo esto o tenéis dudas, dejadme un comentario y lo comentamos.

Saludos y mucho ánimo!

Cambiar el número de productos por fila en WooCommerce

Posted on by Óscar Abad Folgueira

Un pequeño snippet que nos puede ayudar alguna que otra vez.

Se trata de un snippet para establecer el número de productos que se muestran por fila en las páginas de WooCommerce.

Por defecto se muestran 4 productos por fila como se puede ver en la captura siguiente:

Y ahora, aplicando el siguiente snippet:

Obtenemos filas de productos o lo que es lo mismo, 6 columnas:

WooCommerce - Cambiar el número de prodcutos por fila

Si queremos modificar el número de productos por fila sólo debemos modificar el número «6» por el que queramos y listo.

Espero que este snippet os sea de utilidad.

Cualquier cosa, dejáis un comentario.

Mucho ánimo!

Obtener el número de productos que hay en el carrito de WooCommerce

Posted on by Óscar Abad Folgueira

Hoy traigo un nuevo snippet o más bien, una función de WooCommerce que nos permitirá obtener el número de elementos o productos que hay en el carrito.

Esta función es muy útil para ciertos desarrollos y como es tan sencilla, no requiere explicación.

La función que usaremos será get_cart_contents_count(); de la siguiente forma:

He puesto un «echo» para que podamos ver el resultado en pantalla pero esto no lo usaremos de esta forma, claro…

Fácil, ¿verdad?

Si quieres comentarme algo sobre esto, déjame un comentario.

Saludos y mucho ánimo!

WooCommerce Shortcode: Productos [products]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Productos [products]

[products]

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]

Y este será el resultado:

WooCommerce Shortcode - Productos [products]

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»]

WooCommerce - Shortcode "Products" atributo SKUs

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]

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]

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]

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]

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]

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]

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]

Excluir productos de cualquier cupón creado en WooCommerce

Posted on by Óscar Abad Folgueira
Excluir productos de cualquier cupón creado en WooCommerce

Los cupones de WooCommerce son una fantástica herramienta que podemos utilizar en cualquier momento.

Podemos crear todos los cupones que necesitemos e incluso configurarlos para que se adapten a las necesidades que tenemos en nuetra tienda online.

Es más, WooCommerce nos permite bloquear cada cupón por producto y esto es fantástico. Pero ¿qué pasa cuando tenemos muchos cupones y queremos que un producto en concreto no haga caso a cualquier cupón?

Para entendernos…. Queremos no se pueda utilizar ninguno de los cupones que tenemos en un producto en concreto.

El comportamiento por defecto de WooCommerce no nos permite hacer esto, tendríamos que ir cupón por cupón y establecer desde cada uno de ellos, el producto sobre el que no se aplicará.

Ahora bien, si tenemos varios o muchos cupones y no queremos ir cupón por cupón haciendo esto que comentamos, lo ideal sería disponer de una opción a nivel de prodcuto en la cual podamos activar para que no se aplique ningún cupón de nuestro WooCommerce.

Con el siguiente trocito de código hacemos eso, creamos una opción dentro de cada producto de WooCommerce donde, al activarla, le decimos a WooCommerce que no aplique ningún tipo de cupón sobre ese producto.

Este es el código:

Y este es el aspecto de la opción que encontraremos en

WooCommerce - Deshablitar uso cupones por producto

Espero que os sea de utilidad y cualquier cosa ya sabéis, dejad un comentario.

Mucho ánimo!

WooCommerce Snippet: Ordenar las pestañas en la página de producto

Posted on by Óscar Abad Folgueira
WooCommerce Snippet- WooCommerce Snippet- Ordenar las pestañas en la página de producto

Buenas.

Hoy os traigo un snippet (trocito de código) para ordenar las pestañas de la página de producto de WooCommerce.

Para que sepamos a lo que me refiero, pongo una imagen de dichas pestañas:

oscarabadfolgueira - petanias woocommerce producto

Seguramente sólo tengamos las dos que se muestran en la imagen, es decir: «Descripción» y «Comentarios«.

En este tutorial vamos a ver cómo ordenar estas dos en concreto. Si queréis que haga otro tutorial donde vamos cómo ordenar todas las pestañas que podamos tener, me enviáis un email a través del formulario de contacto y veremos lo que se puede hacer, ok?

Pues nada, como es típico, todo está en ingles. Me refiero al nombre de las pestañas. Por lo tanto para referirnos a ellas en el código, en lugar de «Descripción» y «Comentarios«, lo haremos como «description» y «reviews«.

Para referirnos a la pestaña «description» lo haremos a través del acceso al array como:

$tabs['reviews']

Ah, pero con esto no hacemos nada, ¿verdad? como lo que queremos es ordenar las pestañas lo haremos utilizando la propiedad «priority» del array de pestañas de la siguiente forma:

$tabs['reviews']['priority']

Ahora si, ahora accedemos a la propiedad de la prioridad y establecemos los valores que necesitemos.

Antes de establecer los valores de prioridad a cada pestaña, debemos recordar que se le asigna un valor numérico y cuanto mas pequeño sea el valor, más prioridad. Es decir que cuanto más pequeño sea el valor, antes aparecerá dicha pestaña.

Por consiguiente, vamos a poner la pestaña de comentarios en primer lugar y la pestaña de descripción en segundo lugar y para ello utilizaremos el siguiente código:

$tabs['reviews']['priority'] = 5;
$tabs['description']['priority'] = 10;

Muy bien, ahora sólo nos queda utilizar un action hook: «woocommerce_product_tabs» y crear la función que realizará los cambios.

A continuación pongo todo el código para que lo podáis incluir en el fichero «functions.php» de vuestro tema o incluso crear un plugin si os apetece.

Y para estar seguros, a continuación pongo la imagen con el cambio del orden de las pestañas realizado:

oscarabadfolgueira - pestanias woocommerce producto cambiado orden

Bueno, espero que os sea útil.

Saludos y hasta el siguiente…

Ir al contenido