How can we improve WooCommerce?

Product variations on category/product list page with add-to-cart

Hello,
I have setup a restaurant menu (online food ordering) site on with wordpress+woocommerce+grid/list plugin. This is a restaurant site for many food items with half and full plate with different price. I have created product variations in admin half/full for such food items with their prices respectively. But these products are showing 'select options' button on category pages which take it to product detail page. I want to display product variation dropdown on category/product-list page itself so that customer can select and add the food half/full plate to cart without going to product detail page. The selected variation can reflect the price for easier user understanding. I tried a lot and also spent many hours on net for its proper solution but no good findings. I think woocommerce should be compatible for such kind of functionality with little customization.
Please help me in this, if its possible.

If its not possible with woocommerce, alternatively it will be also okay to open a popup on clicking 'select options' button on product-list page, showing variations in that popup window with variations dropdown and their price with add to cart button that can add products to cart without going to product detail page.

The overall thing needed I think is to get the product object on product list page for each items in loop along with their variations and prices with add-to-cart and proper links. But dont know what and how to write where to obtain this in full result. Hope someone help with little help idea and code.

This thread was post 2 months ago on its wp support forum see here: http://wordpress.org/support/topic/woocommerce-product-variations-on-categoryproduct-list-page-with-add-to-cart

It was suggested that this will be possible with woocommerce 2.0 but still no good solution found for it.

37 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    ShashankShashank shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    19 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • KristenKristen commented  ·   ·  Flag as inappropriate

        Why is this idea marked "Completed"? Adding a quick-view lightbox is not a solution.

        We need a feature to allow the drop-down menu for a product with variations to appear directly on the Shop/catalog page. As it is now, the page displays a button marked "Select options" instead. The customers have to click on that button, get sent to the individual product page, choose which variation they want, and then click Add to Cart. This is a big pain in the you-know-what for customers. It slows down the whole purchasing process and greatly increases the chance a customer will change his/her mind and not bother ordering anything.

      • JanekJanek commented  ·   ·  Flag as inappropriate

        Gino, thank you for your solution. Any ideas how to make variations dropdown to appear as checkboxes?

      • Anonymous commented  ·   ·  Flag as inappropriate

        @Gino Whitaker you are a genius! That works fantastically well and just saved my day (as well as $18.) Much appreciated!!!

      • Gino WhitakerGino Whitaker commented  ·   ·  Flag as inappropriate

        I have a solution for this, in case anyone is still interested.

        It's fairly simple. Open templates/content-product.php and replace

        <?php
        /**
        * woocommerce_after_shop_loop_item_title hook
        *
        * @hooked woocommerce_template_loop_rating - 5
        * @hooked woocommerce_template_loop_price - 10
        */
        do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>

        </a>

        <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

        with this:

        <?php
        /**
        * ADD PRODUCT VARIABLE WITH ADD TO CART ON CATALOG PAGE
        ADDED BY GW
        **/
        ?>

        <div class="catbox">

        <?php
        //ADD SHORT DESCRIPTION TO PRODUCT
        add_action('woocommerce_after_shop_loop_item_title','woocommerce_template_single_excerpt', 5); ?>
        <?php
        /**
        * woocommerce_after_shop_loop_item_title hook
        *
        * @hooked woocommerce_template_loop_rating - 5
        * @hooked woocommerce_template_loop_price - 10
        */
        do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>

        <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

        <?php
        //ADD VARIATIONS BEFORE ADD TO CART

        if($product->product_type == "variable"){
        woocommerce_variable_add_to_cart();
        } else {
        woocommerce_template_loop_add_to_cart();
        }

        ?>

        </div>

        This puts a description and the product variables with the add to cart button. If you don't want the description, then omit the part that is commented "Add short description to product".

      • ChrisChris commented  ·   ·  Flag as inappropriate

        Has anyone heard back from Woocommerce on this issue. I really need this feature.

        Streamlining the buying experience should be a major concern for any ecommerce developper/company. I was amazed that this feature wasn't already in.

      • Anonymous commented  ·   ·  Flag as inappropriate

        I really want this feature for my customers as well.
        I'ts a rather common request in my opponion.
        Thanks for your plugin anyhow.

      • DarthJayDarthJay commented  ·   ·  Flag as inappropriate

        I found that if you go into "plugins\woocommerce\classes\class-wc-shortcodes.php" and change line 545 from:

        <?php woocommerce_template_loop_add_to_cart(); ?>

        to:

        <?php
        if($product->product_type == "variable"){
        woocommerce_variable_add_to_cart();
        } else {
        woocommerce_template_loop_add_to_cart();
        }
        ?>

        That I can get it to display my variables dropdown on my page when I use the add_to_cart shortcode. Now I know it's bad practice to edit plugin files. Maybe somebody more experienced than me with Wordpress hooks can turn this into a viable plugin...

      • KristinKristin commented  ·   ·  Flag as inappropriate

        I agree with Shashank, most of us are trying to avoid the lightbox or redirect to another location and add directly from the list view using product variations. Please re-look into this as a possibility for future plugin enhancement.

      • ShashankShashank commented  ·   ·  Flag as inappropriate

        It seems great that my idea has got so many votes and its considered to have a final implementation. Expected to see such plugin as free but its okay for now if its paid. Thanks to woocommerce developers.
        The quick view popup seems so nice and can handle the requirement, but it would also be great to have variation adding to cart functionality without popup also (directly in-page), as described in my idea for a restaurant menu site for example.
        Overall, its wonderful for now and thanks again!

      • ShashankShashank commented  ·   ·  Flag as inappropriate

        Hi I have not found proper solution to make it work till now, but got a link
        http://www.cmsites.dk/woocommerce-add-to-cart-with-variable-products-archive-page/ , it helps to through some light on this. But it work without ajax (page reload on adding each product with variation to cart) as per description and comments mentioned there.
        I do not have time to research on this right now but hope someone test and try to make it work with ajax. Please let me know if someone implemented better.

        Also requested other users to arrange some vote on this for the feature to be implemented in woocommerce itself, as 2.0.8 version released for this plugin but no consideration and implementation for this till now by woo-guys.

        --
        Thanks

      • AbdusAbdus commented  ·   ·  Flag as inappropriate

        I also need this. I am a WordPress theme designer and most of my clients want to have popup or dropdown instead of the 'select options' button.

      • ShashankShashank commented  ·   ·  Flag as inappropriate

        Is it possible with Woocommerce 2.0.4 which released now?
        "Product variations on category/product list page with add-to-cart, so that customers can add a product to cart with the selected variation/price without going to product detail page".

        I also seen its changelog and checked this feature not available directly. But as per its changelog, product classes rewritten, some work done for variations, get_product()function, etc. I hope by some customization I could achieve the thing I require, since woocommerce is completely overhauled and many features and code standards added.
        Can someone help with little code and idea for how could I achieve this? A little help in the right direction will help me and others to make this.
        (Please read my first post to get the alternative flow, I need help to achieve any of it).
        I am in urgent need of this waiting for months, and is a so important feature that can be used in so many sites, beneficial for developers and ecommerce users.
        I also expect some response from plugin authors.

        Thanks.

      Feedback and Knowledge Base