如何在Woocommerce中为类别归档页面中的每个产品获取唯一的div设置和类？

Question

如何在woocommerce中为每个产品创建具有单独的div和类的自定义类别存档页面？在woocommerce文件content-product.php中，我具有以下代码：global $product;// Ensure visibility.if ( empty( $product ) || ! $product->is_visible() ) {    return;}?><div <?php wc_product_class(); ?>>    <div class="columns">        <div class="column is-one-third">    <?php    /**     * Hook: woocommerce_before_shop_loop_item.     *     * @hooked woocommerce_template_loop_product_link_open - 10     */    do_action( 'woocommerce_before_shop_loop_item' );    /**     * Hook: woocommerce_before_shop_loop_item_title.     *     * @hooked woocommerce_show_product_loop_sale_flash - 10     * @hooked woocommerce_template_loop_product_thumbnail - 10     */    do_action( 'woocommerce_before_shop_loop_item_title' );        /**     *     * close link     */    do_action( 'woocommerce_shop_loop_close_link' );    ?>        </div>        <div class="column">    <?php    /**     * Hook: woocommerce_before_shop_loop_item.     *     * @hooked woocommerce_template_loop_product_link_open - 10     */    do_action( 'woocommerce_before_shop_loop_item' );    /**     * Hook: woocommerce_shop_loop_item_title.     *     * @hooked woocommerce_template_loop_product_title - 10     */    do_action( 'woocommerce_shop_loop_item_title' );    /**     * Hook: woocommerce_after_shop_loop_item_title.     *     * @hooked woocommerce_template_loop_rating - 5     * @hooked woocommerce_template_loop_price - 10     */    do_action( 'woocommerce_after_shop_loop_item_title' );    /**     * Hook: woocommerce_after_shop_loop_item.     *     * @hooked add to cart     */    do_action( 'woocommerce_after_shop_loop_item' );        /**     *     * close link     */    do_action( 'woocommerce_shop_loop_close_link' );    ?>        </div>    </div></div>当我复制此代码并更改类时，它只将每个产品显示两次。我花了很多时间找不到任何答案。依此类推，我计划将6或7种产品循环播放，以使其在页面上达到12/14个产品。

Answer 1

我编辑您的代码以为每个产品设置唯一的类。我得到产品ID并用它创建自定义类名称，如果您的产品ID为149，则每个产品列的类名称变为product-149：

global $product;

// Ensure visibility.

if ( empty( $product ) || ! $product->is_visible() ) {

    return;

}

$first_custom_class = 'product-' . $product->get_id();

$second_custom_class = 'custom-code-' . $product->get_id();

?>

<div <?php wc_product_class(); ?>>

    <div class="columns">

        <div class="column is-one-third <?php echo esc_attr($first_custom_class); ?>">

    <?php

    /**

     * Hook: woocommerce_before_shop_loop_item.

     *

     * @hooked woocommerce_template_loop_product_link_open - 10

     */

    do_action( 'woocommerce_before_shop_loop_item' );

    /**

     * Hook: woocommerce_before_shop_loop_item_title.

     *

     * @hooked woocommerce_show_product_loop_sale_flash - 10

     * @hooked woocommerce_template_loop_product_thumbnail - 10

     */

    do_action( 'woocommerce_before_shop_loop_item_title' );

        /**

     *

     * close link

     */

    do_action( 'woocommerce_shop_loop_close_link' );

    ?>

        </div>

        <div class="column <?php echo esc_attr($second_custom_class); ?>">

            <!-- YOUR CUSTOM CODES-->

        </div>

    </div>

</div>

结果：

<!-- First product with id 149-->

<div class="columns">

    <div class="column product-149">

    Here first product codes

    </div>

    <div class="custom-code-149">

    Custom codes

    </div>

</div>

<!-- Second product with id 150-->

<div class="columns">

    <div class="column product-150">

    Here second product codes

    </div>

    <div class="custom-code-150">

    Custom codes

    </div>

</div>

Answer 2

好的，我找到了解决方案，并在这里的另一个问题中对其进行了描述： 创建几个唯一的类，在一个循环中重复Woocommerce shop循环