Muestra el selector de productos variables en la página de tienda

Snippet con el que podrás mostrar los atributos de los productos variables en la página de tienda para que el cliente pueda elegir entre las diferentes opciones y añadir al carro sin necesidad de entrar en el producto.

IMPORTANTE: Asegúrate de no tener marcada la opción “Visible en la página de productos” en cada uno de sus atributos.

Snippet que muestra el selector de productos variables en la página de tienda en WooCommerce

// Muestra el selector de productos variables en la página de tienda.
if ( in_array( 'woocommerce/woocommerce.php', get_option( 'active_plugins' ) ) && version_compare( WC()->version , '3.0.0', '>' ) ){

	add_filter( 'woocommerce_loop_add_to_cart_link', 'show_variation_dropdown_on_shop_page', 1, 1 );
	function show_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->get_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_attributes() as $attribute_name => $options ) : ?>
								<?php if ( $options->get_variation() ) : ?>
									<?php $options_data = $options->get_data(); ?>
									<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_data, '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 endif; ?>
							<?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->get_id() ),
					esc_attr( $product->get_sku() ),
					esc_attr( isset( $class ) ? $class : 'button' ),
					esc_html( $product->add_to_cart_text() )
				);
		
		}
		 
	}
}