En cualquier tienda online es importante disponer de un buscador de productos, ya que es una de las formas habituales que usan los visitantes para buscar productos en una tienda online.

Además, es interesante que esa barra de búsqueda se muestre en la cabecera de la web para que siempre esté visible y disponible para el cliente. En el caso de WordPress / Woocommerce, es sencillo añadir una barra de búsqueda de producto en la barra lateral a modo de widget, pero es más complicado mostrarla en el header.

En este post vamos a ver de qué manera podemos añadir una barra de búsqueda de productos al header o cabecera de una web realizada con WordPress y Woocommerce.

Existen determinadas plantillas para wordpress y Woocommerce que ya cuentan por defecto con la posibilidad de mostrar una barra de búsqueda de productos, pero hay otras muchas que no.

 

APÚNTATE A MIS CURSOS PREMIUM. ACCEDE A TODOS LOS CURSOS POR SOLO 10 €/MES

VER CURSOS

 

 

 

 

1.- Elementos necesarios para añadir una barra de búsqueda al header con Woocommerce

 

Para poder añadir una barra de búsqueda al header con WordPress/Woocommerce Vamos a necesitar 2 elementos:

 

i.- Plugin de barra de búsqueda: necesitaremos un plugin que implemente la barra de búsqueda de productos y que exista la posibilidad de incluir dicha barra a través de un shortcode. No todos los plugins tienen esta posibilidad, pero si muchos de ellos.

Nosotros vamos a utilizar el plugin gratuito Smart Woocommerce Search que permite añadir una barra de búsqueda Ajax a través de un shortcode.

 

ii.- Plugin Shortcode in menú: en WordPress no es posible añadir un shortcode a un ítem de menú. Pero existen plugins que nos van a añadir la funcionalidad de poder añadir un shortcode a un ítem del menú. De esta manera podremos añadir el shortcode de la barra de búsqueda al header como si fuera un elemento del menú.

 

En este post tienes diferentes plugins de barra de búsqueda de productos para Woocommerce. No todos será posible añadirlos a través de un shortcode: Plugins barra búsqueda Woocommerce

 

 

2.- Plugin Shortcode in menú, para añadir shortcodes al menú de WordPress

 

Instálate el plugin gratuito Shortcode in menú

Una vez instalado, si vas a “apariencia > menú” verás que hay una nueva tipología de elementos de menú denominada Shortcode, que nos permitirá poner un nombre o título (que no se mostrará) y a través de un área de texto nos permitirá añadir el shortcode.

 

cómo poner un shortcode en un item de menú wordpress

Añadir un shortcode al menú de WordPress

 

 

3.- Plugin buscador productos Woocommerce con Shortcode para insertarla en el menú

 

En el post, vamos a usar el plugin gratuito Smart Woocommerce Search. Pero puedes usar cualquier plugin de barra de búsqueda de productos para Woocommerce, que permita incluir la barra a través de un shortcode.

Vamos a utilizar el plugin Smart Woocommerce Search, porque es un plugin que permite ser añadido a través de un shortcode y porque usa tecnología Ajax. Es decir, que va proporcionando resultados conforme vamos escribiendo en la barra.

Además, muestra miniaturas de las imágenes de los productos en la lista de resultados.

También ofrece opciones de personalización de textos, ajustes de los elementos de búsqueda y algunas opciones de diseño.

 

 

3.1.- Configurar Smart Woocommerce Search

 

Una vez instalado y activado el plugin, iremos a: “Smart Search > Custom Widget” en el menú lateral izquierdo del backoffice de WordPress, para crear una barra de búsqueda.

A continuación, haremos clic en el botón “Add New” situado en la parte superior.

Pondremos un nombre a la barra de búsqueda en el campo “Enter Name” y personalizaremos la configuración de la barra en las pestañas: General, ítems to search throught y Styling.

 

 

i.- Pestaña configuración General, barra búsqueda:

 

En esta pestaña podremos personalizar textos como:

“Search …” por “Buscar …”

“No Results” Por “Sin resultados”

“View all” por “Ver todos los resultados”.

Character Amount: mínimo número de caracteres que es necesario escribir en la barra para que comience la búsqueda de coincidencias. El valor que viene por defecto está bien

Results Listing Amount: estableceremos el número máximo de resultados que se mostrarán en la barra.

Display image: para mostrar en los resultados una imagen en miniatura de los productos cuando se realice una búsqueda.

Display Excerpt: para mostrar o no una descripción del producto

Excerpt Symbol Amount: extensión máxima de la descripción que se mostrará en los resultados

Display Price: mostrar precio

Display SKU: Mostrar referencia de producto

 

 

ii.- Configurar Pestaña Item to Search Through, del buscador

 

Aquí vamos a establecer en que tipo de entidades ha de realizar la búsquedas el plugin

 

Search in Entradas: marcaremos esta opción si queremos que la barra de búsqueda muestre posts o entradas de blog en los resultados

Search in Páginas: marcaremos esta opción si queremos que la barra muestre páginas en los resultados de búsqueda

Search in Productos: esta opción la debemos marcar si o sí. Sirve para establecer que la barra de búsqueda realice búsquedas de productos de la tienda online.

Search in Variations: si marcamos esta opción la barra de búsqueda podrá realizar búsquedas sobre variaciones o combinaciones de productos. Es decir, búsquedas a través de atributos de productos.

Search in title: marcaremos esta opción si queremos que la barra de búsqueda busque coincidencias con los títulos de productos, posts o páginas

Search in content: marcaremos esta opción para que la barra de búsqueda busque coincidencias en el texto del contenido del producto, post o página.

 

Y así con el resto de elementos. También es muy interesante marcar la opción de Search in Product SKU para poder realizar búsquedas según la referencia del producto.

En el siguiente apartado, denominado “Restrictions” podremos establecer algunas restricciones en la búsqueda. Es decir, elementos o entidades donde no tendría que realizar búsquedas.

 

 

iii.- Pestaña Styling

 

En este apartado tenemos varias opciones de personalización de diseño de la barra y de los resultados de búsqueda. Grosores, colores, etc.

Una vez personalizado todo haz clic en el botón de “Save” (guardar) situado en la parte inferior de la pantalla.

 

 

3.2.- Cúal es el Shortcode asociado a la barra de búsqueda

 

Para saber cuál es el shortcode asociado a la barra que acabamos de crear, iremos a: “Smart Search > Custom Widget” y se mostrará la barra de búsqueda generada y el shortcode asociada a ella

 

shortcode barra busqueda productos

Shortcode asociado a la barra de búsqueda de productos

 

 

4.- Añadir el shortcode de la barra de búsqueda al menú

 

El último paso en el proceso será añadir el shortcode de la barra de búsqueda en el menú de WordPress.

Para ello, iremos a: “Apariencia > menus”

En la barra lateral, selecciona “Shortcode”, pon un título (no se mostrará) e introduce el shortcode en el área de texto.

 

poner barra de busqueda de productos en el header

Añadir shortcode de buscador de productos al menú

 

A continuación, haz clic en “Add to menú”, colócalo en la posición adecuada y guarda el menú.

 

Buscador de productos añadido a la cabecera con Woocommerce y wordpress

Buscador de productos añadido al header con Woocommerce

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO PRESTASHOP (56 Clases)
2.- CURSO WOOCOMMERCE (39 Clases)
3.- CURSO SEO TIENDAS ONLINE (12 Clases)
4.- CURSO PLANTILLA WAREHOUSE (26 Clases)
5.- CURSO PLANTILLA FLATSOME (36 Clases)
6.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
7.- CURSO BLOG PRESTASHOP (12 Clases)
8.- CURSO WORDPRESS (44 Clases)
9.- CURSO DIVI (33 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO IMÁGENES WEB (15 Clases)
12.- CURSO SEO GENERAL (19 Clases)
13.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!