En este post vamos a analizar los diferentes Widgets que proporciona Woocommerce por defecto tras su instalación en WordPress.

Veremos como funcionan cada uno, para qué sirve y en qué casos puede ser recomendable su uso en la barra lateral o sidebar de la tienda online, como apoyo a la búsqueda y selección de productos por parte del usuario.

Los widgets específicos de Woocommerce tienen como misión ayudar al cliente a encontrar los productos que está buscando.

DESCUENTOS DIVI

 

 

 

 

 

1.- Widget Búsqueda de productos en Woocommerce

 

Woocommerce incorpora por defecto un widget denominado: “Búsqueda de productos”, que es un buscador por palabras.

Este buscador que incorpora por defecto Woocommerce sirve de apoyo a la tienda para que los visitantes puedan realizar búsquedas por palabras de los diferentes productos.

La única opción que tiene de configuración es para poner el nombre o título al widget, que se mostrará justo encima de él.

Disponer de un buscador por palabras en una tienda online me parce algo fundamental e imprescindible (en la mayoría de los casos). Pero lo cierto es que el buscador en forma de widget que incorpora por defecto Woocommerce deja bastante que desear por el momento. Principalmente porque no dispone de tecnología AJAX con miniaturas.

 

Aquí tienes un enlace a un post en el que se comentan diferentes plugins para añadir buscadores de productos más potentes: Buscadores para Woocommerce

 

La tecnología Ajax con miniaturas en un buscador por palabras proporciona resultados con imágenes mientras se está escribiendo el nombre del producto que se desea buscar.

 

 

2.- Widget de carrito de compra en Woocommerce / WordPress

 

Woocommerce también incorpora un widget de carrito de compra que se denomina: “Carrito”.

En el carrito de compra de una tienda online se acumulan los diferentes productos que añade un cliente a un pedido. Una vez que haya añadido todos los productos que desea comprar al carrito, procederá a realizar el pago de todo el pedido (checkout).

 

En este post puedes ver los elementos que conforman una tienda online: Elementos de una tienda online

 

Woocommerce muestra en la parte superior de la plantilla un enlace al carrito, pero si añadimos este widget a la barra lateral o sidebar pues se irán mostrando en ella todos los productos que se vayan añadiendo.

Es un widget que, aunque no imprescindible, es sin duda interesante para añadir a la barra lateral.

 

Este widget tiene dos opciones de configuración:

  • i.- Título: aquí pondremos el nombre que aparecerá encima del widget
  • ii.- Ocultar el carrito si está vacío: si marcamos esta opción, el widget no se mostrará hasta que no haya ningún producto añadido al carrito.Creo que tiene todo el sentido del mundo marcar esta opción.

 

widget de carrito de tienda online

Widget Woocommerce/Wordpress de carrito

 

En la parte inferior del widget de carrito de wordpress nos aparecen dos botones:

  • i.- Ver carrito: esta pantalla nos llevaría a la página propia del carrito de la tienda online, en la cual aparecerán los diferentes productos añadidos al pedido y las unidades. También se mostrarán los precios y la opción de finalizar compra (comenzar el checkout)
  • ii.- Finalizar compra: si hacemos clic en este botón se omitirá o saltará la página del carrito y comenzaremos directamente con el checkout consistente la interface o pantalla de registro.

 

 

3.- Widget de categorías de productos en Woocommerce / WordPress

 

Este widget mostrará un listado de las diferentes categorías de la tienda online. El widget se denomina: “Categorías de los productos”.

De manera general parece un widget bastante prescindible y repetitivo, ya que deberíamos tener la estructura de categorías reflejada en el menú superior.

Pero ajustando la configuración, si puede ser un widget bastante interesante. Por ejemplo, si marcamos la opción: “Mostrar solo subcategorías de la categoría actual” solo se mostrarán las subcategorías que dependen de la categoría que está visitando el cliente. Esta opción si puede ser interesante de manera general para ayudar al cliente a navegar por la estructura de categorías de la tienda.

 

Este widget si tienes unas cuantas opciones de configuración:

 

i.- Título: texto que aparecerá en la parte superior del widget

 

ii.- Ordenar por: aquí seleccionaremos entre “Nombre” y “Orden de la categoría” para establecer como aparecerán ordenadas las diferentes categorías de la tienda.

 

iii.- Mostrar como desplegable: si elegimos esta opción, en vez de aparecer una lista de todas las categorías aparecerá un botón desplegable sobre el cual hacer clic para ver el listado de categorías.

 

iv.- Mostrar contador de productos: si marcamos esta opción aparecerá junto a cada categoría el número de productos que contiene.

 

v.- Mostrar jerarquía: si marcamos esta opción se mostrará visualmente la dependencia entre categorías y subcategorías.

 

vi.- Mostrar solo subcategorías de la categoría actual: esta sea tal vez la opción más importante, consistente en mostrar solo las subcategorías que dependen de la categoría que está visitando el cliente. Este menú ayudará al cliente a continuar en la navegación a través de categorías y subcategorías de la tienda online.

Para que esta opción funcione correctamente ha de estar desactivada la opción “Mostrar jerarquía”

 

widget para mostrar categorías de la tienda online

Widget de categorías de Woocommerce

 

En el ejemplo de la imagen anterior tras hacer clic en la categoría “Mobiliario Clínico” solo se muestra en el widget de categorías las subcategorías de “Mobiliario Clínico” que son: “Carritos de cirugía, Lámparas de cirugía, Lámparas de gabinete y Sillones dentales” ayudando al cliente a continuar afinando su búsqueda hasta encontrar el producto que necesita.

 

Si utilizas la plantilla Divi, seguramente te interesará este plugin para ampliar sus opciones con Woocommerce: Divi Shop Extended

 

vii.- Ocultar categorías vacías: si marcamos esta opción, no se mostrarán las categorías que no tienen ningún producto asignado.

 

viii.- Profundidad máxima: aquí estableceremos el máximo número de subcategorías a mostrar por el widget.

 

 

4.- Widget de filtro de productos por atributos con Woocommerce

 

Este también es un widget muy interesante que nos permite que cuando un cliente haga clic en una categoría o subcategoría nos aparezca un filtro o varios (cada widget sería un filtro) según los atributos de producto que configuremos, con la finalidad de que si el cliente así lo quiere se muestren solo los productos de esa categoría que cumplan la condición establecida por el cliente en el filtro.

 

 

4.1.- Ejemplo de uso del filtro de productos por atributos

 

Veamos un ejemplo para entenderlo mejor. Tenemos en la tienda una serie de productos que tienen diferentes longitudes (atributo longitud de brazo).

Si hacemos clic en la categoría pertinente nos aparecen todos los productos que pertenecen a dicha categoría.

En la barra lateral hemos añadido un widget de filtro de productos por el atributo longitud de brazo.

 

Widget de filtro por atributos con Woocommerce

Widget Woocommerce por defecto de Filtro por atributos

 

Ahora hacemos clic en el valor “75 cm” del atributo “Longitud de brazo” y se volverá a cargar la página. Pero al recargarse solo mostrará los productos que pertenecen a la categoría y que disponen de alguna variación de producto con el valor “75 cm”.

 

ejemplo de seleccion de valor del widget de filtro de atributos

Seleccionado valor del filtro de atributos

 

Nota: el cliente puede seleccionar varios valores dentro del mismo filtro. Es decir, por ejemplo, marcar “75 cm” y “100 cm”

 

 

4.2.-  Opciones de configuración del widget de filtro atributos de Woocommerce

 

Este widget tiene las siguientes opciones de configuración:

i.- Título: aquí estableceremos el título que aparecerá en la parte superior del widget

 

ii.- Atributo: aquí seleccionaremos el atributo por el cual queremos que filtre el widget. Podemos añadir varios widgets cada uno con un atributo diferente por el que filtrar.

 

iii.- Tipo de visualización: con esta opción elegiremos como queremos mostrar los valores del atributo a filtrar. Con una lista de valores o con un selector que al hacer clic sobre él despliegue los diferentes valores.

 

iv.- Tipo de consulta: un cliente puede hacer clic en varios valores del filtro. Con esta opción elegiremos en esos casos:

a.- Y: si queremos que los productos que muestre Woocommerce cumplan que tienen todos y cada uno de los valores seleccionados por el cliente. Es decir, los productos mostrados dispondrán del valor 1 “Y” el valor 2

b.- O: en este caso los productos tendrán variaciones con valores de alguno de los atributos seleccionados. Es decir, los productos mostrados dispondrán del valor 1 “O” el valor 2

 

 

5.- Filtro de productos por precio en Woocommerce

 

También viene por defecto en Woocommerce un widget que tiene la funcionalidad de filtrar los productos según el precio de los mismos.

Este widget se denomina: “Filtrar productos por precio” y solo tiene una opción de configuración que se corresponde con el título del widget

 

Amplía las opciones generales de la plantilla Divi con: Divi Booster

 

El cliente podrá establecer un intervalo de precios con el selector del widget y al hacer clic en el botón “Filtrar”, solo se mostrarán aquellos productos cuyo precio esté comprendido en el intervalo seleccionado por el cliente en el filtro.

 

Widget de filtros de productos woocommerce por precio

Widget de filtro por precios

 

Es un widget que puede ser interesante

 

 

6.- Filtro de productos por Puntuaciones en Woocommerce

 

Este widget sirve para que Woocommerce muestre un filtro según el número de estrellitas provenientes de las valoraciones y puntuaciones aportadas por los clientes.

Es decir que, si estamos en una categoría y hacemos clic en 3 estrellas, pues se recargará la página y solo se mostrarán aquellos productos que pertenezcan a la categoría y hayan sido valorados con 3 estrellas de media por parte de los clientes.

 

Aprende a añadir un selector de variaciones visual a Woocommerce: Selector de variaciones Woocommerce

 

Este widget solo tiene la opción de “Título” para su configuración.

 

 

7.- Widget de filtros activos de Woocommerce

 

Este es otro widget que incorpora Woocommerce por defecto y que sirve para indicar al cliente todos los filtros que tiene seleccionados en un determinado momento.

El nombre del widget es: “Filtros de productos activos”

En el siguiente ejemplo puedes ver que en filtros activos muestra los valores por los cuales se están filtrando los productos. En el ejemplo, hay un filtro por el valor “75 cm” del atributo “longitud de brazo” y hay otro filtro activado que corresponde a un intervalo en el precio de producto entre 986 € y 1.456 €

 

Widget de filtros activos en Woocommerce

Widgets de filtros en uso woocommerce

 

 

8.- Widget de nube de etiquetas de productos

 

Este widget denominado: “Nube de etiquetas de productos”, muestra una nube de etiquetas según las etiquetas que hayamos ido asignando a cada uno de los productos de la tienda.

En mi opinión la clasificación de productos por etiquetas es poco interesante al igual que sucede con las etiquetas de los posts.

Por este motivo, este widget no me parece interesante.

 

 

9.- Widget de productos en Woocommerce

 

Este widget se denomina: “Productos” y en determinados casos podría ser un widget interesante.

El widget mostrará una serie de productos, con su enlace e imagen en miniatura, según los parámetros de configuración que realicemos en el mismo.

 

widget de productos woocommerce

Widget para mostrar productos con Woocommerce

 

Las opciones de configuración que incorpora el widget son:

  • i.- Título: título del widget
  • ii.- Número de productos a mostrar: número de productos que mostrará el widget como máximo.
  • iii.- Mostrar: aquí estableceremos la tipología de productos a mostrar: todos los productos (cualquier producto), Productos destacados (los que tiene la “estrellita”) o Productos rebajados (Productos con algún descuento)
  • iv.- Ordenar por: aquí estableceremos el criterio por el cual queremos que aparezcan ordenados los productos
  • v.- Orden: según el criterio anterior, aquí estableceremos si es un orden ascendente o descendente.
  • vi.- Ocultar productos gratuitos:  si marcamos esta opción no se mostrarían los productos que fueran gratuitos.

 

 

10.- Widget de productos por puntuación en Woocommerce

 

Este widget se denomina: “Productos por puntuación” y mostrará los productos con mejores valoraciones (estrellitas) realizadas por los clientes.

En la configuración estableceremos el título del widget y el número de productos a mostrar por parte del widget.

 

Configurar los gastos de envío por peso con Woocommerce: Gastos de envío por peso

 

 

11.- Widget de productos vistos por el visitante

 

Uno de los últimos widgets que vamos a ver, pero en mi opinión uno de los más interesantes, es el widget denominado: “Productos vistos recientemente”.

Este widget irá mostrando de manera paulatina los productos que vaya visualizando el cliente que haya accedido a la web conforme navega por la misma.

Es decir, este widget mostrará diferentes productos a cada uno de los visitantes a la tienda online.

 

widget de últimos productos visitados por el cliente con woocommerce

Widget de últimos productos vistos por el cliente en Woocommerce

 

El widget de “Productos vistos recientemente” de Woocommerce / WordPress tiene las siguientes opciones de configuración:

  • i.- Título: título que aparecerá encima del widget
  • ii.- Número de productos a mostrar: número de productos máximo a mostrar

 

 

12.- Widget de valoraciones recientes de productos

 

Este widget denominado: “Valoraciones recientes de productos” mostrará las últimas valoraciones realizadas sobre productos de la tienda.

En este widget configuraremos el título y el número máximo de valoraciones a mostrar en el widget.

 

 

Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.