Cómo mostrar el menú desplegable de variaciones del menú desplegable en la página de la tienda WooCommerce

Publicado: 2021-07-19

WooCommerce Mostrar menú desplegable de variaciones desplegable en la página de la tienda ¿Está buscando una forma de mostrar las variaciones desplegables en la página de la tienda de WooCommerce? En esta publicación, compartiremos una solución simple para usted. Sin embargo, usaremos un código personalizado, y esto significa que necesita tener algo de experiencia en codificación para implementar esta solución.

La mayoría de las tiendas de comercio electrónico tienen muchas variaciones en los productos. Los clientes deben hacer clic en las páginas de un solo producto para ver las variaciones.

Si muestra las variaciones del producto en la página de la tienda, hará que las variaciones sean más atractivas para los clientes. Además, esto te permitirá ampliar tu producto en tan solo unos clics.

WooCommerce Mostrar menú desplegable de variaciones desplegable en la página de la tienda

Al final de esta guía, podrá mostrar variaciones desplegables mediante programación en la página de la tienda. Sin embargo, es importante tener en cuenta que primero debe crear una variación del producto en la página de su producto.

Antes de continuar, también debe instalar o crear un tema secundario. Esto asegurará que sus cambios no se pierdan durante una actualización. Además, debe hacer una copia de seguridad de su cuenta para poder volver a la versión anterior si comete un error.

Entremos directamente en ello.

Pasos para mostrar el menú desplegable de variaciones en la página de la tienda

Estos son los sencillos pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para mostrar variaciones desplegables en la página de la tienda.
Agregue el siguiente código al archivo 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() )
		);
		}
	 }

Este es el resultado:

Terminando

A estas alturas, debería poder mostrar las variaciones desplegables en la página de la tienda. Sin embargo, si no está familiarizado con la codificación, le recomendamos que utilice un complemento como YITH WooCommerce Color and Label Variations (versión premium) o WooCommerce Variation Master (versión premium).

Si necesita un trabajo personalizado adicional en la página de la tienda, no dude en contactarnos. Esperamos que este post te haya ayudado a encontrar una solución a tu problema.

Cómo mostrar el menú desplegable de variaciones del menú desplegable en la página de la tienda WooCommerce

WooCommerce Mostrar menú desplegable de variaciones desplegable en la página de la tienda

Pasos para mostrar el menú desplegable de variaciones en la página de la tienda

Terminando

Artículos similares