Css adicional para configurar el tema de WordPress Storefront

He instalado una tienda virtual con WordPress + WooCommerce en Sekano Triops y he usado el tema Storefront, que es el recomendado por WooCommerce.

Después de varios días de trabajo y haber exprimido las opciones de personalización al máximo, todavía le quedaban algunos detalles por pulir que no se podían hacer sin meterse a las tripas del tema.

Puesto que la página es de un pequeño negocio no he querido arriesgarme a tocar archivos php ni hojas de estilo.

Además cada vez que se actualice el tema perdería todas las modificaciones realizadas ya que todavía no me he puesto a eso de hacer temas hijos.

Buscando por internet he encontrado varios trozos de CSS para distintos retoques pero la mayoría no funcionan. Sospecho que en cada actualización se cambian de nombre las clases o se hacen los ajustes de distinta forma.

Otra cuestión que no me dejaba dormir es que bajo el header hay un espacio en blanco que a mi se me antoja caprichosamente grande y quería reducirlo.

En muchos foros había líneas de CSS que reducían el margin-bottom del site-header y apañao. No funcionaba y no quería usar plugins para tamaña pequeñez.

Así que me fui al CSS adicional del personalizador de la plantilla y con el inspector de código de Firefox fui detectando y probando que elemento podría ser el responsable del espacio en blanco.

Resultó ser el margin-bottom de las migas de pan (woocommerce-breadcrumb). ¿Que cosas, eh?.

.woocommerce-breadcrumb {margin-bottom: 20px;}

También asuntos de espacios en blanco había en la zona del footer. Estuve peleando con varios elementos solapados y jugando con margin, padding, tops y bottoms.

Al final son todo asuntos de márgenes, he visto. Os pego la configuración que me ha funcionado aunque se puede llegar al mismo resultado tocando otros elementos.

.site-info{margin-top: -2em;}
#content{margin-bottom: -2em;}
#primary{margin-top: -2em;}

Y la última es la eliminación de la frase final del footer, además muy distanciada del resto de elementos del pie. No me molesta que ponga «Storefront diseñado por WooCommerce» pero si que me gustaría poder acercarlo un poco al resto de elementos.

En foros había maneras de arreglar esto pero para mi eran arriesgadas ya que había que eliminar o incluir ciertas líneas PHP en el functions.php. Como dije antes, la web es un negocio y no voy a arriesgar a que casque el blog por una cuestión menor de diseño.

Con un poco de CSS adicional la frase sigue debajo del todo pero pero no tan aislada.

.footer-widgets {margin-top: -1em; margin-bottom: -5em;}

Al final me he decidido a colgar este post por la gente que tuviera problemas similares con Storefront, ya que es una tema muy instalado y con abundante documentación en internet.

También porque cuando algo me cuesta un rato hacerlo luego pierdo un poco más de rato en documentarlo y memorizarlo. Como tengo poca memoria uso el blog para estas cosas.

Para ver si os gustan estos cambios podéis probarlos en vuestro Storefront 2.2.5 pero antes visitad Sekano Triops, donde estas modificaciones están implementadas.