WooCommerce Show Dropdown Variations Dropdown On Shop Page

Are you looking for a way to display the dropdown variations on the WooCommerce shop page? In this post, we will share a simple solution for you. However, we will be using a custom code, and this means that you need to have some coding experience to implement this solution.

Table of Contents

Most eCommerce stores have plenty of variations in products. Customers need to click on through to single product pages to see the variations.

If you display the product variations on the shop page, it will make the variations more captivating to customers. In addition, this will allow you to enlarge your product in just some clicks.

WooCommerce Show Dropdown Variations Dropdown On Shop Page

By the end of this guide, you will be able to display dropdown variations programmatically on the shop page. However, it is important to keep in mind that you need to create a product variation on your product page first.

Before you proceed, you should also install or create a child theme. This will ensure that your changes are not lost during an update. In addition, you need to back up your account so that you can revert to the previous version if you make a mistake.

Let us get right into it.

Steps to Show Dropdown Variations Dropdown On Shop Page

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to display dropdown variations on the shop page.
Add the following code to the php file:

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

[/php]

This is the outcome:

Wrapping Up

By now, you should be able to display the dropdown variations on the shop page. However, if you are not familiar with coding, we recommend using a plugin like YITH WooCommerce Color and Label Variations (Premium Version) or WooCommerce Variation Master (Premium Version).

If you need additional custom work on the shop page, feel free to contact us. We hope that this post helped you find a solution to your problem.

Editorial Staff

How to Show Dropdown Variations Dropdown On Shop Page WooCommerce

WooCommerce Show Dropdown Variations Dropdown On Shop Page

Steps to Show Dropdown Variations Dropdown On Shop Page

Wrapping Up

Similar Articles

Related