WooCommerce: multiple input field for multiple product variations

Question

I'm trying to customize the default Woocommerce theme to my needs.

I have a product that comes in two variations: it's wine, so variation A is a 6 bottle pack, and variation B is a 12 bottle wooden case.

I'd like to have a double input text field next to the product that will let me add them to the shopping cart.

Something like what you can see in this image (don't mind the numbers, they are just random in the design ;) ):

Right now I've managed to have only 1 single text field that let me add only 1 variation, OR a button that sends me to the product detail page with a dropdown that let me select one of the two variations.

But I'd like to do it directly on the catalogue (archive) page, and not with a dropdown menu, but with 2 different input fields.

Can you help me with that? It seems that customizing Woocommerce is not that easy... :(

Right now I'm trying to edit content-product.php, I've commented out some "default" woocommerce action to customize it with my code. This is my actual content-product.php but it only shows one single input field for just one variation of the product.

<?php
/**
 * The template for displaying product content within loops.
 *
 * Override this template by copying it to yourtheme/woocommerce/content-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

global $product, $woocommerce_loop;

// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

// Ensure visibilty
if ( ! $product->is_visible() )
    return;

// Increase loop count
$woocommerce_loop['loop']++;
?>
<li class="product-catalog <?php
    if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0 )
        echo 'last';
    elseif ( ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] == 0 )
        echo 'first';
    ?>">

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



        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            //do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
        <?php echo get_the_post_thumbnail( $post->ID, 'shop_catalog'  ) ?>
        <h3 class="section-title"><?php the_title(); ?></h3>
        <?php the_excerpt(); 
        echo '<div class="more-link-container"><a href="'.get_permalink($loop->post->ID).'" title="More details" class="read-more-link">More Details</a>  <span class="link-arrow">&raquo;</span></div>'
        ?>
        <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
            <?php woocommerce_quantity_input(); ?>

            <p>(Six bottle minimum, price is based<br />on a per bottle cost of $15.95)</p>

            <button type="submit" class="button alt">Add to chart</button> <a href="<?php echo $woocommerce->cart->get_cart_url(); ?>" class="button-link">Checkout</a>

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



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

</li>

Answer 1

Just an FYI to other people who found this: I was able to achieve this using Grouped products instead of Variants. Simply add the main product (the Wine, in this case) as a 'Grouped Product'. Then, add the 2 case sizes as simple product, and in the 'Advanced' tab, choose the Grouped product from the 'Grouping' dropdown.

I ended up with a page that looks like this.

Hope this is helpful to somebody.

Answer 2

If you're following the recommended process for customizing WooCommerce you should have copied all of the WooCommerce files that you need to modify in to your theme folder. Just in case you don't have it here's a link to the documentation.

From my experience with WooCommerce I'd suggest looking at the file ../woocommerce/single-product/add-to-cart/variable.php, after you've copied it to your theme of course.

This is the file that generates the 'add to cart' form for variable products, both on the single product page and the category page.

Keep in mind that the form is AJAX driven and you may also have to look at the associated jQuery code to meet your goals.

I've actually done this before but can't remember where/which client. I'll try to find the snippet of code and post it, but no promises on when. Afraid I'm swamped for the next few days.