Bloque WooCommerce: Productos por categoría

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 por categoría «.

Bloque WooCommerce - Productos por categoría

Este bloque nos va a permitir mostrar una serie de productos pero en base a una o varias categorías.

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 por categoría

Buscamos en gloque de «Productos por categoría» 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 por categoría

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

Por supuesto, en el caso de este bloque debemos definir algunos ajustes antes de mostrarlo.

Vamos a ver a continuación las opciones disponibles en el bloque de «Productos en oferta».

Opciones del bloque WooCommerce «Productos por categoría»

Este bloque dispone de algunas opciones similares a los otros bloques pero además dispone de algunos ajustes especficos que vamos a ver…


Categoría de producto

La primera sección que tenemos es la de «Categoría de producto«:

Bloque WooCommerce - Productos por categoría

En este apartado o sección elegiremos la o las categorías de las que queremos que se muestren productos.

Esta opción también la tenemos disponible en el mismo bloque como podemos ver en la siguiente captura de pantalla:

Bloque WooCommerce - Productos por categoría

De cualquira de las dos formas, elegimos la o las categorias / sub-categorías que queremos y guardamos los cambios.

Antes de pasar a la siguiente sección, merece la pena comentar la opción «Mostrar productos que coincidan» que nos ofrece estas dos opciones:

  • Cualquier categoría seleccionada: Se muestran productos de todas las categorías seleccionadas.
  • Todas las categorías seleccionadas: Se muestran productos que pertenezcan a todas las categorías seleccionadas al mismo tiempo.
Bloque WooCommerce - Productos por categoría

Para este ejemplo, he seleccionado las caegorías «Clothing» y «Music«. También he establecido la opcion de «Cualquier categoría seleccionada» para que se muestren productos de cualquiera de esas dos categorías como se puede ver en la siguiente:

Bloque WooCommerce - Productos por categoría

Estructura

La segundaq sección que nos encontramos en este bloque es la de «Estructura» que, al igual que en otros bloques de WooCommerce, nos permite establecer tanto las filas como las columnas de productos que mostraremos en este bloque:

WooCommerce bloque productos en oferta opciones esgtructura

En el siguiente ejemplo hemos establecido 3 columnas y 1 fila para que se muestre de la siguiente forma:

Bloque WooCommerce - Productos por categoría

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 por categoría

Ordernar por

La siguiente sección o apartado que aparece en los ajustes del bloque «Productos en oferta» 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 por categoría«.


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!

Bloque WooCommerce: Búsqueda de productos

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!

Bloque WooCommerce: Productos más recientes

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!

Bloque WooCommerce: Productos en oferta

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 en oferta«.

WooCommerce - bloque productos en oferta

Este bloque nos va a permitir mostrar los productos que tenemos en oferta en nuestra tienda con una serie de ajustes que vamos a ver más adelante.

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.

WooCommerce Bloques

Buscamos en gloque de «Productos en oferta» 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:

WooCommerce bloque productos en oferta

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

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

WooCommerce bloque productos en oferta

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 en oferta»

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

WooCommerce bloque productos en oferta opciones

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:

WooCommerce bloque productos en oferta opciones contenido

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:

WooCommerce bloque productos en oferta opciones contenido

Ordernar por

La siguiente sección o apartado que aparece en los ajustes del bloque «Productos en oferta» 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 en oferta«.


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:

WooCommerce bloque productos en oferta filtar por categoría

Recordemos que en este bloque sólo se muestran los productos en oferta, es decir, aquellos que tenemos rebajados de precio.


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!

Ir al contenido