Woocommerce strona kategorii produktu, 6 unikatowych klas dla 6 produktów w pętli

Question

W pliku content-product.php mam taki kod:

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>

Próbowałem go skopiować i zmienić klasę dla następnego, też zmienić ułożenie diva dla następnego, ale okazało się, że wedle tych zmian wychodzi 2 razy jeden produkt, i kolejne tak samo po dwa razy.

Wiem, że jest to trudne, jednak może ktoś wie jak zrobić żeby wyszedł mi taki rezultat:

<div class="columns">

<-- Pierwszy produkt -->
<div class="column klasa1-produktu">

</div>
<div class="column prawy-bok">
<-- kod własny -->
</div>
</div>

<-- drugi produkt -->
<div class="columns">
<div class="column lewy-bok">
<-- kod własny -->
</div>
<div class="column klasa2-produktu">

</div>
</div>

<-- trzeci produkt -->
<div class="columns">
<div class="column klasa3-produktu">

</div>
<div class="column prawy-bok">
<-- kod własny -->
</div>

<-- czwarty produkt -->
<div class="columns">
<div class="column lewy-bok">
<-- kod własny -->
</div>
<div class="column klasa4-produktu">

</div>
</div>

<-- Piąty produkt -->
<div class="columns">
<div class="column klasa5-produktu">

</div>
<div class="column prawy-bok">
<-- kod własny -->
</div>
</div>

<-- szósty produkt -->
<div class="columns">
<div class="column lewy-bok">
<-- kod własny -->
</div>
<div class="column klasa6-produktu">

</div>
</div>

Ten rezultat chciałbym jeszcze raz zapętlić żeby było na przykład 12 produktów na stronie.

Answer 1

Ok znalazłem rozwiązanie:

Zmieniłem zupełnie kod wewnątrz pliku archive-product.php na taki:

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
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' );

Zawarcie kilku template files (loop/loop-start.php, content-product.php, loop/loop-end.php) w jednym pliku archive-product.php pozwala na działanie tego kodu:

		$one = 1;

I dodanie go do klasy:

class="columns product<?php echo esc_attr($one++); ?>"

sprawia, że każda kolejna klasa otrzymuje kolejny nr,

product1, product2 i tak dalej.

Na każdej kolejnej stronie wszystko się powtarza, pierwszy wyświetlany produkt otrzymuje klasę product1.

Comments

W sumie to odpowiedź jest trochę inna. To tutaj nie działa dla select options order by,

czyli nie działa wyświetlanie według ceny, popularności itd.

Poprawne rozwiązanie znajduje się tutaj:

https://stackoverflow.com/questions/55800540/create-couple-of-unique-classes-repeating-in-a-loop-woocommerce-shop-loop

Answer 2

Rozwiązanie znajduje się tutaj:

https://stackoverflow.com/questions/55800540/create-couple-of-unique-classes-repeating-in-a-loop-woocommerce-shop-loop