Hola @marcgisbertj
El CSS es jerarquico y se gestiona por id o class que se definen en las etiquetas HTML, si quieres modificar el estilo de una determinada etiqueta HTML debes comprobar que id o class tiene o si no existe comprobar la etiqueta superior hasta encontrar una id o class.
Ejemplos sencillos de lo que te comento.
Etiqueta HTML con class:
<table class="tabla"></table>
El CSS seria :
.tabla { border: 1px solid #000 }
Etiqueta HTML sin class:
<div class="contenedor-tabla"><table></table></div>
El CSS seria:
.contenedor-tabla table { border: 1px solid #000 }
Gracias kallookoo, pero entiendo perfectamente cómo funciona CSS, ese no es el problema.
El problema es que al añadir css a todas las tablas en general, una tabla en concreto de woocommerce no se modifica algunas veces.
Por ejemplo, si añado el siguiente código en el que cambio el color del fondo, el estilo de la tabla de woocommerce sí que se modifica adecuadamente:
table, th, td {
background-color: #96D4D4;
}
Sin embargo, si añado el siguiente código, la tabla solo modifica el grosor del borde entre la primera y la segunda columna (la tabla solo tiene dos columnas).
table, th, td {
border: 5px solid black;
border-collapse: collapse;
}
Pero aunque cambie el color del borde en el código, la tabla modifica el color de su borde.
¿Por qué?
Hola @marcgisbertj
Como te comente al ser jerarquico, debes examinar el codigo y crear el CSS acorde a su jerarquia.
Como tu te refieres a los atributos de los productos; Aqui tienes la tabla predeterminada.
<table class="woocommerce-product-attributes shop_attributes">
<?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
<th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $product_attribute['label'] ); ?></th>
<td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></td>
</tr>
<?php endforeach; ?>
</table>
Si te fijas, para la table y tr existen dos clases y para los th y td una class.
Eso significa que si revisas el CSS del WooCommerce veras que aplica estilos personalizados.
Ahora bien existe otra posibilidad, aunque no la aconsejo, que es usar la palabra «!important» despues de la regla. Lo que hacemos con eso es que cualquier regla definida despues no se usaria.
Te adjunto los enlaces de referencia:
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/single-product/product-attributes.php
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/legacy/css/woocommerce.scss#L957
https://developer.mozilla.org/en-US/docs/Web/CSS/important
Gracias @kallookoo!
Ahora sabiendo las clases y la regla de !important puedo editar perfectamente la tabla a mi parecer. Ha funcionado, gracias.
¿Podrías decirme cómo has encontrado esta documentación? He intentado encontrar yo la documentación pero no me sale. Así para la próxima vez sabré qué clase editar.
Hola @marcgisbertj
No existe una documentacion como tal para este caso.
Te comento algo que puede servirte en el futuro.
– En el WordPress y WooCommerce existen hooks (ganchos) para casi todo. Resumiendo se usa para modificar y o añadir alguna cosa.
– En el WooCommerce para mostrar los productos, carrito, checkout, etc… usa plantillas esas plantillas se pueden modificar añadiendola en el theme hijo o theme personalizado. En esas plantillas es donde puedes ver que clases tiene definidas. Ya que por defecto el WooCommerce aplica cierto CSS para ciertas partes.
Notas:
– Cuidado con cambiar los ids o las clases de las plantillas del WooCommerce, ya que el WooCommerce lo necesita para que el javascript funcione.
Referencias o enlaces de ayuda:
https://ayudawp.com/ganchos-filtros-acciones-wordpress/
https://developer.wordpress.org/reference/ ( para buscar que hace algo en WordPress )
https://woocommerce.com/document/introduction-to-hooks-actions-and-filters/
https://woocommerce.com/document/template-structure/
Saludos y acuerdate en marcalo como resuelto si consideras que asi lo esta para ayudarnos en la gestion/organicacio del foro.
