A continuación le contamos cómo quitar la barra lateral (sidebar) de los productos en WooCommerce + Storefront. Sobra decir que esa barra lateral puede ser muy útil, tanto para la navegación, como para poner productos relacionados, pero todo dependerá de la complejidad de su tienda y de sus objetivos.
Antes de comenzar, es posible que pueda elegir la plantilla de ancho completo durante la edición del producto. Si esta opción no está disponible o simplemente no les convence, esta es la manera de hacerlo:
Lo primero es agregar este fragmento de código de php que se encarga de remover la barra lateral de los productos.
Quitar la barra lateral (sidebar) del producto
/**
* Quitar la barra lateral del producto en WooCommerce +Storefront
*/
add_action( 'get_header', 'quitar_sidebar_producto_storefront' );
function quitar_sidebar_producto_storefront() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
Lo siguiente es agregar este fragmento de código de css que hace que el producto quede de ancho completo, cubriendo la parte vacía que ha dejado la barra lateral:
Hacer el producto de ancho completo
@media (min-width: 768px) {
.single-product.left-sidebar .content-area, .single-product.right-sidebar .content-area {
width:100%;
float:left;
}
}
¿Dónde poner este fragmento de código?
Los fragmentos de código de PHP pueden ponerse en el tema hijo (child theme), en el archivo llamado functions.php, al final del archivo (antes del «?>»). Los fragmentos de CSS también pueden ponderse en el tema hijo, pero en el archivo style.css.
Si no sabes bien cómo hacerlo, te recomendamos leer Cómo crear un plugin propio para personalizar y hacer todos los ajustes de WordPress y WooCommerce, en donde podrás aprender la mejor manera para poner todos los ajustes y personalizaciones de un sitio.
Publicaciones Relacionadas
¿Este fragmento de código aun funciona?
Estos fragmentos de código han sido probados por nosotros personalmente y están funcionando en varios de nuestros sitios de WordPress con WooCommerce y Storefront. Por favor déjanos saber en los comentarios si ha funcionado bien. Estaremos felices de revisar si algo ha cambiado.
Si esto ha sido útil para ti y te ha ahorrado algo de tiempo y dinero, suscríbete a nuestro blog y compartelo con tus amigos y colegas.
¿Necesitas más ayuda?
¿Tienes dudas? ¿Necesitas ayuda profesional? Tenemos amplia experiencia en desarrollo de Sitios Web, Aplicaciones Web y Aplicaciones Móviles.