Remi's blog

Display WooCommerce Product Variations Dropdown on the Shop Page

—

by

Remi
in

Riaan, my fellow colleague at Automattic asked me if I had a snippet to display the variations dropdown select on the shop page for variable products so that customers can shop variable product directly from an archive page without having to visit the product page… and I didn’t have such a snippet. So I built it! (that was a long sentence right?)

The idea here is pretty simple, when you visit the shop page, or an archive page, the code checks the product type and if it’s equal to variable, the “Select Options” button is replaced by the regular add to cart button for variable products. In other words, it displays the dropdown selects for the product attributes and the add to cart button on the shop page for all variable products.

woocommerce-dropdowns-selects-on-archive-page

If you want to use this snippet, simply copy and place it in the functions.php file in your theme folder!

, ,

19 responses to “Display WooCommerce Product Variations Dropdown on the Shop Page”

  1. mgason

    Hi,
    I added the code. I am using Storefront theme from woocommerce. I get a selector and quantity field etc but none of my selectors actually contain the variations. Any ideas?

    1. mgason

      in reference to my previous comment http://woocommerce-25337-54108-142519.cloudwaysapps.com/product-category/100-wool-felt/oranges

  2. prabhjas

    Hello Remi,
    I copied full code but it’s breaking the full website and website is also not opening.
    Could you please help me out for the same.
    Thanks.

    1. Remi

      what error message do you have?

      1. bizinbang

        Hello Remi,
        It is giving the following error:
        Fatal error: Can’t use method return value in write context in functions.php on line 17

        Thanks,
        Sam

  3. javied

    Hello Remi,

    I tried your code.. but its showing me blank page.

    I have a question,
    Is it possible to show the varitions dropdown based on product id .If yes how can I achieve that.

    Thanks

  4. javied

    Hello Remi,

    I have created a custom shortcode to show products based on id with an image, description,price and add to cart url which send the product directly to cart. Now I have created a varibale product, and added its id in my shortcode. Would you gudie me how can i show the variation options dropdown for that product and add to cart url which can send this product direcly to cart with all the variations seclected.
    However I tried your code. And it breaks my website, simply a blank page is coming below header.

    This is the my custom shortcode:-
    function ayu_magazine_subscription_woo_products_shortcode ( $atts ) {
    global $post; $thePostID = $post->ID;

    $atts[ ‘ids’ ] = explode( “,”, $atts[ ‘ids’ ] );
    extract ( shortcode_atts (array (
    ‘ids’ => $atts[ ‘ids’ ]
    ), $atts ) );
    ///////$atts[ ‘parent’ ] = explode( “,” $atts[ ‘parent’ ] );
    ///////extract( $atts );

    $output.=”;
    $output.=’

    ‘;

    foreach($atts[‘ids’] as $productId)

    {
    // print_r($productId);
    $product = wc_get_product( $productId );

    if($productId==”5207″)
    {
    $title_head=”Digital”;
    }elseif($productId==”5208″)
    {
    $title_head=”Print”;
    } elseif($productId==”5206″)
    {
    $title_head=”Combo”;
    }
    else{
    $title_head=$product->get_title();
    }

    $output.=”;
    $output.=”.$title_head.”;
    $output.=”;
    /*$output.=’

    ‘. $product->get_image($size = “full”).’
    ‘;*/
    $output.=’‘. $product->get_image($size = “full”).’‘;
    $post_content = get_post($productId);
    $content = $post_content->post_content;
    $output.=”.apply_filters(‘the_content’,$content).”;
    $output.=”;
    $output.=”.$product->get_price_html().”;
    $output.=”;

    $output.=”;
    $output.=”;

    $output.= ‘Subscribe‘;
    $output.=”;

    $output.=”;

    }

    $output.=”;

    return $output;

    }
    add_shortcode(‘magazine_subscription_products’, ‘ayu_magazine_subscription_woo_products_shortcode’);

    Guide me how can i show variations options also through this code.

    Thanks

  5. anu.hipnotyka

    Hi Remi, The options are not working for me.

  6. anu.hipnotyka

    If this is not working for you go to this link:
    https://gist.github.com/corsonr/37e5430896df10252b0e03c60f00d6a3

    Read user ‘lexzz’ comment.

    Working for me now.

  7. eni

    Hello Remi! Thanks for your hard work.I used your code and the result is that i get a drop-down phrase “choose” only and on the left a small text “brand” but i have weight as variable,the button add to cart or select options is missing also.Any idea would be helpful.Below is a pic of my site.Thank you!

    https://postimg.org/image/a48x8saaf/

  8. jeroen365

    He Remi! Thank you for this plugin. I have a small question though. I’ve added the php and i get the following error in my archive page

    Warning: in_array() expects parameter 2 to be array, object given in /home/p5343/domains/onshus.nl/public_html/wp-content/plugins/woocommerce/includes/wc-template-functions.php on line 2213

    On line 2213 the product therms get read, but apperantly as objects instead of arrays. Would you know what is up? Would be of great help thanks!!

    1. jeroen365

      He Remi! Thank you for this plugin. I have a small question though. I’ve added the php and i get the following error in my archive page

      Warning: in_array() expects parameter 2 to be array, object given in /wp-content/plugins/woocommerce/includes/wc-template-functions.php on line 2213

      On line 2213 the product therms get read, but apperantly as objects instead of arrays. Would you know what is up? Would be of great help thanks!!

  9. IamAnujSharma

    Please help me,
    Is it possible to get price tag in a div on selecting value from the variation dropdown on product page? Like, What happens in single product page.
    Thank You.

  10. riverbank

    Remi,
    Latest Version of WP and AVADA THEME. Site is not yet live but still in development. I want to display all variations just like simple products so found your coding above.

    I embedded your coding above (Display variations dropdowns on shop page for variable products). I placed that code inside my child theme functions.php file.

    Now each of my hundreds of product variations are attempting to load, but the resulting error shows as follows:

    Warning: in_array() expects parameter 2 to be array, object given in /home/southsid/public_html/wp-content/plugins/woocommerce/includes/wc-template-functions.php on line 2247

    Next, I went to the applicable wc-template-functions.php file and here is line 2247 shown below:

    if ( in_array( $term->slug, $options ) ) {
    $html .= ‘slug ) . ‘” ‘ . selected( sanitize_title( $args[‘selected’] ), $term->slug, false ) . ‘>’ . esc_html( apply_filters( ‘woocommerce_variation_option_name’, $term->name ) ) . ”;
    }
    }

    Can you determine how to proceed to get your variations displaying?

    1. riverbank

      By the way, the Warning shown above is replicated hundreds of times across three columns, one code block in the place for each variation hundreds of times down the page.

  11. riverbank

    Is it possible two attributes causes the Warning? I am using size and color in each variation?

  12. barn2media

    Hi Remi, that’s really helpful thanks. Anyone less technical who is reading this might also like my tutorial on how to add variation dropdowns to the WooCommerce shop page without having to change any code – barn2.co.uk/woocommerce-variations-dropdown-plugin. It would be great if you could add this to your article as a resource! Thanks

  13. JapeNZ

    Hi Remi,
    Is it possible to have the product image update so it displays the selected variation image from the dropdown?
    Thanks for your help!
    Kind regards,
    JP

  14. n3000

    Hello Remi,

    Great content by the way, keep up the great work!

    I’m currently using a plugin called “WooCommerce Ajax Mini Cart” for a ecommerce site that selling digital downloads. I would like to add a drop down field to show product variables in the cart area of the sidebar. Currently it’s only showing the quantity amount.

    Is there a way of implementing your code into this plugin? If so which part as I’m not much of a coder.

    Thank you in advance!

Leave a Reply