Display WooCommerce Product Variations

Do you want to display product variations on your shop page?

In this article, We’ll display WooCommerce product variations in dropdown programmatically and using the WooCommerce product variations plugin.

As an eCommerce store owner, you likely have plenty of variations in products. But, your customers need to click on through to single product pages before they’ll even see them.

By displaying product variations on the shop page, you’ll have the ability to make variations more captivating to customers and enlarge your product in just some clicks. In this article, I am going to show you, how to display WooCommerce Product Variations Dropdown On The Shop Page.

WooCoomerce default only shows the product variations dropdown on the only single product page. But, if your customers need to add select product variation options to your shop page, product category pages.

You’ll learn how to display the WooCommerce product variation select it as a dropdown to your shop page. The product variations dropdown on the shop page will help to boost your store sell. In this guide, We will show you, how to display it programmatically and how to display it using plugins.

keep in mind, To display WooCommerce product variation, first, you need to create a product variation on your product page. You can create a product variation from this location’s admin dashboard –WooCommerce – Products – add New – select variable product – create Attributes – add Variations.

However, let’s get started, first, we would like to apply the programmatic technique, to display WooCommerce product variations dropdown on the shop page. Add the following code snippet to the functions.php file in your child theme.

or you can create a plugin for this, learn more here, about how to develop a WordPress custom plugin.

Copy to Clipboard

<?php
// Display variations dropdowns on shop page for variable products
 add_filter( 'woocommerce_loop_add_to_cart_link', 'woo_display_variation_dropdown_on_shop_page' );
 
 function woo_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() )
		);
	
	}
	 
}

After adding the code, Save the file and refresh your shop page, or please see the following attached.

This code snippet working perfectly for the current WooCommerce version. So, if you facing any problems, please check github.com supports.

Display WooCommerce Product Variations Dropdown On The Shop Page

Display WooCommerce Product Variations Using Plugin

We hope, this code snippet works perfectly to display WooCommerce product variations on the shop page.

So, in this section, We are going to show you, a couple of WooCommerce product variations plugins free and premium versions. You can use these plugins for your eCommerce store.

Let’s check these plugins,

Display product variations dropdown on shop page

This plugin will be displayed the product variations dropdown on the shop page and the website category page. So, if you want to display WooCommerce product variations on the shop page and category page, you can use this plugin. Just instill and active this plugin.

This plugin setting is very simple, just go to the plugin options and enable/disable the dropdown on the shop page and category page.

YITH WooCommerce Color and Label Variations (Premium Version)

This WooCommerce product variation plugin is very beautiful. You can add good-looking and colorfully WooCommerce product variation options to your product page instead of the dropdown select options. This plugin developed by YITH teams.

WooCommerce Variation Master (Premium Version)

This plugin is marvelous! You can change the image, color, text, using this plugin. You can display WooCommerce product variations for different products on your eCommerce store.
Plugin Key Features:

1. Hide Add to cart quantity button on the shop page and category page
2. Swatches with images/ colors, and text
3. Variation Gallery
4. Bulk importer
5. Display WooCommerce product variation swatches on the Shop page, Archive, Categories Pages
6. and much more

Product Variations Table for WooCommerce(Premium Version)

This plugin the WooCommerce official plugin. You can display all the different product variations tables using this plugin. This plugin allows users to search products by size, color, style. Also, your customers can extract product variations in CSV format, Excel, PDF, or print format.

Additional Variation Images Gallery for WooCommerce

The Additional Variation Images Gallery for WooCommerce is a genius plugin that permits the addition of separate image galleries for each of the product variants of a variable product. This plugin allows to inserting of multiple images as per variation. This plugin displays extra images per product variation. This plugin allows displaying YouTube, HTML Videos per Product Variation.

Woo Variations Table

Wrap Up

Display WooCommerce Product Variations that can help you convince your customers to purchase your products. Here mentioned all these plugins have their own special uses. So, you can choose the best way for your eCommerce store.

We hope this article will help to find the best display WooCommerce product variations plugins. We introduced free and premium plugins and how to Display WooCommerce Product Variations in dropdown programmatically.

If you have any questions about one of these display WooCommerce product variations plugins. Please, let us know in the comments.

Our Services

WordPress Website Development Services

If you want to create a WordPress website or eCommerce website, kindly visit our service.

Responsive WordPress Website
eCommerce Website With WooCommerce
WordPress Speed Optimization
WordPress Website Security
WordPress SEO

Please Visit: WordPress Website Development Services

Our Services

Display WooCommerce Product Variations Dropdown On The Shop Page