WooCommerce My Account CSS

Es la primera vez que trabajo con WooCommerce. Hoy en día es la herramienta más completa a la hora de realizar una web de compras con WordPress. Es complejo pero tienes muchas utilidades y un sin fin de opciones.

En este caso se encuentra instalado como parte de un template llamado EduGate que se utiliza ofrecer cursos educacionales online. Es un template muy completo pero, como todos los templates, hay que dedicar tiempo a dejar un diseño limpio y dejar bien configurados los valores por defecto.

A la hora de configurar la visualización de la zona de usuarios me he encontrado con esto:

No sé si es algo habitual, pero buscando por internet WooCommerce My Account Css me he encontrado gente con el mismo problema.

Encontré un CSS que se adaptaba a lo que buscaba que era simplemente crear un menú de navegación sencillo. Le he dado otro aire y he añadido unas cuantas modificaciones más para poder visualizar de mejor manera el menú:

Mucho más descente para mi gusto 😉

Aquí dejo el CSS:


.section-padding {padding: 10px 0;}
@media only screen and (min-width: 769px) {
.woocommerce-account .woocommerce-MyAccount-navigation {width: 22%;}
.woocommerce-account .woocommerce-MyAccount-content {width: 75%;}
}
nav.woocommerce-MyAccount-navigation ul {
list-style-type: none;
padding-left: 0;
font-size: 1em;
line-height: 26px;
float:left;
width:100%;
margin:25px auto;
}
nav.woocommerce-MyAccount-navigation ul li {
padding: 8px 20px;
background-color: rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
float:left;
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
background-color: rgba(0,0,0,0.1);
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
color: rgba(0,0,0,0.8); cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
background-color: rgba(0,0,0,0.07);
}
.woocommerce .woocommerce-error, .sw-woocommerce .woocommerce-message, .woocommerce .woocommerce-message, .sw-woocommerce .woocommerce-error, .sw-woocommerce .woocommerce-info, .woocommerce .woocommerce-info{
float: left;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{
left: 0.5em;
}