Edición de Cabecera StoreFront

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

Hola, Bulmaro

Muchas gracias, la verdad, no conozco cómo hacerlo mediante CSS, el movimiento que hice que está visible en donde el logo está centrado fue una regla que encontré.

Así que si me ayudas con la regla para agrandar el sitio y otra regla para poner la búsqueda de productos arriba del logo del lado derecho te lo agradecería muchísimo 🙂

Hola Francisco,

Claro, estamos para auxiliarte en estos casos.

1. Para cambiar el tamaño del logo añade el siguiente CSS:

   @media (min-width: 768px){
   .site-header .site-branding img {
       height: auto;
       max-width: 500px !important;
   }}

   Donde 500px indica el tamaño en píxeles de la imagen.

2. El buscador ya no lo veo como aparece en la captura que enviaste. Asumo que ya lograste quitarlo, ¿Cierto?

Muchas gracias, ha quedado excelente lo del logo.

Sì, había quitado el buscador de productos mientras esperaba la respuesta, pero ya lo he activado nuevamente,

Me podrías ayudar con eso, para colocarlo arriba del logo pero dejarlo del lado izquierdo o derecho.

Gracias.

Hola Francisco.

Para ello podemos crear un widget y asignarle un área:

1. En Apariencia -> Editar tema -> functions.php, al final del contenido agrega:

   function wpb_widgets_init() {
    
       register_sidebar( array(
           'name'          => 'Search Before Header',
           'id'            => 'custom-header-widget',
           'before_widget' => '
   ',
           'after_widget'  => '
   ',
           'before_title'  => '
   ',
           'after_title'   => '
   ',
       ) );
    
   }
   add_action( 'widgets_init', 'wpb_widgets_init' );

2. En Apariencia -> Editar tema ->header.php, justo debajo de la etiqueta :
3. En Apariencia -> Widtgets, verás que aparece un área llamada "Search Before Header", agrégale el widtget llamado "Search products"
4. En Apariencia -> CSS Adicional agrega:

   #header-widget-area{
   margin-top: 3%;
   }
   
   #header-widget-area div.chw-widget .woocommerce-product-search button[type='submit']{
   	display: none; 
   }

Nota: Recuerda crear un respaldo del archivo functions.php y header.php antes de agregar lo anterior.

Si no te funciona por favor indícame cómo agregaste el logo, si solo usaste CSS no debería haber problema con lo que te he pedido agregar.

Saludos.

No me funcionó, de hecho mi tema no me permite hacer los cambios directamente en el área de apariencia, así que me fui al CPanel, al área de Theme y ahí me metí tanto en functions como en Header,
Anexo archivos para que veas lo que hice.

Hola Francisco,

¿Podrías enviarme una captura de tu functions.php y header.php, tambien una vista de la pagína de widgets? Por favor.

Si estás usando Storefront no entiendo por qué no te dejaría editar los archivos anteriores desde Apariencia -> Editor de temas, yo utilicé ese tema para crear el widget y no tuve ningún problema.

Saludos.

Sí te los mandé, a lo mejor se te pasó ver los archivos anexos, pero esta ves los voy a insertar para mayor facilidad.

Muchas gracias,

Hola

Para mostrar la búsqueda en la parte superior derecha, usa el siguiente código CSS:

header.site-header{
    position:relative;
}

header.site-header .site-search{
    display:block;
    position:absolute;
    right:20px;
}    

Si quieres que la búsqueda igual se muestre en movil agrega adicionalmente:

@media(max-width:768px){
    header.site-header .site-search{
        position:static;
    }   
}

Saludos.

Funcionó excelente, gracias.

Hola

Que bien que lo solucionaste.

Saludos.