Jak wyświetlić listę rozwijanych odmian na stronie sklepu WooCommerce

Opublikowany: 2021-07-19

WooCommerce Pokaż rozwijane menu rozwijane na stronie sklepu Szukasz sposobu na wyświetlenie wariacji rozwijanych na stronie sklepu WooCommerce? W tym poście podzielimy się dla Ciebie prostym rozwiązaniem. Będziemy jednak używać kodu niestandardowego, a to oznacza, że ​​aby wdrożyć to rozwiązanie, musisz mieć pewne doświadczenie w kodowaniu.

Większość sklepów eCommerce ma wiele odmian produktów. Klienci muszą przejść do stron pojedynczych produktów, aby zobaczyć odmiany.

Jeśli wyświetlisz odmiany produktów na stronie sklepu, sprawi to, że będą one bardziej atrakcyjne dla klientów. Ponadto pozwoli Ci to powiększyć swój produkt za pomocą kilku kliknięć.

WooCommerce Pokaż rozwijane menu rozwijane na stronie sklepu

Pod koniec tego przewodnika będziesz mógł programowo wyświetlać odmiany rozwijane na stronie sklepu. Należy jednak pamiętać, że najpierw musisz utworzyć odmianę produktu na stronie produktu.

Zanim przejdziesz dalej, powinieneś również zainstalować lub utworzyć motyw potomny. Zapewni to, że Twoje zmiany nie zostaną utracone podczas aktualizacji. Ponadto musisz wykonać kopię zapasową swojego konta, aby w przypadku pomyłki móc wrócić do poprzedniej wersji.

Przejdźmy od razu.

Kroki, aby wyświetlić rozwijane menu rozwijane na stronie sklepu

Oto proste kroki, które musisz wykonać:

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, aby dodać funkcję, aby wyświetlić rozwijane odmiany na stronie sklepu.
  3. Dodaj następujący kod do pliku php : 
// Display variations dropdowns on shop page for variable products
 add_filter( 'woocommerce_loop_add_to_cart_link', 'njengah_display_variation_dropdown_on_shop_page' );
 function njengah_display_variation_dropdown_on_shop_page() {
	global $product;
	if( $product->is_type( 'variable' )) {
		$attribute_keys = array_keys( $product->get_attributes() );
	?>
		<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
		<?php do_action( 'woocommerce_before_variations_form' ); ?>
				<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
			<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
		<?php else : ?>
			<table class="variations" cellspacing="0">
				<tbody>
                  <?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
					<tr>
							<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
							<td class="value">
								<?php
									$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
	wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
									echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
								?>
							</td>
						</tr>
					<?php endforeach;?>
				</tbody>
			</table>
				<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
				<div class="single_variation_wrap">
				<?php
					/**
					 * woocommerce_before_single_variation Hook.
					 */
					do_action( 'woocommerce_before_single_variation' );
						/**
					 * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
					 * @since 2.4.0
					 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
					 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
					 */
					do_action( 'woocommerce_single_variation' );
	
					/**
					 * woocommerce_after_single_variation Hook.
					 */
					do_action( 'woocommerce_after_single_variation' );
				?>
			</div>
				<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
		<?php endif; ?>
			<?php do_action( 'woocommerce_after_variations_form' ); ?>
	</form>
		<?php } else {
		echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
			esc_url( $product->add_to_cart_url() ),
			esc_attr( isset( $quantity ) ? $quantity : 1 ),
			esc_attr( $product->id ),
			esc_attr( $product->get_sku() ),
			esc_attr( isset( $class ) ? $class : 'button' ),
			esc_html( $product->add_to_cart_text() )
		);
		}
	 }
  1. Oto wynik: wariacje

Zawijanie

Do tej pory powinieneś być w stanie wyświetlić odmiany rozwijane na stronie sklepu. Jeśli jednak nie znasz się na kodowaniu, zalecamy użycie wtyczki, takiej jak YITH WooCommerce Color and Label Variations (wersja Premium) lub WooCommerce Variation Master (wersja Premium).

Jeśli potrzebujesz dodatkowej pracy niestandardowej na stronie sklepu, skontaktuj się z nami. Mamy nadzieję, że ten post pomógł Ci znaleźć rozwiązanie Twojego problemu.

Podobne artykuły

  1. Jak dodać przycisk Wyświetl koszyk w WooCommerce?
  2. Jak zmienić tytuł strony sklepu w WooCommerce?
  3. Jak usunąć wszystkie produkty z WooCommerce?
  4. Jak dodać wyszukiwanie do strony sklepu w WooCommerce?
  5. Jak dodać produkty partnerskie Amazon do WooCommerce?
  6. Jak przesłać obraz na stronę produktu w WooCommerce?
  7. Jak usunąć nieskategoryzowaną kategorię w WordPress WooCommerce
  8. WooCommerce Utwórz niestandardową stronę pojedynczego produktu
  9. Jak dodać formularz kontaktowy za pomocą wtyczek Elementor i formularz kontaktowy?
  10. Jak przeprowadzić migrację z Shopify do WooCommerce
  11. Jak dostosować strony produktów WooCommerce za pomocą Elementor Pro
  12. Jak zintegrować MailChimp z WooCommerce?
  13. Jak zalogować się do administratora WooCommerce
  14. Jak dodać niestandardowe pola produktów WooCommerce
  15. Jak eksportować produkty w WooCommerce
  16. Jak ukryć kategorię na stronie sklepu WooCommerce
  17. Jak wykonać kopię zapasową bazy danych WooCommerce
  18. Jak uzyskać nazwę marki produktu w WooCommerce?