Barra del buscador  

Hola José Luis,

Puedes indícanos cual es la URL del sitio web donde deseas añadir este buscador? de esta forma podremos verificar con mayor detalle lo que nos comentas

Un Saludo

@karen

https://suminca.es/

Hola Jose Luis,

Puedo ver que ahora tienes un buscador que se despliega y obtienes una aspecto parecido al que buscas. Si deseas mejorarlo para que se visualice de la siguiente forma puede añadir el siguiente código en el apartado Apariencia -> Personalizar -> CSS Adicional

.et_search_outer .aws-container {
position: absolute;
right: 170px;
top: -12px;
}

div#et_top_search {
PADDING: 12px 6px 9px 16px;
}

Coméntanos si es esto lo que deseas o definitivamente deseas sustituir este buscador.

Un Saludo

@karen

Hola, he añadido lo que me has dicho pero el buscador no ha cambiado. ¿Qué he debido hacer mal?

Hola José Luis,

Entiendo, es posible que existan reglas que este priorizadas a estas nuevas que añades y por ello no se aplican los estilos. Prueba añadir dentro del código la palabra !important y ver si de esta forma se aplican los cambios, por ejemplo

/* modificar la barra del buscador*/
.et_search_outer .aws-container {
position: absolute;
right: 170px !important;
top: -12px !important;
}

div#et_top_search {
padding: 12px 6px 9px 16px !important;
}

Comprueba esto y nos comentas como ha ido todo

Un Saludo

Hola he cambiado por lo que me has dicho... y nada.

Te pego todo lo que tengo en "CSS Adicional" por si hay algo que predomina.

.et_pb_blurb .et_pb_image_wrap {
display: block;
margin: auto;
max-width: 40%;
}

/* Oculto el SideBar de todas las páginas */
/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Hide Sidebar ***/
#sidebar {display:none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important;
}
}
/*** Fin de oculto SideBar **/
/** Cambiamos el tamaño de letra en el texto de pedido realizado **/
p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
font-size: xx-large;
margin-bottom: 60px;
}
/** Fin Cambiamos el tamaño de letra en el texto de pedido realizado **/
/** Subimos la capa de aviso de cookies **/
.lity.lity-opened.lity-inline.moove_gdpr_cookie_modal_open {
z-index: 999999;
}
/** Fin Subimos la capa de aviso de cookies **/

/**Quitamos carrito por defecto de Woocommerce **/
a.et-cart-info {
display: none;
}
/**Fin quitamos carrito por defecto de Woocommerce **/

/*Rafa: texto de crear cuenta al realizar el pedido */
.woocommerce-info {
text-align: center;
}

.woocommerce-info .button {
margin-top: 10px!Important;
float: none!Important;
}
/*Rafa: Fin texto de crear cuenta al realizar el pedido */

.buscar_productos a {
border:none!Important;
top:5px;
}

/* Rafa: Separo la descripción de la categoria de los productos */
header.woocommerce-products-header {
margin-bottom: 40px;
}
/* Fin Separo... */

/* Icono flotante de Whatsapp */
div#whatsapp {
position: fixed;
right: 10px;
bottom: 0px;
z-index: 9999999;
}
/* End whatsapp */

p.price {
margin-bottom: 15px;
}

/* OCulto el pie de página estandard de Divi */
footer#main-footer {
display: none;
}
/* Fin oculto pie de página */
/* Etiquetas de oferta */
.woocommerce span.onsale {
background-color: #fbc01d!Important;
color: #000;
font-size: large;
font-variant: all-small-caps;
padding: 1px 7px!Important;
}
span.woocommerce-Price-amount.amount {
color: #336699;
font-size: 20px;
}
/* Fin de etiquetas oferta */

div#et_top_search {
position: fixed!Important;
top: 35px;
right: 10px;
z-index: 99999;
background-color: #fbf783!Important;
width: 160px!important;
FONT-SIZE: X-SMALL;
PADDING: 6px 6px 5px 16px;
FONT-WEIGHT: 600;
CURSOR: POINTER;
}
.et_header_style_centered #et_search_icon:before {
top: 3px;
left: 12px;
position: relative;
}
.container.et_search_form_container.et_pb_search_visible {
z-index: 999999999!Important;
}
.et_search_outer .aws-container {
float: none!Important;
margin-right: auto!Important;
margin: auto!Important;
margin-top: 20px!Important;
}

/* Hago que el botón de búsqueda se desplace si la admin está abierta... */
.admin-bar #et_top_search {
top: 67px;
}
/* Ajustamos el carrito de la compra */
@media (min-width: 768px){
.woocommerce table.shop_table td {
width: 10px;
}
td.product-name {
min-width: 50vh;
}
}
/* En ajustamos carrito */
/* añadir buscador en el móvil*/
@media (max-width: 980px) {
.et_header_style_centered #et_top_search {
display:block!important;

}

.et_header_style_centered #logo {
margin-top: 2em;
}
}
/* fin añadir buscador en el móvil*/

/*Hacer que funcione el buscador en el móvil*/
@media(max-width:980px){
.et_header_style_centered .et_search_outer, .et_header_style_split .et_search_outer{
display: block!important;
position:static;
}

.container.et_search_form_container.et_pb_search_visible.et_pb_no_animation{
max-width: 500px!important;
}

.container.et_search_form_container.et_pb_search_form_hidden.et_pb_no_animation{
position: absolute;
}
}
/* Fin hacer que funcione el buscador en el móvil*/

/* modificar la barra del buscador*/
.et_search_outer .aws-container {
position: absolute;
right: 170px !important;
top: -12px !important;
}

div#et_top_search {
padding: 12px 6px 9px 16px !important;
}
/*Fin modificar la barra del buscador*/

Hola Jose Luis,

He verificado en tu sitio web y veo que los cambios de aplicaron

Comprueba borrar la cache de tu navegador o ingresar como incógnito y verifica si puedes ver los cambios

Un Saludo

@karen

He borrado los datos de navegación y se sigue viendo igual que se veía, yo no quiero que se despliegue al pinchar en "buscar producto", quiero que siempre este la barra del buscador desplegada.

Hola

En lugar de usar ese módulo de buscador tendrías entonces que usar otro, elimina ese buscador y verifica si puedes agregar widgets, ya que hay un widget que viene con WooCommerce que tiene la funcionalidad de buscador. (Buscador de productos)

Veo que usas Divi, posiblemente tengas que usar un Sidebar para eso, revisa: https://www.elegantthemes.com/blog/divi-resources/a-guide-to-using-sidebars-with-the-divi-theme-builder

Saludos.

@jmarreros

Me da miedo cambiar el buscador porque recuerdo que tuve problemas para visualizarse en dispositivos móviles, sé que se añadió algo en CSS para que funcionase bien.

Hola Jose Luis.

Por favor, puedes decirnos qué plugin es el que estás utilizando para el buscador ?

Un saludo

@pepesoler

Hola, creo que utilizo este:

Advanced Woo Search

Hola Jose Luis,

Entiendo, el buscado que usas ahora es el predeterminando de Divi. Para añadir un nuevo buscador en la barra superior por ejemplo debes editar tu plantilla header.php del tema y en este incorporar un código adicional

<?php get_search_form(); ?>

Puedes verifica como debe incorporarse detalladamente en este articulo -> Contenido solo visible a usuarios registrados

Para añadir elementos adicionales necesitaras añadir código personalizar que te permitan incorporar elementos adicionales en el tema, en este caso puedes consultar con nuestros directorio de colaboradores quieren te ayudarán a añadir lo que necesitas -> https://www.webempresa.com/directorio-colaboradores.html

Un Saludo