Páginas de producto sin barra lateral y de ancho completo en StoreFront #SemanaWooCommerce

En esta nueva guía de personalización de WooCommerce vamos a solucionar un problema habitual en las tiendas online con el tema StoreFront, el tema por defecto de WooCommerce.

Realmente me gusta mucho el tema StoreFront, es uno de los mejores sin duda, pero carece de opciones de personalización que sí ofrecen otros temas.

Una de las cosas que más molesto me resulta es no disponer de un ajuste en el personalizador o donde sea para configurar que las páginas de producto sean de ancho completo, sin barra lateral.

Esto, que es muy fácil de conseguir en la página de la tienda, carrito o finalizar compra, cambiando los atributos de página, no es posible en principio con ninguna opción para las páginas de producto, al no ser páginas, sino un tipo de contenido: producto.

Pero todo tiene solución en WordPress.

Si quieres que tus páginas de producto no tengan barra lateral y se muestren a ancho completo son un par de pasos para que queden perfectas.

Quita la barra lateral

Para empezar, añade este código al final del archivo functions.php del tema hijo de StoreFront.

// Páginas de producto de Storefront sin barra lateral
add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}

Cuando guardes los cambios habrás quitado la barra lateral de la página de producto, pero aún queda un pequeño ajuste para que sea de ancho completo.

Porque sí, la barra lateral desaparece, pero queda su hueco a la derecha, y queda horrible.

Fuerza el ancho completo

Así que el segundo y último paso es añadir algo de CSS en el personalizador de WordPress (Apariencia > Personalizar), este:

/* Páginas de producto de StoreFront a ancho completo */
body.woocommerce #primary { width: 100%; }
body.woocommerce.single-product #primary { width: 100 %; }

Ahora ya queda perfecto, sin barra lateral y a ancho completo.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

1 comentario en “Páginas de producto sin barra lateral y de ancho completo en StoreFront #SemanaWooCommerce”

  1. Hola! le conozco desde los videos que realizó para siteground y de verdad me gusta mucho sus artículos, pero quisiera preguntarle lo siguiente basándose en su experiencia por favor, cual pluggin me recomienda para tiendas de personalización en WP, por ejemplo para diseñar camisas, tazas etc?

    Agradezco su respuesta de antemano y saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido