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
ÍNDICE AÑADIR BARRA BÚSQUEDA HEADER
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ú.
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.
Añadir un shortcode al menú de WordPress
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 asociado a la barra de búsqueda de productos
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.
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 al header con Woocommerce
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í.
Hola! muchas gracias por tu ayuda, he conseguido poner el botón de búsqueda y que funcione, pero me gustaría que estuviera en la página de tienda y no como un desplegable. Además, el tamaño es muy pequeño y no se ve el producto completo cuando estás buscando. Sabrías cómo solucionarlo? Muchas gracias
Buenas
en el post se explica como poner una barra de búsqueda no como desplegable. La barra al colocarla en el header debe aparecer en todas las páginas, también en la de tienda. Al final todo depende de las características del plugin que estés utilizando como barra. Si el plugin que has utilizado no te convence prueba con otros
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso Blog WordPress, Curso seguridad y actualizaciones en wordpress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso seguridad y actualizaciones en WordPress, Curso Divi, Curso Flatsome, Curso Elementor, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, Curso como gestionar un blog, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, etc… (Más de 30 cursos)
Hola he istalado el pluggin y seguido todos los pasos, pero no me funciona el buscador. Sabrias porque puede ser?
Buenas. Estoy entrando a las categorías de tu tienda y no se muestran productos. Si no tienes productos publicados el buscador no puede encontrar productos. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, plantillas wordpress como flatsome, Divi, Astra pro, cursos Analytics ecommerce, seo general, SEO tiendas online, etc. etc.
Muchas gracias, excelente artículo, claro y didáctico.
Saludos
Hola Fernanda.
Me alegro que te haya gustado el post. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Woocommerce, Analytics ecommerce, Diseñador web freelance, SEO Tiendas online, Astra Pro, Elementor, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
DEscargue el plugin Shortcut pero no me aparece en la apariencia
Hola Sebastián.
1.- Imagino que lo has instalado y activado. Cuando estés en «apariencia > menús» verás que en la parte superior derecha de la pantalla hay un botón que se llama: «Opciones de pantalla». Haz clic en el botón y mira a ver si tienes desactivada la visibilidad de el plugin que facilita añadir shortcodes al menú
2.- Existen otros plugins de buscadores de producto para Woocommerce que se pueden añadir al menú sin necesidad de ese plugin de shortcode. Por ejemplo, el plugin Ajax Search for Woocommerce
3.- ***Como veo que estás en proceso de creación de tu tienda en Woocommerce, me gustaría invitarte a que echaras un vistazo a mi plataforma de formación online, en la que encontrarás cursos de Woocommerce, WordPress, SEO para tiendas online, Analytics para ecommerce, y muchos más. En este momento, por solo 10 €/mes puedes acceder a TODOS los cursos. Además, incluye soporte. -> CURSOTIENDAONLINE.COM
He mirado en la parte superior derecha y no he encontrado ningún botón que indique «shortcut». El shortcut no me aparece en apariencia-Menu. ¿Qué puedo hacer?
Hola Cesar.
Vea a «Apariencia > menus» y haz clic en la parte superior derecha, donde dice «Opciones de pantalla». Mira a ver si no tienes activado ese elemento. ***Me gustaría también, si puedes, que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre WordPress, sobre Woocommerce, SEO tiendas online, analytics para ecommerce, SEO general, sobre Mailchimp, blog WordPress, etc. etc. Además, cada mes añado un nuevo curso a la plataforma ****
Te felicito este tutorial es muy practico y sencillo fácil de entender
Hola Joaquín! Fantástico saber esto ya que hay clientes que lo solicitan poner en sitios insospechados 😱.
La pega como dicen es que es añadir dos plugins más pero bueno, más vale esto que nada.
Saludos!
Hola, muchas gracias por tu ayuda la verdad me soluciono el problema, mi duda es en versión móvil se ve si despliego el menú pero como haría si quiero que salga en la barra del header no en el menú.
Agradecería me ayudases
Hola Juan Carlos.
Tendrías que probar en ese caso a usar el Divi theme builder(si estás usando la plantilla Divi) y crear un diseño de cabecera o header personalizado.
Hola!
me ha ido perfecto con esta solución, solo una pregunta, a ver si me puedes ayudar:
– ¿como puedo limitar la búsqueda al idioma por defecto que está la página?
es que ahora cuando busco un producto por sku me aparecen los resultados por duplicado, en español e inglés.
Muchas Gracias
Buenas Eva.
El plugin no tiene ninguna opción deconfiguración a este respecto.
Consulta al soporte del plugin de idiomas que tengas instalado a ver que te dicen, y al del plugin de búsquedas que estés utilizando.
Hola,
Ante todo muchs gracias por el articulo me ha servido mucho. Pero me ha surgido un problema en el movil, no me realiza la busqueda como en el pc, es decir en el pc me muestra los productos y en el movil me muestra las entradas del blog.
Gracias¡
Hola María.
A ver si en el móvil te está mostrando otra barra de búsqueda diferente
a ver si me puedes ayudar, en principio en el desplegable del buscador me aparecen los productos, pero al clicar enter arroja una pagina sin resultados, que hice mal?
Buenas,
Eso no es debido la colocación de la barra en el header. Eso debe ser cosa exclusiva del plugin de barra de búsqueda de productos. Consúltalo en el foro de soporte del plugin Smart Woocommerce Search (Si estás usando otro plugin busca en su soporte)
Hola! No me aparece la opción de «Shortcode» en Apariencia>Menús, no sé a que se debe. Solo aparecen Entradas, Enlaces personalizados, categorías y Variables de WooCommerce.
Saludos.
Buenas
pero, ¿te has instalado el plugin?
Buen truco¡¡¡ La única pega es que hay que añadir dos plugins más a la instalación. Un saludo
Buenas.
Jejeje, si todo tiene un precio.
También es cierto que los plugins en cuestión son muy poco pesados
un saludo