Как получить для каждого продукта на странице архива категории уникальную настройку div и классы в Woocommerce?

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

Я редактирую ваш код для установки уникального класса для каждого продукта.Я получаю идентификатор продукта и создаю с ним пользовательское имя класса. Если идентификатор вашего продукта равен 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 loop