En este tutorial vamos a ver cómo eliminar la barra lateral de Storefront, el tema gratuito oficial de WooCommerce.
El sidebar en Storefront
Las barras laterales que se encuentran en las páginas de las tiendas online suele servir para colocar filtros, categorías e información relevante para clientes y potenciales clientes.
Pero a veces, sea por el tipo de tienda o por otro motivo, no necesitamos esas funcionalidades o simplemente buscamos un diseño más minimalista, y queremos eliminarlas.
Pues bien, Storefront nos permite realizar modificaciones usando código y mediante el personalizador. Si además utilizamos el plugin Powerpack, las opciones se amplían considerablemente como vemos en el curso de Storefront Intermedio.
En este caso vamos a optar por hacerlo usando únicamente código, y ocultaremos el sidebar no sólo de la página completa, también en páginas específicas. ¡Vamos a ello!.
Eliminar sidebar en Storefront usando código
Lo primero que vamos a ver será el código que necesitamos para eliminar el sidebar de toda la web cuando tenemos el activado el theme Storefront.
Este código PHP podemos añadirlo de varias formas a WordPress. En este caso vamos a hacerlo a través de un plugin de utilidades, que como hemos visto en otras ocasiones, resulta muy útil a la hora de modificar o añadir funcionalidades.
Recordemos que podríamos hacerlo también usando otros métodos, si os interesa el tema podéis echar un vistazo al tutorial añadir código a WordPress.
Bien, pues comencemos. En primer lugar debemos acceder al escritorio de WordPress, "Plugins" y desactivar nuestro plugin de utilidades. Una vez hecho, debemos editar el código del plugin para añadir esta modificación.
Para ello usaremos un programa FTP como Filezilla, o bien el propio administrador de archivos del hosting donde tengamos alojado el sitio. A continuación, agregaremos el siguiente fragmento de código al final del plugin. Por último pulsaremos sobre guardar y volveremos a activar el plugin para que los cambios surtan efecto.
function bld_eliminar_barra_lateral() {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
add_action( 'get_header', 'bld_eliminar_barra_lateral' );
Ahora que lo hemos aplicado, vamos a ver cómo quedaría la web sin la barra lateral:
Barra lateral eliminada con código
Como vemos se ha eliminado el sidebar, pero el ancho del bloque de productos no ha variado y queda un espacio vacío donde antes estaba la barra lateral. Así que vamos a realizar un pequeño cambio en el CSS para establecer el ancho completo y llenar dicho espacio.
Lo más adecuado sería realizar esta modificación en la hoja de estilos de un tema hijo de Storefront, aunque no es la única forma. Podríamos usar también el personalizador de WordPress, "Apariencia/Personalizar/CSS adicional" o bien un plugin del tipo Simple Custom CSS.
En este caso vamos a ver esta última opción. Este plugin es muy sencillo y permite agregar estilos personalizados, que es lo que buscamos. Además, lo bueno que tiene es que los estilos que añadamos van a mantenerse aunque actualicemos el tema. Vamos a ver cómo usarlo, veréis qué fácil.
Lo primero será acceder al escritorio de WordPress, y dirigirnos a "Apariencia/CSS personalizado". Aquí encontraremos un editor donde podemos pegar el código CSS que vayamos a usar para modificar el aspecto de nuestro sitio, en este caso la línea: body.woocommerce #primary { width: 100%; }
Añadir CSS con Simple Custom CSS
Después debemos hacer clic en "Actualizar el CSS personalizado" y ya lo tendremos listo. Veamos cuál sería el resultado.
Sidebar eliminada en Storefront y contenido con ancho completo
¿Queda bien, verdad? Con código podemos hacer prácticamente lo que se nos antoje. Por cierto, si queréis aprender más sobre modificar Storefront con código, podéis proponer un nuevo curso avanzado, sería muy interesante :).
Eliminar sidebar de páginas concretas en Storefront
En el apartado anterior vimos el código necesario para eliminar el sidebar de todo el sitio. Ahora vamos a ver el que necesitaríamos para eliminar la barra lateral de una página o páginas concretas.
De nuevo, tendremos que ir al escritorio de WordPress, desactivar el plugin de utilidades, y acceder al mismo a través del administrador de archivos del hosting o directamente vía FTP. Cuando lo hagamos podríamos añadir el siguiente código:
function bld_eliminar_barra_lateral() {
if (is_product()){
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
add_action( 'get_header', 'bld_eliminar_barra_lateral' );
Recordad que, después de agregarlo, debemos guardarlo y volver a activar el plugin. Aquí lo que hacemos es indicar que queremos eliminar la barra lateral (línea remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );) solamente en la página de producto (if (is_product())). Sin embargo, si en lugar de ese código incluimos este otro:
function bld_eliminar_barra_lateral() {
if (is_cart()){
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
add_action( 'get_header', 'bld_eliminar_barra_lateral');
Estaremos eliminando la barra lateral únicamente en el caso de tratarse de la página correspondiente al carrito de la compra. Si bien, el diseño de esta página en concreto también se podría modificar desde "Páginas", abriendo la página Carrito en modo edición, y cambiando la "Plantilla" a "Ancho completo".
En cualquier caso, si usamos código sólo necesitaremos modificar una línea, la que comprueba la página que queremos personalizar. Se haría de igual forma en otros casos, simplemente tendríamos que cambiar la condición.
Resumen y conclusión
En este tutorial hemos aprendido a eliminar la barra lateral o sidebar del tema Storefront. Para ello añadimos un pequeño fragmento de código PHP en un plugin de utilidades.
Modificando mínimamente este código podemos eliminar el sidebar de todo el sitio o únicamente de las páginas que nos interese, tal como hemos visto.
Y ya lo sabéis, si queréis aprender más sobre Storefront, WooCommerce, o WordPress en general, os recomendamos los cursos de boluda.com. Si os suscribís podréis preguntar vuestras dudas al equipo de soporte y tendréis acceso a todos los cursos. Os esperan más de 6732 vídeos. ¡No os los perdáis! :)