Zerif Lite: ¿Cómo añadir una barra lateral en las páginas de WooCommerce?

63 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: 13 de marzo de 2016

Retomando la serie de tutoriales dedicados al tema gratuito Zerif Lite, de ThemeIsle, en esta decimotercera entrega vamos a aprender a añadir una barra lateral en las páginas de WooCommerce.

La presentación predeterminada de las páginas de tienda y productos en Zerif Lite tiene un ancho completo.

Zerif Lite - Página de Tienda WooCommerce

Es muy probable que necesitemos mostrar una barra lateral para mejorar la experiencia del usuario. Para esto, tendremos que modificar el archivo woocommerce.php.

Como siempre recordamos, debemos usar un tema hijo para hacer esta clase de ediciones. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Copie el archivo woocommerce.php del tema padre a la carpeta raíz del tema hijo y reemplace todo el contenido con el siguiente código:

<?php
/**
 * The template for displaying all WooCommerce pages.
 */
get_header(); ?>
<div class="clear"></div>
</header> <!-- / END HOME SECTION  -->
<?php zerif_after_header_trigger(); ?>
<div id="content" class="site-content">
    <div class="container">
        <div class="content-left-wrap col-md-9">
            <div id="primary" class="content-area">
                <main id="main" class="site-main">
                    <?php woocommerce_content(); ?>
                </main><!-- #main -->
        </div><!-- #primary -->
</div><!-- .content-left-wrap -->
    <?php zerif_sidebar_trigger(); ?>
</div><!-- .container -->
<?php get_footer(); ?>

Tendremos ahora una barra lateral en la tienda, en donde podremos añadir cualquier widget.

Zerif Lite - WooCommerce con barra lateral

Tutorial original en inglés: http://docs.themeisle.com/article/56-how-to-add-sidebar-on-woocommerce-pages

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. 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.

63 Comentarios

  1. Michelle Fuquen

    Buen dia,
    Excelentes tus tutoriales, he logrado ya tener las dos barras laterales de la tienda en su lugar,

    Pero en la tienda todo es ta pegado al lado izquierdo y hay en gran espacio al lado derecho.

    Quisiera saber como centrar todo

    Muchas gracias haces un gran trabajo.

    • Caribdis Diseño Web

      Hola, Michelle.

      Gracias por tu comentario.

      Revisá que hayas pegado el código tal como está descripto en el tutorial. En la página se ve que el orden de los div no es el correcto.

      Saludos.

  2. Vale

    hola, ¿woocommerce.php que menciona se encuntra wpcontent plugins/Woocommerce
    Cierto?

    Saludos y gracias por sus tutoriales

    • Caribdis Diseño Web

      Hola, Vale.

      El archivo woocommerce.php es el que se encuentra en la carpeta /wp-content/themes/zerif-lite/.

      Saludos.

  3. Rubén Sierra

    Hola. Tras la última actualización de Woocomerce, no aparecen los productos en la página de inicio de la tienda y cuando seleccionas alguna categoría, no aparecen todos los que son. He borrado todo el css adicional, los archivos del tema hijo y sigue igual. Puedes ayudarme?

    • Caribdis Diseño Web

      Hola, Rubén.

      ¿Probaste desactivando otros plugins? No sabría decirte la causa, pero por lo que se ve, hay algún error de código. Si no, podés probar reemplazar los archivos de WooCommerce por una versión anterior, que se descarga de aquí.

      Saludos.

      • Lucian

        Hola buenos dias tiempo que extraña escribirte, disculpa que ocupe este apartado para hacerte la sgt sugerencia, he adquirido otro dominio y como se puede hacer para migrar todo el otro dominio de mi web al nuevo, es decir no quiero que exista el anterior pero si que el contenido pase al nuevo dominio, ambos son del mismo hosting pero en fin como corrijo las tablas o wp o ftps o no se que onda, pero me dejo entender si mi antiguo dominio es 123.com y el nuevo es abc.com quiero que lo del 123.com cuando le den a ese enlace ya no exista esa web por algo compre el abc.com y que entrando ahi se vea lo del anterior claro actualizare el logo y demas no pero como puedo hacer eso ayudame porfavor si en caso lo sabes.

        • Caribdis Diseño Web

          Hola, Lucian.

          Si ya apuntaste el nuevo dominio a la misma carpeta /public_html/ (o similar) del anterior, nada más tenés que modificar las URL de la base de datos. Con el plugin Search & Replace podés hacerlo sin complicaciones desde WordPress. Una vez reemplazadas, podrás acceder desde el nuevo dominio.

          Saludos.

  4. Rubén Sierra

    Hola. Tengo un problema y es que la barra lateral de la tienda se superpone a los productos relacionados, cuándo los hay.
    ¿Alguna solución? Gracias de antemano.

    • Caribdis Diseño Web

      Hola, Rubén.

      Fijate que no sea un plugin el que está aplicando estilos que interfieren.

      Saludos.

      • Rubén Sierra

        Gracias por responder tan pronto. He probado a desactivar todos los plugin uno por uno y sigue igual. Puede que no me explique bien.
        Lo que me pasa es que los productos vinculados que aparecen a la derecha, a poco que se alarguen, se les queda parte del nombre debajo de la barra lateral. A ver si hay otra solución. Saludos.

        • Caribdis Diseño Web

          Hola, Rubén.

          Ahora sí entendí. El tema de los productos relacionados es porque a Zerif le falta el estilo en la clase .upsells (esto no es un error, ya que como no incluye barra lateral simplemente no era necesario).

          Usá el siguiente código:

          .upsells {
              clear: both;
          }
          

          El problema con los productos vinculados es que no tienen precio (si lo tuvieran se mostrarían abajo del botón). Fijate si el siguiente código lo corrige:

          .group_table td.label, .group_table td:first-child {
              float: left;
              width: 100%;
              text-align: left;
          }
          table.group_table {
              border: 0;
          }
          

          Saludos.

          • Rubén Sierra

            Perfecto, ahora los productos quedan debajo del botón. Muchas gracias!

  5. Wilberth

    Hola, segui los pasos y no me funciono, sabes que podria ser?, mi sitio es shopexcr.com, gracias!.

    • Caribdis Diseño Web

      Respondido aquí.

  6. RAM

    Hola Ana. He modificado mis temas siguiendo las instrucciones del tutorial “tema hijo” para poder editar los estilos desde custom.css. Bueno se fue la configuración en algunos lugares pero manualmente lo puse como estaba. Algunos estilos los modifico primero desde la herramienta inspeccionar del navegador pero cuando copio el estilo al custom no cambian. Es como que no detecta algunos cambios de estilo y otros si… ¿Por que puede estar pasando esto?. Saludos y gracias.

    • Caribdis Diseño Web

      Hola, Ram.

      Depende de cómo estén declarados los estilos en las hojas que cargan primero. Si alguno está marcado como !important, el que apliques en custom.css sin esa declaración no va a tener efecto. Cuando veas que esto sucede, usá !important.

      Saludos.

      • RAM

        Hola Ana, he utilizado !important, pero tampoco se aplican los estilos… Algunos estilos del custom se aplican pero otros no (utilice !important o no)…. ¿podría ser por el plugin wp supercache?

        • Caribdis Diseño Web

          Sí, puede ser. Y por lo general Chrome es duro para actualizar los cambios de estilo.

          Un valor con !important que no se aplique en custom.css es porque está cargando en otra hoja de estilos posterior, o en la cabecera del tema (si está agregado en CSS adicional, o lo agrega algún plugin), o en línea (un style="propiedad: valor;" dentro de una etiqueta HTML, por ejemplo). Ante la duda, el inspector de código te los lista por orden, así que el que aparece arriba de todo es el que está prevaleciendo.

          Saludos.

  7. Verónica

    Hola, de antemano gracias por tus grandes aportes. Seguí todo al pie de la letra pero en la barra derecha me aparecen los artículos recientes del blog, cómo puedo hacer para que aparezca información de los productos de la tienda como en tu captura de pantalla?

    • Caribdis Diseño Web

      Zerif Lite solo tiene una barra lateral. Tendrías que agregar los widgets de WooCommerce allí.

      Si necesitás una barra lateral para el blog y otra para la tienda, es más complicado porque tenés que registrar una nueva en functions.php.

      Saludos.

  8. ram

    Hola, ¿hay manera de que la barra lateral aparezca en lado izquierdo en lugar del derecho?

    GRACIAS!

    • Caribdis Diseño Web

      Hola, Ram.

      Tendrías que usar el siguiente código:

      .woocommerce .content-left-wrap, .woocommerce .sidebar-wrap {
          float: right;
      }
      .woocommerce .sidebar-wrap {
          border-right: 1px solid rgba(0, 0, 0, 0.05);
          border-left: none;
      }
      

      Saludos.

      • RAM

        Hola, muchas gracias por la respuesta!…He colocado el código indicado en el style.css de mi tema hijo pero la barra no cambia a la izquierda….

        • Caribdis Diseño Web

          Hola, Ram.

          El código va en el archivo custom.css (si seguiste los pasos de este tutorial para crear el tema hijo), y el tema hijo debe estar activado. De lo contrario, probá pegándolo en el panel CSS adicional del Personalizador.

          Saludos.

          • RAM

            Finalmente conseguí ponerla en el lado izquierdo, muchisimas gracias por tu tiempo…me gustaría contarte un poco el proceso por que hay algo que se me escapa. Primero yo ya estaba utilizando un tema hijo pero mi functions.php era un poco diferente te adjunto mi código: <?php
            add_action( 'wp_enqueue_scripts', 'zerif_lite_sendamistica_enqueue_styles' );
            function zerif_lite_sendamistica_enqueue_styles() {
            wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

            y luego añadí esto para personalizar algunos tabs de la pagina producto woocommerce en el mismo php:

            add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
            function woo_rename_tabs( $tabs ) {

            $tabs['description']['title'] = __( 'Info' ); // Rename the description tab
            $tabs['reviews']['title'] = __( 'Ratings' ); // Rename the reviews tab
            return $tabs;

            }
            add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

            function woo_remove_product_tabs( $tabs ) {

            unset( $tabs['reviews'] ); // Remove the reviews tab
            unset( $tabs['additional_information'] ); // Remove the additional information tab

            return $tabs;

            }
            add_filter( 'woocommerce_product_description_heading', 'remove_product_description_heading' );
            function remove_product_description_heading() {
            return '';
            }
            yo normalmente trabajaba el css desde el style.css no tenia el archivo custom.css…..
            Bueno, trate de colocar el código como me indicabas para hacer las cosas bien:

            Pero por un lado se desconfiguraba toda la personalización de mi tema… Y por otro lado me daba un error el código que puse en el functions.php para personalizar las tabs de woocommerce…. Desde el CSS adicional cambia de lado…Pero lo que se me escapa es lo siguiente: ¿por que el mismo código no afecta en estilo a mi woocomerce desde mi tema hijo pero si afecta desde el CSS adicional? por ejemplo el código que me pasaste:
            .woocommerce .content-left-wrap, .woocommerce .sidebar-wrap {
            float: right;
            }
            .woocommerce .sidebar-wrap {
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            border-left: none;
            }

            Gracias de nuevo. Saludos!
            P.D: He dejado el site en el que estoy trabajando en el formulario.

          • Caribdis Diseño Web

            Hola, Ram.

            El problema es la prioridad de carga de las hojas de estilo. Si bien el código que usás es correcto, no es el adecuado para este tema, porque está cargando el style.css principal de Zerif antes del estilo de Bootstrap (sin tema hijo, la prioridad es la inversa, justamente porque Zerif redefine valores de clases de Bootstrap).

            El código ideal para este tema es el que figura en este tutorial, ya que el archivo custom.css es el último en cargar y las demás hojas de estilo mantienen las prioridades del tema padre. Con este método, todos los códigos CSS personalizados van en custom.css y no en style.css del tema hijo.

            El error en functions.php pudo deberse a algún cierre de llave o punto y coma que falta.

            Saludos.

  9. Isabel

    Hola Ana! antes que nada gracias por todos los posts sobre zerif lite, me están ayudando muchísimo!
    El tema es que me gustaría añadir una sidebar a la frontpage. Es posible? Como lo hago? estoy un poco perdida con el tema…
    Muchas gracias de antemano!

    • Caribdis Diseño Web

      Hola, Isabel.

      Gracias por tu comentario.

      Como ser posible, es posible, pero por la manera en que está pensado este tipo de temas no tiene sentido hacerlo; el trabajo de edición es mucho mayor de lo que te llevaría buscar otro tema más adecuado, ya que los sitios de una sola página no están diseñados para incluir la barra lateral en la portada.

      Saludos.

  10. Jonathan Vera

    Hola, he buscado por todos lados como hacer que aparezca la barra lateral en zerif lite sin crear un tema hijo, ya que elimine todo lo de commerce, quiero que aparezca la barra lateral ya que desaparecio y no se como hacerlo, por favor necesito ayuda, mi correo es jonathanvera999@gmail.com
    Es urgente ya que necesito mostrar articulos y entrevistas, por favor si me puedes ayudar lo mas rápido posible te lo agradeceria
    Muchas gracias de antemano

    • Caribdis Diseño Web

      Hola, Jonathan.

      Tenés algunos códigos personalizados que no deben estar. Borrá lo siguiente:

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

      Saludos.

  11. Serena

    Hola! he probado de las dos formas que aparecen aquí el código de la barra lateral para la tienda. (La del post y la que cita una respuesta anterior) Cuando personalizo la apariencia, en widgets me permite agregar algunos en la “barra lateral”, guardar y publicar, pero el problema es que yo no veo nada en la pagina… (No veo si esa barra existe an algún otro lado del sitio…)

    • Caribdis Diseño Web

      Hola, Serena.

      Tenés dos estilos incorporados que no deberían estar:

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

      El primero le da un ancho completo al área del contenido y el segundo oculta la barra lateral.

      Si necesitás que el blog y las entradas sean de ancho completo, tenés que seguir este tutorial (para las entradas) y luego editar de manera similar el archivo template-blog-large.php (para el archivo del blog).

      Saludos.

      • Serena

        Uy!! Qué mareo!! A ver si entiendo, soy medio durita todavía en esto…perdón!!
        Tendría que borrar eso que me marcaste en que archivo exactamente? Además solo quiero que la barra lateral aparezca en la tienda y nada más. Si apareciera también en las entradas, sería medio raro, salvo que tuviera contenidos/widgets diferentes. Entendí q debería seguir ese tutorial para dejar ancho completo el blog y entradas, pero no sé que archivo cambiar para lo de la tienda. Gracias por tu ayuda!!!

        • Caribdis Diseño Web

          El código CSS aparece como incorporado, no sé si usaste un plugin para agregarlo. Ese código deberías borrarlo. Para que la barra aparezca en la tienda tenés que seguir las instrucciones de este tutorial. Y para ocultar la barra en las entradas (porque es la misma área de widgets), seguir este tutorial.

          • Serena

            No recuerdo haber usado ningún plugin para css, pero puede ser que lo haya creado por instrucción de alguno de los tutoriales. (que horror! ya ni me acuerdo!)
            Los campos que mencionas:
            .content-left-wrap {
            width: 100%;
            }
            .sidebar-wrap {
            display: none;
            }

            no aparecen en el el archivo style.css. (los busqué con cmnd + F) y solo
            encontré un “.content-left-wrap {padding-top: 60px;”
            y nada mas en el css. Este tutorial ya lo seguí, se supone que quedó todo modificado como aparece acá. Pero todavia sigo sin poder ver ninguna barra lateral. Así que el otro (para quitarla), no lo he encarado aún.
            No te quiero enloquecer!!! perdón!!! por suerte no es nada urgente ni grave. Gracias por miles!!!

          • Serena

            No te preocupes!! acabo de encontrar lo que decías!! Si tengo un plugin, Simple Custom CSS, ahí estaba el asunto!!! Yo lo estaba buscando el el archivo style.css, nada que ver.
            Ahora si veo la barra!!!

            Ufff… voy a ver si logro quitarla entonces del blog!! Saludos!!

  12. Faiver Gomez

    Hola, quiero agradecerte por este increíble trabajo me ha sido de gran ayuda en mi proyecto, sin embargo he tenido un reto para la barra lateral de la pagina de woocommerce lo he intentado de varias manera y he hecho lo que has indicado tanto en este tutorial como también le has indicado a quienes te han escrito, el ultimo código que ingrese fue:




    pero tampoco funcionó, cuando edito e ingreso el código y lo guardo me dice que los ficheros fueron transferidos con éxito exceptuando (1) uno. pero no se cual…

    Agradezco tu ayuda, tengo pocos conocimiento en el tema.

    Gracias!!

    • Caribdis Diseño Web

      Hola, Faiver.

      Fijate en esta respuesta.

      Saludos.

      • Faiver Gomez

        Gracias por tu respuesta, ya antes lo había realizado como lo indicas acá sin embargo nada que funciona, ahora lo hice nuevamente y nada, será a falta de algún plugin?

        Gracias por tu ayuda, Saludos!!

        • Caribdis Diseño Web

          ¿El tema hijo está activado?

          • Faiver Gomez

            Si se encuentra activo, ya he realizado lo otros ajustes que haz indicado y han funcionado pero en este nada.

            Gracias por tu respuesta y pronta ayuda.

          • Caribdis Diseño Web

            Hola, Faiver.

            El tutorial está revisado y actualizado para la última versión, no presenta ningún problema si el tema hijo se ha creado correctamente. Fijate que no te estés salteando algún paso, que el nombre del archivo no contenga errores y que no esté colocado en una carpeta equivocada.

            Saludos.

  13. Mariano

    Hola, gracias por tu increíble trabajo, la verdad sos una gran ayuda.
    Tengo una consulta que quizás me puedas responder, hay alguna manera que conozcas de hacer la barra lateral sticky/fixed. Probé con varios plugins pero no parecen funcionar.
    Desde ya muchas gracias!

    • Caribdis Diseño Web

      Hola, Mariano.

      ¿Probaste con Q2W3 Fixed Widget?

      • mariano

        Muchas gracias por la pronta respuesta, si probé pero al activar el plugin extrañamente se desactivan las animaciones del inicio, no se que tendrá que ver pero me genera ese bug.

        • Mariano

          Perdón me corrijo, no se desactivan las animaciones pero se modifica todo el css del inicio todo se pone centrado y se deforman las secciones

          • Caribdis Diseño Web

            Hola, Mariano.

            Fijate de usar la siguiente configuración en Apariencia > Opciones de Fixed Widget (widget fijo):

            • Margen superior: 100
            • Stop ID: footer
            • Disable plugin if screen width less then: 1024
            • Desmarcar todas las casillas de Compatibility

            Saludos.

  14. Jesús

    Hola buenas tardes, habrá manera de que esta barra aparezca en el tema pro?
    He intentado tanto en el pro como en el lite y no me aparece, no tengo idea del porque, ya que sigo los pasos punto a punto.

    • Caribdis Diseño Web

      Respondido aquí.

  15. mariano

    Hola primero muchas gracias por la información y por todo el contenido del blog, aunque una pregunta, hay alguna manera de activar el sidebar solo en la pagina de la tienda, mi problema es que me aparece tambien en la parte de finalizar compra.

    • Caribdis Diseño Web

      Hola, Mariano.

      Lo que tendrías que hacer es seleccionar la plantilla Full Width Page (o Full width with no title) en las páginas de WooCommerce distintas de la tienda (Carrito, Finalizar compra, etc.).

      Saludos.

  16. Edwin Peraza

    Hola, como estas?

    Disculpa la molestia, primero quisiera agradecer el tiempo y dedicación de hacer un post de este estilo. Por otro lado te cuento que estoy aplicando lo que mencionas en el post y todo funciona bien. En la barra lateral tengo varios widget entre ellos el de filtrar por precio. pero allí es donde viene el “error” o “problemita” a ver si me puedes ayudar por fa.

    Cuando quiero filtrar me ocurre un error en la url. Me explico, la url del sitio es www.midominio.com/site y la de la tienda ecommerce www.midominio.com/site/index.php/shop/ cuando ejecuto el filtro me cambia la url a lo siguiente:

    www.midominio.com/site/shop/?min_price=18914&max_price=39990 por lo que me genera un error ya que falta el “index.php/” antes de “shop/” y no encuentro manera de ajustarlo. Tienes alguna idea por favor? y disculpa el abuso.

    saludos.

    • Caribdis Diseño Web

      Hola, Edwin.

      No hay problema. 🙂

      La verdad, no sabría decirte sin verlo directamente. ¿Por alguna razón en especial la tienda está dentro de una carpeta distinta del sitio principal?

  17. Luis Terrazas

    Gracias por el aporte la puse y funciono muy bien, pero ahora la necesito quitar me podrias ayudar para que ya no aparezca, muchas gracias

    • Caribdis Diseño Web

      Hola, Luis.

      Simplemente borrá los archivos woocommerce.php y page.php de la carpeta del tema hijo.

      Saludos.

  18. damien

    Hola que tal, he comenzado a utilizar el tema zerif lite e integrando woocommerce y me ha encantado. Apliqué tu post para añadir una barra lateral y ha funcionado a la perfección. Tengo ahora una duda y no se si me puedas orientar, estoy intentando realizar un par de nuevas páginas que contengan las promociones y lo nuevo respectivamente, pero al utilizar los shortcodes incluidos en woocommerce ([recent_products] por ejemplo) el tema se deforma, quedan sobre puestos algunos elementos y no aplica los mismos estilos que la página default de productos. Alguna idea de como puedo realizar esto de forma correcta.

    Gracias, saludos cordiales.

    • Caribdis Diseño Web

      Hola, Damien.

      Gracias por tu comentario. Lo que te está sucediendo es porque la página estándar de Zerif Lite no tiene manera de cargar los estilos de WooCommerce en el <body>. Lo más conveniente en este caso, será crear una plantilla de página para los códigos de WooCommerce y luego asignarle los estilos mediante un filtro en el archivo functions.php.

      Primero, en la carpeta del tema hijo, creá una archivo que luego guardarás con el nombre template-woocommerce.php con el siguiente código:

      <?php
      /**
       * Template Name: WooCommerce Page
       */
      get_header(); ?>
      <div class="clear"></div>
      </header> <!-- / END HOME SECTION  -->
      <div id="content" class="site-content">
      	<div class="container">
      		<div class="content-left-wrap col-md-9">
      			<div id="primary" class="content-area">
      			<main id="main" class="site-main" role="main">
      			<?php 
      			while ( have_posts() ) : 
      			the_post();
      			get_template_part( 'content', 'page' );
      			/* If comments are open or we have at least one comment, load up the comment template */
      			if ( comments_open() || '0' != get_comments_number() ) :
      			comments_template();
      			endif;
      			endwhile;
      			?>
      			</main><!-- #main -->
      			</div><!-- #primary -->
      		</div><!-- .content-left-wrap -->
      		<div class="sidebar-wrap col-md-3 content-left-wrap">
      			<?php get_sidebar(); ?>
      		</div>
      	</div><!-- .container -->
      <?php get_footer(); ?>
      

      Luego en el archivo functions.php pegá:

      add_filter( 'body_class','woo_body_class' );
      function woo_body_class( $classes ) { 
          if ( is_page_template( 'template-woocommerce.php' ) ) {
              $classes[] = 'woocommerce';
              $classes[] = 'woocommerce-page';
          }
          return $classes;
      }
      

      Por último, cuando crees la página donde van a ir los códigos abreviados, seleccioná la plantilla WooCommerce Page.

      Avisame si te sirve.

      Saludos.

      • damien

        Hola

        Me ha funcionado bastante bien, solo en la parte responsiva se muestra diferente. Supongo tiene que ver con la parte de los estilos. Lo estaré revisando para poder realizar el ajuste. En verdad tu trabajo y el apoyo que nos brindas es excelente.

        Muchas gracias por la pronta respuesta, saludos!

        • Caribdis Diseño Web

          Hola, Damien.

          Sí, me olvidé de aclarar que es muy probable que haya que ajustar algún que otro estilo, pero es preferible a ir buscando manualmente las ID y clases y copiando todos los estilos de WooCommerce.

          Me alegro de que te haya servido.

          Saludos.

  19. Hector Salas

    Hola que gusto saber que tocan el tema de woocommerce, ojala y me puedan ayudar, eh estado buscando una forma de poder poner precios de acuerdo al usuario conectado digamos algo de Price by role, deseo definir precios por Suscriptor o Customer o Shop manager y asi cuando cada tipo de usuario este conectado pueda ver los precios de acuerdo a ese rol, e visto solo algunas formas pero lo hacen por descuento general al total de la compra y lo que busco precio por producto, encontré este plugin woocommerce role based pricing V2.8.8 y me ayuda con la tarea pero la pagina de simple-producto me la desordena demasiado al igual que los widgets, con el mismo plugin en la versión 3.0 se corrige esto pero no hace el cambio de precio por role de usuario, espero sus comentarios y/o tengan una mejor solución al respecto.

    Saludos cordiales!!!!

    • Caribdis Diseño Web

      Hola, Héctor.

      Gracias por comentar. La verdad, mucho no puedo opinar sobre el tipo de plugins que mencionaste, ya que nunca los he usado. Encontré este que parece tener muy buenas referencias: WooCommerce Prices By User Role. No es gratuito, pero por lo que se ve es sencillo de configurar y las demos son bastante claras.

      Espero que te sirva.

      Saludos. 🙂

      • Hector salas

        Gracias por la información, ya había visto ese plugin asi que lo estudiare a detalle para lo que requiero, sigan con el trabajo es este tema que es buenisimo me han ayudado bastante.

        Agradezco su tiempo, 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!