如何在 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>

當我復制此代碼並更改類時，它只會將每個產品顯示兩次。

我花了很多時間在任何地方都找不到答案。

我到底想要什么能夠得到這個結果：

<!-- First product -->
<div class="columns">
<div class="column custom-class-1">
Here first product codes
</div>
<div class="custom-class-something">
Custom codes
</div>
</div>

<!-- Second product -->
<div class="columns">
<div class="custom-class-something-else">
Custom codes
</div>
<div class="column custom-class-2">
Here second product codes
</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 商店循環