Paypal | Site Banner Q4 2024

Added by Latoya

Product Icon

WooCommerce Subscriptions

Let customers subscribe to your products or services and pay on a weekly, monthly or annual basis.

Radio buttons instead of Checkboxes for Grouped Product when Multiple Subscriptions are Disabled

When “Allow multiple subscriptions .. to be purchased at the same time” is disabled in the WooCommerce Subscriptions settings, a customer is only able to add one subscription the cart at a time.

But, if subscriptions are part of a Grouped Product, the subscriptions are listed with checkboxes next to them for selection.

This is confusing for the customer, as it gives the impression that the customer can select multiple subscriptions, and yet when they are added to the cart only the last selected item remain in the cart. This is because the cart can only contain one subscription at a time, due to the setting mentioned above.

This is clearly a usability issue, which needs to be improved.

Therefore radio buttons should be displayed instead of checkboxes, which only allow the customer to select one subscription in the Grouped Product.

Please note: This only occurs when the subscription products are set as ‘Sold Individually’, otherwise quantity boxes are displayed beside the subscriptions options instead.

Author

Current Status

Open

Last updated: September 6, 2019

8 comments

Log in to comment on this feature request.

  1. timmedial says:

    Another vote for this. As an interim solution, I’ve got this JavaScript that can be included on the grouped product page via a hook if you pop this in a php file somewhere in a custom plugin or theme. This will prevent more than one tickbox from being checked at any one time, so will make the tickboxes behave like radio icons.

    add_action( ‘woocommerce_after_single_product’, ‘after_single_product’, 5 );
    public function after_single_product($params) {
    global $product;
    if ($product->get_type() != ‘grouped’) {
    return;
    }
    ?>
    const GroupedProduct = {
    activate: function() {
    var elements = document.querySelectorAll(“.wc-grouped-product-add-to-cart-checkbox”);
    elements.forEach(function(button) {
    button.addEventListener(“click”, GroupedProduct.click);
    });
    },

    click: function(evt) {
    if (evt.target.checked == false) {
    return;
    }
    var elements = document.querySelectorAll(“.wc-grouped-product-add-to-cart-checkbox”);
    elements.forEach(function(button) {
    if (button != evt.target) {
    button.checked = false;
    }
    });
    }
    }
    document.addEventListener(“DOMContentLoaded”, GroupedProduct.activate);
    <?php
    }

  2. uamtv says:

    Yes this would be a very nice touch; it’s very confusing to users.

  3. wo2 says:

    yes it is need

  4. Ian Miller says:

    This seems obvious to me. It’s a very common use case that a business wants to offer subscriptions with multiple tiers. Setting this up as a grouped product allows the most flexibility (i.e. different rewards points per tier). But the checkboxes don’t make any sense if a user is only allowed to have a single subscription at any one time. Radio buttons make WAY more sense.

  5. Abdul Rehman says:

    Umm, do we get any feedback on this? This is exactly the problem I’m just facing and looking for a solution; Don’t want edit template files.

  6. Shaun Rossouw says:

    You can do the following:
    1. Instal code snippets plugin
    2. create new code snippet and add following code:

    add_action( ‘wp_head’, function () { ?>

  7. Anonymous says:

    Definitely need this! Radio buttons would make it much easier. At least provide it as an option so for memberships where only one product should be selected (such as a duration; monthly/annually) it stops confusion.

  8. Anonymous says:

    This is really needed?

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.