{"id":28707,"date":"2021-05-30T16:13:00","date_gmt":"2021-05-30T13:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28707"},"modified":"2021-10-17T16:35:07","modified_gmt":"2021-10-17T13:35:07","slug":"personalice-la-busqueda-de-productos-de-woocommerce-en-su-sitio-de-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/personalice-la-busqueda-de-productos-de-woocommerce-en-su-sitio-de-wordpress\/","title":{"rendered":"Personalice la b\u00fasqueda de productos de WooCommerce en su sitio de WordPress"},"content":{"rendered":"

\u00bfQuieres personalizar la b\u00fasqueda de productos de WooCommerce en tu tienda online? WooCommerce proporciona una p\u00e1gina de tienda separada para una lista de productos. Al modificar las b\u00fasquedas de productos, su cliente puede filtrar su producto deseado en la propia p\u00e1gina de la tienda. En este art\u00edculo, estudiamos c\u00f3mo personalizar una b\u00fasqueda de productos de WooCommerce en el sitio web de WordPress.<\/p>\n

WordPress viene con el formulario de b\u00fasqueda incorporado. Cuando un usuario ingresa alguna palabra clave en un campo de b\u00fasqueda, lo redireccionar\u00e1 a la p\u00e1gina de b\u00fasqueda donde se mostrar\u00e1 el contenido relacionado con la palabra clave. En WordPress, la p\u00e1gina de b\u00fasqueda normalmente se ve como una p\u00e1gina de listado de publicaciones.<\/p>\n

Este flujo de b\u00fasqueda es ideal para sitios web de CMS. Pero, cuando se trata de WooCommerce, necesitamos modificar este flujo.<\/p>\n

Para WooCommerce, cuando un usuario busca el producto, debe mostrar el resultado filtrado en la p\u00e1gina de la tienda. No tiene ning\u00fan sentido mostrar el resultado en un formato de p\u00e1gina de listado de publicaciones.<\/p>\n

D\u00e9jame explicarte a trav\u00e9s de las capturas de pantalla.<\/p>\n

En mi caso, estoy usando el tema ‘veinticinco’. Instal\u00e9 el complemento WooCommerce y algunos productos se enumeran en la p\u00e1gina de mi tienda.<\/p>\n

\"Personalice<\/a><\/p>\n

Ahora, cuando ingrese la palabra clave, diga ‘desarrollo’ en el campo de b\u00fasqueda, se redirigir\u00e1 a una p\u00e1gina donde veo el producto como se muestra en la captura de pantalla a continuaci\u00f3n.<\/p>\n

\"Personalice<\/a><\/p>\n

Esto es algo que no queremos en un sitio web. Despu\u00e9s de todo, es una tienda en l\u00ednea, por lo que preferimos que la b\u00fasqueda de productos se filtre en la p\u00e1gina de la tienda como se muestra a continuaci\u00f3n.<\/p>\n

\"Personalice<\/a><\/p>\n

Dicho esto, veamos c\u00f3mo personalizar la b\u00fasqueda de productos en WooCommerce.<\/p>\n

Personalizar la b\u00fasqueda de productos de WooCommerce<\/h3>\n

WooCommerce almacena todos los productos con el post_type ‘producto’. Para lograr nuestro objetivo, necesitamos pasar un par\u00e1metro post_type=product<\/code>en la URL de b\u00fasqueda.<\/p>\n

B\u00e1sicamente, cuando presionamos el bot\u00f3n de b\u00fasqueda, necesitamos modificar la URL<\/p>\n

YOUR_SITE_URL \/? S = desarrollo<\/p>\n

Con<\/p>\n

YOUR_SITE_URL \/? S = desarrollo & post_type = producto<\/p>\n

Para esto, necesitamos crear un searchform.php<\/code>archivo en el directorio de nuestro tema activo. Este es el archivo desde el cual WordPress muestra un formulario de b\u00fasqueda. Si este archivo no se encuentra en una carpeta de temas, el formulario de b\u00fasqueda se procesa desde el archivo principal de WordPress. El desarrollador debe crear este archivo en la carpeta del tema si no existe.<\/p>\n

Si ya tiene searchform.php<\/code>su tema, solo necesita agregar un campo oculto al formulario como se muestra en el c\u00f3digo a continuaci\u00f3n.<\/p>\n

searchform.php<\/strong><\/p>\n

<form method=\"get\" action=\"<?php echo home_url('\/'); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"text\" name=\"s\" placeholder=\"What you are looking for?\" value=\"<?php the_search_query(); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"post_type\" value=\"product\">\n<\/form><\/code><\/pre>\n
Aqu\u00ed, debe agregar algo de CSS a este formulario y combinarlo con el dise\u00f1o de su sitio web.<\/p>\n
Observe que hemos pasado un campo oculto con el nombre ‘post_type’ y el valor como ‘producto’. Esta es la l\u00f3gica real para personalizar la b\u00fasqueda de productos en WooCommerce.<\/p>\n
Ahora, intente ingresar el nombre de cualquier producto en el campo de b\u00fasqueda, lo redireccionar\u00e1 a la p\u00e1gina de la tienda. Y en la p\u00e1gina de la tienda, ver\u00e1 el resultado filtrado relacionado con la palabra clave.<\/p>\n
Espero que comprenda c\u00f3mo personalizar la b\u00fasqueda de productos de WooCommerce en su sitio web de WordPress. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n