Limpia los Estilos de las Tablas de Variaciones en WooCommerce con Este Código CSS

Las tablas de variaciones en WooCommerce pueden ser un poco pesadas visualmente, especialmente si estás utilizando el tema Hello Elementor. Si buscas un diseño más limpio y estético, ¡este tutorial es para ti! 🚀

A continuación, desglosaremos un sencillo código CSS que eliminará estilos innecesarios de las tablas de variaciones, dándole un aspecto más minimalista y ordenado a tus páginas de producto.

Código CSS

/*Elementor Variation Table Clean Styles*/

.elementor-widget-container table.variations th,
.elementor-widget-container table.variations td {
    padding: 0px;
    background: #fff0;
    border: 0px;
    margin-bottom: 5px;
}
.elementor-widget-container div.single_variation_wrap {
    margin-top: 10px;
}

/*END Elementor Variation Table Clean Styles*/

Este código CSS está diseñado para aplicarse específicamente a las tablas de variaciones en WooCommerce dentro del entorno de Elementor.

Personalización y mejoras

Si deseas personalizar aún más este código, considera cambiar el margin-bottom o el margin-top en la envoltura de variación. Por ejemplo, puedes aumentar el espacio a 15px si sientes que necesitas más separación entre elementos.

Con este simple código CSS, podrás limpiar los estilos de las tablas de variaciones en tu tienda WooCommerce, dándole un acabado más profesional a tus páginas de producto. ¡Ya puedes probarlo y ver cómo mejora la apariencia de tu tienda! 💪✨

¡Y listo! Tu tienda ahora tiene un aspecto más limpio y organizado. No dudes en experimentar con los márgenes y otros estilos para personalizar aún más tu diseño. ¡Dale un toque único a tu sitio! 🙌

Compartir esta información