WooCommerce: Páginas de producto de ancho completo, sin barra lateral

30-05-2019 / , , , , / 1 minuto de lectura

Si tienes una tienda online creada con WooCommerce habrás comprobado que en prácticamente todos los temas la página de producto tiene barra lateral.

Esto puede ser una distracción durante la compra, lo que empeoraría el embudo de ventas, perdiendo posibles ingresos si el visitante se distrae con elementos no bien enfocados en la barra lateral.

Por eso muchos administradores de tiendas online prefieren que las páginas de producto no tengan barra lateral, para que el cliente esté enfocado y centrado en las características del producto, y lo compre, por supuesto.

Si es tu caso, hay un truco muy sencillo para que tus páginas de producto sean de ancho completo, sin barra lateral, y funciona con la mayoría de los temas WordPress.

Solo tienes que hacer lo siguiente:

  1. Ve al menú de administración Apariencia > Personalizar >  CSS adicional.
  2. Añade el siguiente código y guarda los cambios.
body.woocommerce #primary { width: 100%; }

Pasarás de esto…

A esto otro…

Como comprobarás, es una personalización sencilla, efectiva y que puede mejorar las ventas en tu eCommerce.

(10 votos, promedio: 4.2) Valora este artículo para ayudar a mejorar la calidad del blog
Compartir en Pocket Compartir en LinkedIn Compartir en WhatsApp Compartir en Telegram

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

Sobre el autor

Apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y una perrita Jack Russell, vasco de nacimiento, español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde hace años ofrezco mis visiones acerca de la Web. Sígueme en Twitter

3 comentarios en “WooCommerce: Páginas de producto de ancho completo, sin barra lateral”

  2. hj

    es mejor:
    body.woocommerce.single-product #primary { width: 100 %; }
    Si lo pones de la otra manera también harás ancho completo a la página de la tienda y los filtros quedarán por debajo.
    Solo digo que hubiera sido bueno que contemplara usted las dos posibilidades en su aquí

    Responder
  3. Laura

    Tengo el tema Gateway de WordPress instalado y llevo intentando eliminar la barra lateral de la tienda y de los productos mucho tiempo, sin éxito. He introducido en la personalización cada código CSS que he encontrado durante la búsqueda de la solución, y no lo he conseguido. He recurrido al plugin Full Width template en el que selecciono la opción de «ancho completo» y ejecuta la acción pero al actualizar la página vuelve sola a «página por defecto». La única manera de eliminarla es seleccionando la opción «Full Width» pero en ese caso, la apariencia en la web queda sin ningún tipo de margen superior, inferior ni lateral. ¿He de olvidarme del ancho completo en este caso verdad?

    Responder

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