Personalice la búsqueda de productos de WooCommerce en su sitio de WordPress

¿Quieres personalizar la búsqueda de productos de WooCommerce en tu tienda online? WooCommerce proporciona una página de tienda separada para una lista de productos. Al modificar las búsquedas de productos, su cliente puede filtrar su producto deseado en la propia página de la tienda. En este artículo, estudiamos cómo personalizar una búsqueda de productos de WooCommerce en el sitio web de WordPress.

WordPress viene con el formulario de búsqueda incorporado. Cuando un usuario ingresa alguna palabra clave en un campo de búsqueda, lo redireccionará a la página de búsqueda donde se mostrará el contenido relacionado con la palabra clave. En WordPress, la página de búsqueda normalmente se ve como una página de listado de publicaciones.

Este flujo de búsqueda es ideal para sitios web de CMS. Pero, cuando se trata de WooCommerce, necesitamos modificar este flujo.

Para WooCommerce, cuando un usuario busca el producto, debe mostrar el resultado filtrado en la página de la tienda. No tiene ningún sentido mostrar el resultado en un formato de página de listado de publicaciones.

Déjame explicarte a través de las capturas de pantalla.

En mi caso, estoy usando el tema ‘veinticinco’. Instalé el complemento WooCommerce y algunos productos se enumeran en la página de mi tienda.

Ahora, cuando ingrese la palabra clave, diga ‘desarrollo’ en el campo de búsqueda, se redirigirá a una página donde veo el producto como se muestra en la captura de pantalla a continuación.

Esto es algo que no queremos en un sitio web. Después de todo, es una tienda en línea, por lo que preferimos que la búsqueda de productos se filtre en la página de la tienda como se muestra a continuación.

Dicho esto, veamos cómo personalizar la búsqueda de productos en WooCommerce.

Personalizar la búsqueda de productos de WooCommerce

WooCommerce almacena todos los productos con el post_type ‘producto’. Para lograr nuestro objetivo, necesitamos pasar un parámetro post_type=producten la URL de búsqueda.

Básicamente, cuando presionamos el botón de búsqueda, necesitamos modificar la URL

YOUR_SITE_URL /? S = desarrollo

Con

YOUR_SITE_URL /? S = desarrollo & post_type = producto

Para esto, necesitamos crear un searchform.phparchivo en el directorio de nuestro tema activo. Este es el archivo desde el cual WordPress muestra un formulario de búsqueda. Si este archivo no se encuentra en una carpeta de temas, el formulario de búsqueda se procesa desde el archivo principal de WordPress. El desarrollador debe crear este archivo en la carpeta del tema si no existe.

Si ya tiene searchform.phpsu tema, solo necesita agregar un campo oculto al formulario como se muestra en el código a continuación.

searchform.php

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type" value="product">
</form>

Aquí, debe agregar algo de CSS a este formulario y combinarlo con el diseño de su sitio web.

Observe que hemos pasado un campo oculto con el nombre ‘post_type’ y el valor como ‘producto’. Esta es la lógica real para personalizar la búsqueda de productos en WooCommerce.

Ahora, intente ingresar el nombre de cualquier producto en el campo de búsqueda, lo redireccionará a la página de la tienda. Y en la página de la tienda, verá el resultado filtrado relacionado con la palabra clave.

Espero que comprenda cómo personalizar la búsqueda de productos de WooCommerce en su sitio web de WordPress. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Artículos relacionados

• Una guía rápida sobre la API REST de WooCommerce
• Cómo agregar puntos finales personalizados a la API de WordPress
• Cómo mostrar productos relacionados con la API REST de WooCommerce