WooCommerce: menú de navegación horizontal de mi cuenta

Las páginas de Mi cuenta de WooCommerce cuentan con un menú de navegación de "barra lateral izquierda" (de forma predeterminada, los enlaces son: "Panel de control", "Pedidos", "Descargas", "Direcciones", "Detalles de la cuenta", "Cerrar sesión").

Una mejora genial (y fácil) puede ser mover dicha navegación a la parte superior y mostrarla horizontalmente en lugar de verticalmente. Pensarías que esta es una personalización de PHP compleja... pero te sentirás genial cuando notes que solo necesitas CSS para eso.

Tenga en cuenta que el CSS puede cambiar ligeramente según su tema, en caso de que aplique CSS personalizado al panel de navegación predeterminado de Mi cuenta de WooCommerce. A continuación, enumeraré un par de soluciones para WooCommerce predeterminado y para el tema Storefront, para que al menos tenga una idea de lo que podría necesitar en términos de modificarlo. ¡Disfrutar!

Este es el diseño predeterminado del menú de navegación de las páginas de Mi cuenta de WooCommerce. Si no te gustan las barras laterales, ¡este es el tutorial adecuado para ti!

Fragmento de CSS (WooCommerce predeterminado): mostrar el menú de navegación de mi cuenta horizontalmente en lugar de verticalmente

En primer lugar, queremos extender la navegación de Mi cuenta y el contenido de la pestaña Mi cuenta a un ancho completo en dispositivos grandes (de manera predeterminada, WooCommerce ya aplica dicha regla para dispositivos de hasta 768 px):

@media only screen and (min-width: 769px) {
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
}

Aquí está el resultado:

En segundo lugar, debemos alinear al centro el menú de navegación (etiqueta UL) y hacer que sus elementos se muevan horizontalmente (etiquetas LI):

@media only screen and (min-width: 769px) {
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
}

Código CSS, todo junto, para que puedas copiar/pegar:

@media only screen and (min-width: 769px) {
 
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
 
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
 
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
 
}

Fragmento de CSS (tema de escaparate): mostrar el menú de navegación de mi cuenta horizontalmente en lugar de verticalmente

@media (min-width: 768px) {
 
   .page-template-template-fullwidth-php .woocommerce-MyAccount-navigation, .page-template-template-fullwidth-php .woocommerce-MyAccount-content {
      width: 100%;
      float: none;
   }
 
   .woocommerce-MyAccount-navigation ul {
      text-align: center;
      border-bottom: 1px solid rgba(0,0,0,.05);
   }
 
   .woocommerce-MyAccount-navigation ul li {
      display: inline-block;
      border-left: 1px solid rgba(0,0,0,.05);
      padding: 0 1em;
      border-bottom: 0;
   }
 
}

¿Existe un complemento (confiable) para eso?

Si le encantaría codificar pero no se siente 100% seguro con CSS, decidí buscar un complemento confiable que logre el mismo resultado.

En este caso, recomiendo el complemento YITH WooCommerce Personalizar la página de mi cuenta . Además de cambiar el diseño del menú de navegación, también puede personalizar el esquema de colores, agregar pancartas, configurar reCaptcha en los formularios de registro e inicio de sesión, agregar, ordenar, renombrar, eliminar y agrupar pestañas, mostrar pestañas condicionalmente a un rol de usuario determinado y mucho más.

Pero en caso de que odie los complementos y desee programar (o desee intentarlo), siga leyendo

Deja una respuesta

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

Subir