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.
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.
Tutorial original en inglés: http://docs.themeisle.com/article/56-how-to-add-sidebar-on-woocommerce-pages
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
- 🔥 Ofertas de WordPress 🛒Black Friday y Cyber Monday 2023 - 21 de noviembre de 2023
- 🎃 Ofertas de WordPress Halloween 2023 - 30 de octubre de 2023
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.
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
divno es el correcto.Saludos.
hola, ¿woocommerce.php que menciona se encuntra wpcontent plugins/Woocommerce
Cierto?
Saludos y gracias por sus tutoriales
Hola, Vale.
El archivo
woocommerce.phpes el que se encuentra en la carpeta/wp-content/themes/zerif-lite/.Saludos.
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?
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.
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.
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.
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.
Hola, Rubén.
Fijate que no sea un plugin el que está aplicando estilos que interfieren.
Saludos.
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.
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.
Perfecto, ahora los productos quedan debajo del botón. Muchas gracias!
Hola, segui los pasos y no me funciono, sabes que podria ser?, mi sitio es shopexcr.com, gracias!.
Respondido aquí.
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.
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 encustom.csssin esa declaración no va a tener efecto. Cuando veas que esto sucede, usá!important.Saludos.
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?
Sí, puede ser. Y por lo general Chrome es duro para actualizar los cambios de estilo.
Un valor con
!importantque no se aplique encustom.csses 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 (unstyle="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.
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?
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.
Hola, ¿hay manera de que la barra lateral aparezca en lado izquierdo en lugar del derecho?
GRACIAS!
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.
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….
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.
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.
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.cssprincipal 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.csses 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 encustom.cssy no enstyle.cssdel tema hijo.El error en
functions.phppudo deberse a algún cierre de llave o punto y coma que falta.Saludos.
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!
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.
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
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
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.
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…)
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.
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!!!
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.
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!!!
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!!
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!!
Hola, Faiver.
Fijate en esta respuesta.
Saludos.
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!!
¿El tema hijo está activado?
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.
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.
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!
Hola, Mariano.
¿Probaste con Q2W3 Fixed Widget?
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.
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
Hola, Mariano.
Fijate de usar la siguiente configuración en Apariencia > Opciones de Fixed Widget (widget fijo):
Saludos.
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.
Respondido aquí.
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.
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.
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/sitey la de la tienda ecommercewww.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=39990por 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.
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?
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
Hola, Luis.
Simplemente borrá los archivos
woocommerce.phpypage.phpde la carpeta del tema hijo.Saludos.
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.
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 archivofunctions.php.Primero, en la carpeta del tema hijo, creá una archivo que luego guardarás con el nombre
template-woocommerce.phpcon el siguiente código:Luego en el archivo
functions.phppegá: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.
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!
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.
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!!!!
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. 🙂
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!!!! 🙂