Create couple of unique classes repeating in a loop Woocommerce shop loop

Question

I want to make couple of unique classes, like class1, class2 up to 6 or 7 added to 6 or 7 products in the shop loop. I'd like to make these 6/7 products with unique class doubled to make it 12/14 products on the page in shop catalague.

I tried editing content-product.php file and archive-page.php.

I added this code to content product file:

<?php
$x = 1;
?>
<li class="columns class<?php echo esc_attr($x++); ?>">

But it does not add any extra number to another product. It only add +1 if there is another div class inside that li with this php code:

<?php echo esc_attr($x++); ?>">

added to the class, but it does not apply to another li with the next product. Any ideas how to achieve that?

Answer 1

Ok I found the solution.

<?php
$x = 1;
?>
<li class="columns class<?php echo esc_attr($x++); ?>">

this code only works within one file of php so I needed to keep everything in one php file, exactly in archive-product.php

Instead of keeping this reference to another php file

<?php wc_get_template_part( 'content', 'product' ); ?>

I took all the content from the content product and added it in archive-product.php so $x code could work.

That's how the code of archive-product.php looks like and it works perfectly:

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

do_action( 'woocommerce_before_main_content' );

?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
    <h1 class="woocommerce-products-header__title page-title"><?php 
woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
 * Hook: woocommerce_archive_description.
 *
 * @hooked woocommerce_taxonomy_archive_description - 10
 * @hooked woocommerce_product_archive_description - 10
 */
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {
/**
 * Hook: woocommerce_before_shop_loop.
 *
 * @hooked woocommerce_output_all_notices - 10
 * @hooked woocommerce_result_count - 20
 * @hooked woocommerce_catalog_ordering - 30
 */
do_action( 'woocommerce_before_shop_loop' );
}
?>
<div class="products">
<?php
    $one = 1;
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12
        );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
    <div class="columns product<?php echo esc_attr($one++); ?>">
        <div class="column is-one-third">
    <?php
    defined( 'ABSPATH' ) || exit;

    global $product;

    // Ensure visibility.
    if ( empty( $product ) || ! $product->is_visible() ) {
        return;
    }
    /**
     * 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>
<?php
        endwhile;
    } else {
        echo __( 'Nie znaleziono produktów' );
    }
    wp_reset_postdata();
?>
</div><!--/.products-->

<?php
do_action( 'woocommerce_after_shop_loop' );
get_footer( 'shop' );

Answer 2

Actually my final awnser is a bit different. Previous one did not work with select/options for order by and probably for more than that. The proper solution for archive-page.php is:

defined( 'ABSPATH' ) || exit;

    get_header( 'shop' );

    /**
     * Hook: woocommerce_before_main_content.
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening 
     divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     * @hooked WC_Structured_Data::generate_website_data() - 30
     */
    do_action( 'woocommerce_before_main_content' );

    ?>
    <header class="woocommerce-products-header">
        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
            <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
        <?php endif; ?>

        <?php
        /**
         * Hook: woocommerce_archive_description.
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
        ?>
    </header>
<?php

woocommerce_product_loop_start();

$one = 1;

if ( wc_get_loop_prop( 'total' ) ) {
    while ( have_posts() ) {
  the_post();
  ?>
  <div class="columns product<?php echo esc_attr($one++); ?>">
  <?php
        /**
         * Hook: woocommerce_shop_loop.
         *
         * @hooked WC_Structured_Data::generate_product_data() - 10
         */
        do_action( 'woocommerce_shop_loop' );

        wc_get_template_part( 'content', 'product' );
    }
}
woocommerce_product_loop_end();
?>
</div>
<?php
/**
 * Hook: woocommerce_after_shop_loop.
 *
 * @hooked woocommerce_pagination - 10
 */
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
 * Hook: woocommerce_no_products_found.
 *
 * @hooked wc_no_products_found - 10
 */
do_action( 'woocommerce_no_products_found' );
}
/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the 
content)
*/
do_action( 'woocommerce_after_main_content' );
/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );

get_footer( 'shop' );