So zeigen Sie Dropdown-Variationen Dropdown auf der Shop-Seite WooCommerce an

Veröffentlicht: 2021-07-19

WooCommerce Dropdown-Variationen-Dropdown auf der Shop-Seite anzeigen Suchen Sie nach einer Möglichkeit, die Dropdown-Varianten auf der WooCommerce-Shopseite anzuzeigen? In diesem Beitrag stellen wir Ihnen eine einfache Lösung vor. Wir werden jedoch einen benutzerdefinierten Code verwenden, und das bedeutet, dass Sie etwas Programmiererfahrung haben müssen, um diese Lösung zu implementieren.

Die meisten E-Commerce-Shops haben viele Produktvariationen. Kunden müssen sich zu den einzelnen Produktseiten durchklicken, um die Variationen zu sehen.

Wenn Sie die Produktvariationen auf der Shop-Seite anzeigen, werden die Variationen für Kunden fesselnder. Außerdem können Sie so Ihr Produkt mit nur wenigen Klicks vergrößern.

WooCommerce Dropdown-Variationen-Dropdown auf der Shop-Seite anzeigen

Am Ende dieses Leitfadens werden Sie in der Lage sein, Dropdown-Variationen programmgesteuert auf der Shop-Seite anzuzeigen. Beachten Sie jedoch, dass Sie zuerst eine Produktvariation auf Ihrer Produktseite erstellen müssen.

Bevor Sie fortfahren, sollten Sie auch ein untergeordnetes Thema installieren oder erstellen. Dadurch wird sichergestellt, dass Ihre Änderungen bei einem Update nicht verloren gehen. Außerdem müssen Sie Ihr Konto sichern, damit Sie bei einem Fehler zur vorherigen Version zurückkehren können.

Lassen Sie uns direkt darauf eingehen.

Schritte zum Anzeigen von Dropdown-Variationen Dropdown auf der Shop-Seite

Hier sind die einfachen Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Suchen Sie nach dem Öffnen der Theme-Editor-Seite nach der Theme-Funktionsdatei, um die Funktion zum Anzeigen von Dropdown-Variationen auf der Shop-Seite hinzuzufügen.
Fügen Sie der PHP -Datei den folgenden Code hinzu:

// 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() )
		);
		}
	 }

Das ist das Ergebnis:

Einpacken

Inzwischen sollten Sie die Dropdown-Varianten auf der Shop-Seite anzeigen können. Wenn Sie jedoch nicht mit Codierung vertraut sind, empfehlen wir die Verwendung eines Plugins wie YITH WooCommerce Color and Label Variations (Premium Version) oder WooCommerce Variation Master (Premium Version).

Wenn Sie zusätzliche kundenspezifische Arbeiten auf der Shop-Seite benötigen, können Sie sich gerne an uns wenden. Wir hoffen, dass dieser Beitrag Ihnen geholfen hat, eine Lösung für Ihr Problem zu finden.

So zeigen Sie Dropdown-Variationen Dropdown auf der Shop-Seite WooCommerce an

WooCommerce Dropdown-Variationen-Dropdown auf der Shop-Seite anzeigen

Schritte zum Anzeigen von Dropdown-Variationen Dropdown auf der Shop-Seite

Einpacken

Ähnliche Artikel