• Muy buenas,

    Estoy diseñando un ecommerce mediante Woocommerce y quiero editar la tabla que se genera en los productos sobre sus atributos en la pestaña de Información Adicional.
    Simplemente quiero modificar el color del borde con CSS. He probado de añadir código CSS, pero el estilo de la tabla no se cambia al modificar todas las tablas del WordPress.

    Por ejemplo, el siguiente código no provoca ningún cambio a la tabla de los atributos de los productos de la pestaña de información adicional:

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    En resumen, ¿cómo puedo modificar el borde de la tabla de los atributos de los productos de la pestaña de información adicional en Woocommerce?

    • Este debate fue modificado hace 1 año, 7 meses por marcgisbertj.
Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador kallookoo

    (@kallookoo)

    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 }

    Iniciador del debate marcgisbertj

    (@marcgisbertj)

    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é?

    Moderador kallookoo

    (@kallookoo)

    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

    Iniciador del debate marcgisbertj

    (@marcgisbertj)

    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.

    Moderador kallookoo

    (@kallookoo)

    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.

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • El debate ‘Editar tabla de Información Adicional de Woocommerce’ está cerrado a nuevas respuestas.