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

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

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

Sobre el autor

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

  1. 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í

  2. 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?

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