Zerif Lite: ¿Cómo agregar un área de widgets para WooCommerce?

37 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 22 de marzo de 2017

Hace poco más de un año aprendimos a mostrar una barra lateral en las páginas de WooCommerce dentro del tema gratuito Zerif Lite, de ThemeIsle.

Esas instrucciones simplemente sirven para incluir el área de widgets que ya existe en el tema, y que es común a todas las páginas del blog. Esto es sin dudas una limitación, ya que si usamos tanto la tienda como el blog nos veremos obligados a mostrar los mismos widgets en ambas secciones.

Para poder mostrar widgets distintos, tendremos que crear un área específica para la tienda y los productos de WooCommerce.

Paso 1: registrar el área de widgets

Lo más probable es que ya tengamos el tema hijo creado, con el área de widgets agregada en la plantilla de WooCommerce. Si así no fuera el caso, tendremos que seguir las instrucciones de esta entrada (solo el Paso 1) para crear el tema hijo.

Una vez creado, en el archivo functions.php, antes del cierre de la etiqueta ?> (si lo hubiera) pegamos lo siguiente:

function zerif_woocommerce_sidebar_widgets() {
    register_sidebar( array(
        'name' => __( 'Barra lateral de Tienda', 'zerif-lite' ),
        'id' => 'area-tienda',
        'description' => __( 'Widgets para las páginas de WooCommerce', 'zerif-lite' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'zerif_woocommerce_sidebar_widgets' );

Con esto veremos que se ha añadido un nuevo panel en nuestra página de Widgets.

Paso 2: incluir el área de widgets en la plantilla de WooCommerce

El código anterior por sí solo no nos va a servir de mucho si no lo “llamamos” desde la correspondiente plantilla. Así es que abriremos el archivo woocommerce.php (previamente editado según las instrucciones de esta entrada) y reemplazaremos la línea:

<?php zerif_sidebar_trigger(); ?>

Por:

<div class="sidebar-wrap col-md-3 content-left-wrap">
    <div id="woocommerce-sidebar" class="widget-area" role="complementary">
    <?php
    if ( is_active_sidebar( 'area-tienda' ) ) :
    dynamic_sidebar( 'area-tienda' );
    endif;
    ?>
    </div>
</div>

Vamos a agregar algunos widgets:

El resultado:

Y nuestras páginas del blog conservarán la barra lateral predeterminada. 🙂

Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

37 Comentarios

  1. Michelle Fuquen

    Hola
    Muchas gracias por tu ayuda.
    He realizado el tutorial como lo dices tengo el tema hijo y en el personalizador me aparece el area de widgets barra lateral de la tienda y barra lateral por separado.

    Pero al arrastras widgets a cada una de ellas no se muestran en la pagina.
    Que puede ser.

    Quedo atenta a tu respuesta

  2. Daniel D.

    Hola buenas noches Caribdis!!!

    Antes que nada muchísimas gracias por todos tus tutoriales y tu tiempo que tanto nos facilitan la vida al resto. Quería comentarte, hago todo lo que dices en el post, y aunque si me pone la nueva barra lateral en la derecha, me baja la barra lateral antigua abajo del post en lugar de quitármela por completo de la página de tienda de Woocommerce. ¿Por qué es eso?

    • Caribdis Diseño Web

      Hola, Daniel.

      Gracias por tu comentario.

      Si ves la barra lateral estándar es porque en algún lado de la plantilla de WooCommerce la estás “llamando”. Revisá que no esté presente la línea <?php zerif_sidebar_trigger(); ?>.

      Saludos.

  3. Verónica

    Hola buenos días, como cada vez que te escribo, quiero felicitarte por tus tutoriales y la dedicación que les pones.
    ¿Existe alguna manera para que dentro de la ficha del producto se muestre un texto “en stock” o “sin stock”? Más allá de que yo marque un producto como agotado y desaparezca de la lista de productos, si alguien había guardado el link y el producto se agotó, al acceder no tiene un indicador de que ya no hay stock.
    Muchas gracias!

    • Caribdis Diseño Web

      Hola, Verónica.

      Los productos que marcás como sin stock muestran una leyenda “Agotado” en color rojo dentro de la descripción corta del producto (y no muestran el botón para agregar al carrito). Al menos ese es el comportamiento normal.

      Saludos.

      • Verónica

        En esto /tienda/disco-duro-externo-wd-elements-2-tb

        La descripción corta es la que dice “Garantía: 1 año”, sin embargo no muestra la falta de stock. Habrá algo que lo está bloqueando?

        • Caribdis Diseño Web

          Hola, Verónica.

          Dudo que sea algún plugin, pero por las dudas revisalos. Y fijate que no tengas ningún código personalizado en functions.php que pueda estar modificando/suprimiendo el texto de disponibilidad (por ejemplo, con el filtro woocommerce_get_availability).

          Saludos.

  4. Miguel López

    Buenas tardes …No sé que más poder hacer para que aparezca la barra lateral en el tema hijo Zerif Lite, he seguido todos los pasos a la perfección; el proceso esta correcto, sin embargo aún no me aparece la barra lateral. Es frustrante. por favor podrían decirme a que se debe el error o si existe alguna opción de código necesario, o que activar que haya pasado desapercibido. Gracias

    Ruego encarecidamente puedan ayudarme.

    Saludos cordiales.

    • Caribdis Diseño Web

      Hola, Miguel.

      Si es la web de tu comentario, veo que hay dos barras laterales distintas: una para el blog y otra para la tienda. Supongo que lo resolviste.

      Saludos.

      • Wilberth

        Miguel si lo resolviste por favor ayudame por que yo me rendi con ese tema nunca pude

        • Caribdis Diseño Web

          Hola, Wilberth.

          En algún momento agregaste estos códigos:

          .content-left-wrap {
              width: 100%;
          }
          .sidebar-wrap {
              display: none;
          }
          

          O bien los agregaste mediante un plugin (Custom CSS o similar), o bien están en el panel CSS adicional del Personalizador. Tenés que borrar esos dos códigos.

          Saludos.

          • Wilberth

            Hola ya los borre, ahora al recargar la pagina veo que se hizo un espacio en blanco al lado derecho claramente supongo que ese es el espacio de la barra, pero coloco los widgets y no se ven! sabes que puede ser?, gracias.

          • Caribdis Diseño Web

            Todavía tenés incorporado este código:

            .sidebar-wrap {
                display: none;
            }
            

            También eliminalo.

          • Lucian

            Hola Ana disculpa que te escriba por aqui pero la desesperacion me lleva a esto porfa creo que solo tu podrias ayudarme: porque siempre se crea la misma carpeta en la carpeta uploads cheka esto porfa /home/usuario/public_html/wp-content/uploads/logo new.png/wc-logs/paypal-7f23288535d42cd932f77c7a6e7d2c6c.log (esa carpeta logo new.png era el nombre de un logo no se porque lo borro de todos lados y se crea hasta con subcarpetas es increible y ademas dentro del woocommerce lo toma como si fuera ruta de la seccion de envio y de paypal que dice que le falta persimos y no se que onda, ayudame Ana porfaaa.
            Saludos gracias de antemano.

          • Caribdis Diseño Web

            Hola, Lucian.

            Sinceramente no tengo idea por qué sucede eso. Te sugiero que abras un hilo en el foro de soporte.

            Saludos.

          • Lucian

            Hola Anita buen dia un favorzote enorme vos sabes como puedo hacer para que en la seccion tienda me muestren doce articulos en vez de 10 es que llega a diez y de ahi se pasa a la otra pagina deberia ser 4×3 pero la ultima fila solo salen dos es decir sumados salen 10 articulos deberia ser mas parejo para que se aprecie mejor anda ayudame con eso si xfa.

          • Caribdis Diseño Web

            Hola, Lucian.

            Fijate en esta respuesta.

            Saludos.

          • Lucian

            Que te puedo decir ana eres simplemente la mejor muchas gracias

      • Lucian

        Hola Caribdis una consulta veo que en tu captura de Tienda, los botones de Añadir al Carrito tienen fondo negro como haces eso? y una mas se puede agregar un campo en la parte final del pie de pagina como correo telefono direccion y una que diga whatssap con su iconito ?

        Saludos desde lima

        • Caribdis Diseño Web

          Hola, Lucian.

          Para cambiar el color del botón de WooCommerce tenés que usar el siguiente código:

          .woocommerce-page .products a.button {
              background: #000;
          }
          

          En cuanto a lo segundo, se puede usando un tema hijo y agregando el código en el archivo footer.php. Tal vez haga un tutorial para eso más adelante.

          Saludos.

          • Lucian

            Muchas Gracias me ayudo bastante te deje unas otras inquietudes ayer de seguro las veras espero que me puedas ayudar y una cosita mas como cambiar el color del sombreado que se hace al marcar con el mouse sabes como es eso ? uhmmm :/

      • lucian

        Hola Anita sorry que te escriba por aqui es la verdad que ando muy desesperado, una consulta referente al tema de la compra venta de woocommerce como se puede hacer para que en el tema de pago se pueda comprar pero con tarjeta de credito ojo no debito muchas gracias

        • Caribdis Diseño Web

          Hola, Lucian.

          El método de pago de PayPal estándar acepta tarjetas de crédito. Está incluido en las opciones de WooCommerce. Si no soporta la moneda en que está configurada la tienda, tendrás que buscar un plugin de una pasarela de pago compatible.

          Saludos.

          • Lucian

            Hola Ana buenas tardes te saluda Lucian nuevamente, despues de tiempito que te molesto de nuevo, a ver si me podes ayudar, mira el tema es el sgt cuando entro a facebook para poder compartir mis enlaces en otras partes de fb no sale la imagen de miniatura sale un cuadro blanco en vez de eso que me gustaria que salga la porta de mi web o el logo o algo asi, la cosa ademas de eso en vez de la descripcion que puse que era “venta de articulos tecnologicos” , pues sale otro texto sacado de otra parte de mi web y se ve remal eso, he indagado que tiene que ver algo con el head y no se tal vez el id de fb que ya tengo todo eso pero los codigos que encuentro me dicen que lo pege debajo del pero por lo que veo en la platilla hijo que nos proveiste no existe el header.php entonces como se podria hacer eso para que se solucione mi problemita Ana, dale ayudame una vez mas porfa guapa.
            P.D.: Podes copiar para que veas el enlace de mi web y veras como aparece en un muro de fb espantoso la verdad, ayudame gracias de antemano.

          • Caribdis Diseño Web

            Hola, Lucian.

            Fijate en esta respuesta.

            Saludos.

          • Lucian

            Hola Ana sigo con el tema de mi pregunta relacionada a de como se aprecia cuando uno comparte enlace en facebook.
            Donde puedo colocar esto en el tema hijo de zerif lite osea zerif-child que nos proporcionaste tengo entendido que es en el header.php pero no lo has puesto en la carpeta del tema que se tendria que hacer copiar el header.php del tema original y dentro que cambiarlo para que empate con el zerif-child ? o como seria para poner esto y hacer las modificaciones respectivas ayudame porfavor llevo dias en este tema que no logro resolverlo.

            (A ESTO ME REFERIA DONDE COLOCARLO): o Modificarlo osea donde esta

            GRACIAS !!!

          • Caribdis Diseño Web

            Hola, Lucian.

            No hay que modificar ningún archivo. Una vez que instales y actives el plugin de SEO, lo manejás desde el contenido de cada entrada o página.

            Saludos.

          • Lucian

            Te juro que he instalado el yoast seo pero solo me da solución a poner imagen mas a modificar el titulo y menos la descripcion del contenido. Ando frustado con este inconveniente 🙁

      • lucian

        Hola de nuevo Anita un favor enorme espero que me puedas ayudar como el resto de los que te consultan aqui siempre tu tan servicial, mira el problema que tengo es esto al momento de hacer la busqueda por producto ya en la pagina con el widget de busqueda de producto me refiero es decir por ejemplo se pone una palabra que contenga el titulo del producto osea la busca ok y lo encuentro pero aparecen otros mas que no tienen nada que ver porque sera sabes, y lo otro es si pasas por mi web y la abres desde un movil en la seccion tienda y ves los articulos desde tu movil las letras salen descuadras no salen como en el ordenador mas parejito como se puede arreglar eso Anita.

        Saludos ahi te dejo la web abajo en seccion web

        • Caribdis Diseño Web

          Hola, Lucian.

          La búsqueda es por aproximación, y los resultados se muestran desde el más relevante al menos relevante. Para que te arroje un solo producto como resultado (que lo abre directamente), la búsqueda tiene que ser el título completo exacto.

          Para corregir las letras que se superponen, podés usar el siguiente código:

          @media (max-width: 480px) {
          .woocommerce-page .products h2 {
              line-height: initial;	
          }
          }
          

          Saludos.

          • lucian

            Hola Ana gracias por el dato pero no se corrige aun estan algo sobrepuestas las letras ya lo meti al css pero no hay diferencia que podra ser ?

      • Lucian

        Hola Buenos dias, una consulta hay forma en la seccion de finalizar compra para ser mas exactos en detalles de facturacion Agregar un campo que diga DNI. ?
        Saludos
        Gracias

        • Caribdis Diseño Web

          Hola, Lucian.

          Podés consultar la documentación oficial de WooCommerce o buscar algún plugin.

          Saludos.

  5. Wilberth

    Hola estoy un poco frustrado ya que hago los pasos tal y como se indican y no he conseguido que se vea la barra lateral en las paginas de mi tienda, al menos avance un poco debido a que ahora si me sale una seccion que dice: “barra lateral tienda”, pero agrego los widgets ahí y no me aparecen, me podrian ayudar por favor? de ante mano muchas gracias!.

    • Caribdis Diseño Web

      Hola, Wilberth.

      Te está pasando lo mismo que a esta usuaria. La barra está presente, pero en algún lado tenés agregados los códigos CSS que la ocultan. Eliminalos.

      Saludos.

  6. Juan Manuel

    Hola buen dia, quisiera que por favor me ayudaras, imagino que sera una pregunta recurrente pero no encuentro el hilo, las preguntas son: – como cambiar la imagen de titulo grande; – porque los botones de titulo grande no aparecen en el movil? espero me puedas ayudar. Saludos

    • Caribdis Diseño Web

      Hola, Juan Manuel.

      La imagen que se ve detrás de la sección de título grande es la imagen de fondo que se configura en el personalizador.

      Y los campos de los botones deben tener contenido para mostrarse.

      Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!