WooCoomerce [Subscription]: Radio buttons at Grouped Products for Upgradation & Downgradation

Question

WooCommerce subscription gives the ability to upgrade or downgrade, to other subscription products if they are.

1. Grouped Product
2. Variable Subscription.

When using grouped subscription the single product page, uses the checkbox to show prices of all the subscriptions. This becomes very confusing since you can only select one product. I am trying to convert them to the radio button but I am unable to do so.

You can see the request for the idea raised at : https://ideas.woocommerce.com/forums/133476-woocommerce/suggestions/38542126-radio-buttons-instead-of-checkboxes-for-grouped-pr

What I have tried

@foreach ( $grouped_products as $grouped_product_child )
    <input type="radio" id="@php echo $grouped_product_child->get_id() @endphp" name="grouped-product" value="@php echo $grouped_product_child->get_id() @endphp">
@endforeach

<input type="hidden" name="add-to-cart" value="@php echo esc_attr( $product->get_id() ); @endphp" />
 
@if($quantites_required)
    <button type="submit">Subscribe Now</button>
@endif

I have deliberately left the logic which checks if the input option should be visible or not.

Every time I click on the subscribe Now menu, I get an error message asking me to Please choose a product to add to your cart…

Answer 1

I had to edit grouped.php file in single-product/add-to-cart. I copied the file and made the following changes.

@php global $product, $post; @endphp

@php
  $quantites_required      = false;
  $previous_post           = $post;
@endphp

<div class="purchase">

  <div class="prices">

<form class="cart grouped_form"
      action="@php esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); @endphp"
      method="post"
      enctype='multipart/form-data'
      x-data="{product: '2370'}" >
  <div>
    @foreach ( $grouped_products as $key => $grouped_product_child )
      @php
        $post_object        = get_post( $grouped_product_child->get_id() );
        $quantites_required = $quantites_required || ( $grouped_product_child->is_purchasable() && ! $grouped_product_child->has_options() );
        $post               = $post_object;
        setup_postdata( $post );
      @endphp

      <div class="form-groups grouped-product-item" data-product="@php echo $grouped_product_child->get_id(); @endphp">
        @if (! $grouped_product_child->is_purchasable() || $grouped_product_child->has_options() || ! $grouped_product_child->is_in_stock())
          @php woocommerce_template_loop_add_to_cart(); @endphp
        @else ( $grouped_product_child->is_sold_individually() )
          <input type="checkbox" id="@php echo $grouped_product_child->get_id() @endphp" name="quantity[@php echo $grouped_product_child->get_id() @endphp]" value="1"
                 on:click="product = @php echo $grouped_product_child->get_id() @endphp" @if ($key == 0) checked @endif>
        @endif
        <label for="@php echo $grouped_product_child->get_id() @endphp"
               @click="$dispatch('productchange', {product: '@php echo $grouped_product_child->get_id() @endphp'})"
        >
          <span class="detail">
            <div class="cost">
              <h3><span>₹</span>
              @php echo \WC_Subscriptions_Product::get_price_string($grouped_product_child); @endphp
              </h3>
            </div>

          <div class="extra">
            @if(App\Product::inclusiveOfAllClasses($grouped_product_child->get_id()))
              <div class="class">
              <span>Inclusive of All Classes</span>
            </div>
            @endif
            @if( App\Product::savePercentage($grouped_product_child->get_id()) )
              <div class="save">
              Save {{ App\Product::savePercentage($grouped_product_child->get_id()) }}%
            </div>
            @endif
          </div>
          </span>
        </label>
      </div>

    @endforeach
  </div>

<input type="hidden" name="add-to-cart" value="@php echo esc_attr( $product->get_id() ); @endphp" />

  <div x-data="{product: '1'}"
       @productchange.window="product = $event.detail.product"
       x-init=" product = $store.application.product"
       x-subscribe>
  @foreach ( $grouped_products as $key => $grouped_product_child )
    <div x-show.transition.in="product == {{ $grouped_product_child->get_id() }}">
      @if($quantites_required)
        @if(\App\CartValidation::isCurrentProductInCart(intval($grouped_product_child->get_id())))
          <div class="pricing-information">
            <a href="javascript:void(0)" class="crush-button crush-button-gradient cart-open">
              View Cart
            </a>
            <div class="help-text">
              <img src="@asset('images/caution.svg')" alt="Caution">
              <h6>Product already added to the cart.</h6>
            </div>
          </div>
        @else
          <button type="submit" class="hide-on-mobile actual-submit">Subscribe Now</button>
        @endif
      @endif
    </div>
  @endforeach
  </div>

</form>
  </div>
</div>

Please mind that this is a blade file. If you are using .php you will have to convert it into vanilla php.