Buscador de productos de WooCommerce en menú de Genesis

Hace unos días veíamos cómo añadir una caja de búsqueda en el menú de la web en Genesis, hoy vamos a hacer algo parecido, pero añadiendo el buscador de productos de WooCommerce (el código original es de wpstud.io)

Para hacerlo, vamos a añadir el siguiente código en nuestro archivo functions.php ( o en un snippet de código)

add_filter( 'wp_nav_menu_items', 'wpstudio_add_woo_search', 10, 2 );

/**
 * Add WooCommerce cart to primary navigation Genesis
 * @author Frank Schrijvers
 * @link https://www.wpstud.io/add-woocommerce-cart-to-genesis-navigation/
 */

function wpstudio_add_woo_search( $menu, $args ) {

//* Cambiar 'primary' por 'secondary' para añadir la caja de búsqueda en el menú secundario
 if ( 'primary' !== $args->theme_location )
 return $menu;
 
 $form = '<form id="searchform" role="search" action="' . esc_url( home_url( '/' ) ) . '" method="get"><input id="s" name="s" type="text" value="' . get_search_query() . '" placeholder="' . __( 'Buscar producto', 'woocommerce' ) . '" /> <input id="searchsubmit" type="submit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" /> <input name="post_type" type="hidden" value="product" /></form>'; $menu .= '
<ul>
 	<li class="searchbox">' . $form . '</li>
</ul>
'; return $menu; }

add_filter( 'wp_nav_menu_items', 'wpstudio_add_woo_search', 10, 2 );

/**

* Add WooCommerce cart to primary navigation Genesis

* @author Frank Schrijvers

* @link https://www.wpstud.io/add-woocommerce-cart-to-genesis-navigation/

function wpstudio_add_woo_search( $menu, $args ) {

//* Cambiar 'primary' por 'secondary' para añadir la caja de búsqueda en el menú secundario

if ( 'primary' !== $args->theme_location )

return $menu;

$form = '<form id="searchform" role="search" action="' . esc_url( home_url( '/' ) ) . '" method="get"><input id="s" name="s" type="text" value="' . get_search_query() . '" placeholder="' . __( 'Buscar producto', 'woocommerce' ) . '" /> <input id="searchsubmit" type="submit" value="'. esc_attr__( 'Search', 'woocommerce' ) .'" /> <input name="post_type" type="hidden" value="product" /></form>'; $menu .= '

<ul>

</ul>

'; return $menu; }

Los productos de WooCommerce no dejan de ser custom post type, por tanto lo que hacemos es añadir un campo oculto en el buscador indicando que busque dentro de este tipo de posts:

<input name="post_type" type="hidden" value="product" />

1	<input name="post_type" type="hidden" value="product" />

En general esto os sirve para construir un buscador de cualquier custom post type que necesitéis, ya sea en un widget, en el pie de página, etc…

El diseño del buscador dependerá de los estilos de vuestro child theme, el artículo original nos ofrece unos estilos básicos en los que basarnos para poder personalizar el nuestro:

.searchbox {
 float: left;
}
.searchbox form {
 width: 320px;
}

.searchbox form input {
 padding: .8em
}

.searchbox form input[type='text'] {
 width: 70%;
}

.searchbox form input[type='submit'] {
 width: 30%;
}

.searchbox {

float: left;

}

.searchbox form {

width: 320px;

}

.searchbox form input {

padding: .8em

}

.searchbox form input[type='text'] {

width: 70%;

}

.searchbox form input[type='submit'] {

width: 30%;

}

Espero que os sirva!

¿Eres desarrollador web y te encanta Genesis Framework o quieres empezar a utilizarlo?

Suscríbete y recibe, además de todos los posts y tutoriales del blog, consejos, reflexiones y prácticas para mejorar tu negocio de desarrollo web para clientes.

Comentarios

José Miguel says

agosto 27, 2018 at 4:59 pm

Hola buenas tardes!!!

Como podríamos integrar el buscador de productos de woocommerce en el tema DIVI?

Gracias de antemano, un saludo

Responder
- esther says
  
  agosto 28, 2018 at 5:28 am
  
  Hola José Miguel!
  Este artículo es específico para Genesis Framework, pero aquí tienes un artículo donde explica cómo hacerlo en Divi: https://ivanros.com/2018/07/buscador-de-productos-en-menu-divi/
  Espero que te sirva!
  
  Responder

¿Eres desarrollador web y te encanta Genesis Framework o quieres empezar a utilizarlo?

Artículos relacionados

Reader Interactions

Comentarios

Deja un comentario Cancelar la respuesta