Sign up ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 ;) ):

double input field

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.

 * 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() )

// Increase loop count
<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' ); ?>

             * 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>

             * 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' ); ?>

share|improve this question
Code examples of what you've tried so far would be helpful, along with a description of how you're going about this. (i.e. modified x file, added to my theme functions) –  Stephen Jan 24 '13 at 14:13
thank. you're right! i've added the code I'm working on! ;) –  Stefano Jan 24 '13 at 14:31

2 Answers 2

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.

share|improve this answer
smart! :) let me try! –  Stefano Jan 31 '13 at 8:56
Hi David, what you if all your products are of the same type -- meaning they should all be assigned with the same variations? Say, I have another product called Beer and it should contain both "six bottles" and "case" variations, any idea how to achieve that? Right now the only way I can think of is duplicate the variations and assign them to Beer grouped product which doesn't make sense because you could end up with hundreds of duplicate simple(in this case, variation) products. –  jilseego Mar 22 '13 at 7:13

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.

share|improve this answer
Yup, I have all the files copied in my theme folder ;) And thanks a lot, I will look into /woocommerce/single-product/add-to-cart/variable.php to see if I'm able to achieve my goal! –  Stefano Jan 24 '13 at 15:15
I've tried to create two different forms for each product in the catalog page. But it's not working.. when I click on "add to chart" it sends me to the single product page with the error message "Please choose product options…". Here is the code I've used: do you have any advice? –  Stefano Jan 28 '13 at 12:45
@Stefano I can confirm this. It seems Woocommerce is filtering out form values that are not added by their srcipts.. weird.. –  jilseego Mar 20 '13 at 3:45

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.