Suscríbete a DecodeCMS:
Storefront es un tema gratuito para WooCommerce, tiene funcionalidad básica, pero siempre se puede extender su funcionalidad a través de plugins o de código, en este artículo veremos cómo eliminar la barra lateral para que algunas páginas se vean en ancho completo.
Resultado Final
Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:

Código para ocultar la barra lateral en determinadas páginas
Al ocultar la barra lateral o sidebar tendremos el espacio para ampliar el contenido y mostrarlo al ancho completo.
add_action( 'wp', 'dcms_remove_storefront_sidebar' );
function dcms_remove_storefront_sidebar() {
// Condiciones en donde se tiene que remover el sidebar
if ( is_shop() || is_product() || is_cart() || is_checkout() ){
remove_action( 'storefront_sidebar', 'storefront_get_sidebar' );
add_filter( 'body_class', function( $classes ){
$classes[] = 'page-template-template-fullwidth-php';
return $classes;
});
}
}
Ten en cuenta que puedes usar las conditional tags de WooCommerce para especificar en qué páginas quiere quitar el sidebar y por lo tanto mostrar el contenido en ancho completo.
En el código anterior:
- Utilizamos el Hook wp el cual hace referencia a la función dcms_remove_storefront_sidebar
- Dentro de la función primero evaluamos en qué páginas se quitará el sidebar a través de los conditional tags de WooCommerce
- Luego removemos la acción llamada storefront_sidebar que hace referencia a la función storefront_get_sidebar
- Hasta aquí sólo hemos removido el sidebar, pero ahora especificaremos una clase CSS para en el body para que el contenido tenga el ancho completo
- Usamos el hook de filtro body_class, el cual hace referencia a una función anónima en donde se agrega la clase page-template-template-fullwidth-php, esta clase evidentemente ya existe para el tema Storefront
- Finalmente se retorna la variable con la clase agregada
Conclusión
Tal como hemos visto, es posible cambiar el comportamiento por defecto del tema Storefront y hacer que muestre el contenido sin el sidebar, es decir ocupando todo el ancho disponible.