[Resolved] Configuración de navegación principal

[Tom]

Glad I could help 🙂

[Pedro]

Hola Tom! Esta barra de búsqueda me ha gustado tanto que decidí colocarla en mi otro sitio.

Ahora, he instalado el plugin WooCommerce Product Search, con el que se puede mostrar los productos en la barra de búsqueda.

Este es el enlace del plugin: https://woocommerce.com/products/woocommerce-product-search/

¿Podrías ayudarme a integrarlo con esta barra de búsqueda que me ayudaste a hacer?

¡Muchas gracias!

[Tom]

Hi there,

Not too sure what you’d have to do here. Maybe replace the search form HTML with a shortcode from the plugin?

However, you will likely need to re-design the form completely as it won’t use the same selectors that I used in the previous code.

[Pedro]

Hola Tom! Gracias por responder.

Entonces esta opción estaría descartada. La otra opción es que los resultados de búsqueda solo muestren productos.

Ya que actualmente la barra de búsqueda está mostrando entradas, páginas y productos.

¿Sabes cómo puedo hacer esto?

[Tom]

To do that, you could replace this:

<input type="text" value="" name="s" id="s" placeholder="Busca libros, autores y más">

With this:

<input type="text" value="" name="s" id="s" placeholder="Busca libros, autores y más">
<input type="hidden" name="post_type" value="product" />

[Pedro]

Hola Tom!

Hice el cambio en el hook tal como me indicaste, pero no sucede nada.

Cuando hago una búsqueda me muestra las entradas, páginas y productos.

Además que el formato que muestra los productos no es el correcto.

¿Que puede ser lo que ocasione esto?

[Tom]

Did you keep it added? I’m not seeing it: https://www.screencast.com/t/tLkSc2jPTCT

[Pedro]

Hola Tom! Si lo he añadido, lo que sucede es que como te comenté ahora último, la barra de búsqueda la puse en otro sitio diferente al de esta publicación.

El sitio en donde quiero que se muestren los productos es este: https://www.rebajaslocas.com/

Allí podrás ver que ya he actualizado el hook tal como me indicaste.

[Tom]

Ah, my bad. It should be product, not products: https://generatepress.com/forums/topic/configuracion-de-navegacion-principal/page/2/#post-1310412

[Pedro]

Hola Tom! Ha funcionado perfecto, muchas gracias! Eres el mejor.

Una última cosa, y ya con esto cierro este post.

Me gustaría ocultar esa barra de búsqueda en estos lugares:

– Blog
– Entradas del blog
– Carrito
– Checkout

Yo sé como hacerlo, la cuestión es que si la oculto, todo el menú pasa a ocupar el espacio donde estaba la barra de búsqueda.

¿Sabes alguna forma para que el menú se quede en la ubicación donde está cuando la barra de búsqueda ya no aparezca?

[Tom]

Try this:

#primary-menu {
    margin-left: auto;
}

[Pedro]

Hola Tom! El código funcionó, sin embargo antes me habías ayudado con una personalización en el checkout, donde se oculta el menú principal y se coloca un texto.

Este fue el código CSS que me diste:

.woocommerce-checkout #primary-menu {
    display: none;
}

.checkout-title {
    order: 10;
    line-height: 60px;
    color: #fff;
    font-size: 17px;
		padding-right: 40px;
}
@media (max-width: 768px) {
    .checkout-title {
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    .woocommerce-checkout button.menu-toggle,
    .woocommerce-checkout .mobile-bar-items {
        display: none;
    }

    .woocommerce-checkout .checkout-title {
        order: 2;
        margin-right: 5px;
    }
}
.checkout-title a {
    color: #fff;
    font-size: 17px;
}

Lo que sucede, es que el texto se mueve a donde estaba la barra de búsqueda ya que no hay un menú.

¿Puedes ayudarme?

¡Muchas gracias!

[Tom]

You could try adding margin-left: auto to the .checkout-title.

[Pedro]

Hola Tom! Eres increíble, el mejor de todos!

Muchas gracias por todo el apoyo y el soporte, el código funcionó perfectamente.

[Tom]

Glad I could help 🙂

[Author]

Posts