2 Ways to Show Variations on the Shop Page in WooCommerce

Iconic > Blog > Tutorials > 2 Ways to Show Variations on the Shop Page in WooCommerce

17 Shares

If you run a WooCommerce store, then you know how important it is to guide your users through to the checkout with as little friction as possible.

There’s been a number of studies which indicate that fewer clicks on your store mean higher conversions. As such, it makes sense to consider showing your WooCommerce product variations on the shop page; this includes the category pages, filtered pages, and search results. This means your customers won’t have to navigate through to the single product page to select their product options, or to see if the product they require is even available.

In this post, I’ll outline 2 methods to make your product variations accessible directly on the product listing pages; adding a snippet so users can select variable product options right on the shop page, and using a plugin to list variations in your shop as though they were “simple” products.

Method 1: Snippet to Show Variable Product Options on the Shop Page

This snippet will add the variable product attribute dropdowns into the WooCommerce shop pages, allowing us to add a variable product to cart without visiting the single product page. The result can be seen below.

The Code

The code we need to add to achieve the above functionality is actually quite simple. I suggest adding it to your child theme, creating a feature plugin, or using the Code Snippets plugin.

First of all, we want to remove the current add to cart buttons in the loop and replace them with our own.

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

/**

* Replace add to cart button in the loop.

function iconic_change_loop_add_to_cart() {

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );

}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

Here we’ve removed the woocommerce_template_loop_add_to_cart function. This will remove the add to cart button for all products, but don’t worry, we’re going to add it back in with our own iconic_template_loop_add_to_cart function.

/**
 * Use single add to cart button for variable products.
 */
function iconic_template_loop_add_to_cart() {
	global $product;

	if ( ! $product->is_type( 'variable' ) ) {
		woocommerce_template_loop_add_to_cart();
		return;
	}

	remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
	add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

	woocommerce_template_single_add_to_cart();
}

/**

* Use single add to cart button for variable products.

function iconic_template_loop_add_to_cart() {

global $product;

if ( ! $product->is_type( 'variable' ) ) {

woocommerce_template_loop_add_to_cart();

return;

}

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

woocommerce_template_single_add_to_cart();

}

This function checks to see if the product is variable. If it isn’t, then we just load the normal add to cart button using the woocommerce_template_loop_add_to_cart() function.

If the product is variable, we proceed to the next stage. Here I have removed the actual button from the add to cart template and replaced it with my own. All that will remain is the attribute select fields. This is so I can simplify it a bit and remove the quantity selector.

/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
function iconic_loop_variation_add_to_cart_button() {
	global $product;

	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

/**

* Customise variable add to cart button for loop.

* Remove qty selector and simplify.

function iconic_loop_variation_add_to_cart_button() {

global $product;

<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

</div>

<?php

}

This is our simplified add to cart button for loop based variable products.

The full block of code then looks like this:

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

/**
 * Use single add to cart button for variable products.
 */
function iconic_template_loop_add_to_cart() {
	global $product;

	if ( ! $product->is_type( 'variable' ) ) {
		woocommerce_template_loop_add_to_cart();
		return;
	}

	remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
	add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

	woocommerce_template_single_add_to_cart();
}

/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
function iconic_loop_variation_add_to_cart_button() {
	global $product;

	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

/**

* Replace add to cart button in the loop.

function iconic_change_loop_add_to_cart() {

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );

}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

/**

* Use single add to cart button for variable products.

function iconic_template_loop_add_to_cart() {

global $product;

if ( ! $product->is_type( 'variable' ) ) {

woocommerce_template_loop_add_to_cart();

return;

}

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

woocommerce_template_single_add_to_cart();

}

/**

* Customise variable add to cart button for loop.

* Remove qty selector and simplify.

function iconic_loop_variation_add_to_cart_button() {

global $product;

<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

</div>

<?php

}

If you’ve got this far, you may notice that the styling isn’t the prettiest. I imagine most using this technique will implement their own styling, but if you’re not sure what to do, then you can use this CSS to achieve the look in my previous screenshot. The results may vary depending on your theme.

.products .variations {
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 50px;
}

.products .variations td {
    display: block;
    padding: 10px 20px 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.products .variations td:first-child {
    padding-bottom: 0;
    border: none;
}

.products .variations td:last-child {
    padding-top: 5px;
}

.products .variations tr:last-child td {
    border: none;
}

.products .variations td label {
    font-weight: 600;
}

.products .variations td select {
    width: 100%;
}

.products .variations .reset_variations {
    margin: 10px 0 0;
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
}

.products .variations {

border: 1px solid #eee;

position: relative;

margin-bottom: 50px;

}

.products .variations td {

display: block;

padding: 10px 20px 18px;

text-align: center;

border-bottom: 1px solid #eee;

}

.products .variations td:first-child {

padding-bottom: 0;

border: none;

}

.products .variations td:last-child {

padding-top: 5px;

}

.products .variations tr:last-child td {

border: none;

}

.products .variations td label {

font-weight: 600;

}

.products .variations td select {

width: 100%;

}

.products .variations .reset_variations {

margin: 10px 0 0;

position: absolute;

bottom: -35px;

left: 0;

right: 0;

}

Most modern themes have an Additional CSS tab in the customizer ( Appearance > Customize ).

Pros/Cons of This Method

Pros	Cons
Makes it easier to quickly add variable products to the cart.	Doesn’t give an immediate idea of what product options are available.
	Can adversely affect the layout of your shop page.

Method 2: WooCommerce Show Single Variations Plugin

WooCommerce Show Single Variations is an Iconic plugin which allows you to show variations in your WooCommerce shop page, category pages, search and filter results pages. The variations are displayed as though they were “simple” products, but link through to the parent variable product page with the options pre-selected. The screenshot below demonstrates this. Variations have been labeled with a “Variation” banner.

View Demo

Buy now

Install and Configure WooCommerce Show Single Variations

Once you’ve bought the plugin, setting it up is pretty straightforward.

First, you want to upload and activate the plugin. Go to Plugins > Add New > Upload Plugin. Choose the zip file you downloaded, upload, and then click Activate. Once activated, you’ll need to enter your licence key.

After the plugin is installed and activated, you’ll be presented with the general settings page. On this page, there’s a Process Product Visibility button. It’s worth running this now as it will go through all of your products and variations and set their default visibility settings. By default, all variations are hidden until you enable them.

Now it’s time to start enabling product variations to show on the shop pages. Navigate to Products and then choose one of your variable products to edit.

Click the Variations tab and then select a variation that you want to enable.

Here you’ll see a number of new options. You can enable this variation to appear in the search results, filtered results, and the catalog (shop/category/shortcodes). You can also set the variation to “Featured”; this will then show up in featured product queries. The final option allows you to disable the “Add to Cart” button. This will change the “Add to Cart” button to a “Select Options” button; useful for pre-selecting one attribute like “Color” but having your customers choose the other attribute on the single product page.

There’s also a custom Title field which will show alongside the product on your shop pages.

Simply save the variations and you’ll now see them appear throughout your store, based on your settings.

Pros/Cons of This Method

Pros	Cons
Makes it easier to quickly add variable products to the cart.	Can increase the appearance of your product collection (could be pro or con).
No negative SEO impact as the variable product pages use a canonical link.
Accurate filter and search results.
Shows relevant product image for the variation.
Flexibility; choose which product variations to show and where.

Conclusion

Both of these methods are viable solutions for showing your product variations in your WooCommerce shop pages. However, when using the WooCommerce Show Single Variations plugin you can offer your customers more accurate shopping results without affecting the layout and design of your theme.

Have you got any other methods of achieving this? Is there anything you’d like to see which hasn’t been covered here? Let me know in the comments!

17 Shares