wordpress - 将 WooCommerce 属性表更改为两列

Question

我对 Wordpress/WooCommerce 很陌生，我正在尝试做一些我认为很简单的事情。

非常基本的 WooCommerce 单一产品页面具有产品属性，它们都出现在一个大列下。

我在哪里可以实际修改产品页面的样式和 css，以便我可以将它们分成2列？

我看到表本身是在类“ woocommerce-product-attributes”和“ shop_attributes”下生成的？

非常感谢任何指导。

标签： wordpresswoocommerce

Answer 1

有同样的问题，通过编辑 woocommerce/templates/single-product/product-attributes.php 解决了它。要在 woocommerce 更新之间永久更改，请将文件内容复制到 yourtheme/woocommerce/single-product/product-attributes.php。

改变：

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

至：

<table>
<?php foreach (array_chunk($product_attributes, 2) as $product_attribute_key => $product_attribute) :{ ?>
    <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
    <?php foreach ($product_attribute as $value) :{ ?>
              <th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $value['label'] ); ?></th>
              <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $value['value'] ); ?></td>
    <?php } endforeach; ?>
    </tr>
<?php } endforeach; ?>
</table>