How do you put grouped product form/table into a dropdown menu in Woocommerce? Some of my products have more than 10 “child products”. So the list can be very extensive. Maybe have one quantity box and add to cart with just the dropdown of the different options? Currently I don’t see if it is possible to select a child product hand have the product image change.
The following is the Grouped.php file for woo commerce:
<?php
/**
* Grouped product add to cart
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.1.7
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $product, $post;
$parent_product_post = $post;
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="cart" method="post" enctype='multipart/form-data'>
<table cellspacing="0" class="group_table">
<tbody>
<?php
foreach ( $grouped_products as $product_id ) :
$product = wc_get_product( $product_id );
$post = $product->post;
setup_postdata( $post );
?>
<tr>
<td>
<?php if ( $product->is_sold_individually() || ! $product->is_purchasable() ) : ?>
<?php woocommerce_template_loop_add_to_cart(); ?>
<?php else : ?>
<?php
$quantites_required = true;
woocommerce_quantity_input( array( 'input_name' => 'quantity[' . $product_id . ']', 'input_value' => '0' ) );
?>
<?php endif; ?>
</td>
<td class="label">
<label for="product-<?php echo $product_id; ?>">
<?php echo $product->is_visible() ? '<a href="' . get_permalink() . '">' . get_the_title() . '</a>' : get_the_title(); ?>
</label>
</td>
<?php do_action ( 'woocommerce_grouped_product_list_before_price', $product ); ?>
<td class="price">
<?php
echo $product->get_price_html();
if ( $availability = $product->get_availability() ) {
$availability_html = empty( $availability['availability'] ) ? '' : '<p class="stock ' . esc_attr( $availability['class'] ) . '">' . esc_html( $availability['availability'] ) . '</p>';
echo apply_filters( 'woocommerce_stock_html', $availability_html, $availability['availability'], $product );
}
?>
</td>
</tr>
<?php
endforeach;
// Reset to parent grouped product
$post = $parent_product_post;
$product = wc_get_product( $parent_product_post->ID );
setup_postdata( $parent_product_post );
?>
</tbody>
</table>
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<?php if ( $quantites_required ) : ?>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
I came across this question while searching for an answer to the same issue. I have multiple subscription products that the user will need a way to upgrade them. When presented with the
woocommercegrouped product page it was ugly as crap. I removed the switch from the inner loop on the page. Replaced it with an if statement for thequantityvalue of$column_id. I then got creative in solving the issue of having the correct form elements needed to actually add the items to the cart. I placed anotherhiddeninput, using jQuery I then filled out the hidden input with the correctnameof the product that is selected in the dropdown. Bam all worked out, apply custom styles and fill with whatever products you want.Here is the jQuery in case you want to see how that works…..
Tesed this and looks like this is working. Thanks!