• Resolved MarkJ

    (@forusak)


    Hey, is there a way to highlight which product options were not selected (after clicking add to cart)? I mean like how required fields work in forms. Or could you consider add it?

Viewing 1 replies (of 1 total)
  • Plugin Support Elena

    (@elenathemehigh)

    Could you please check after adding the below code in your child theme’s functions.php file.

    add_action( 'wp_footer', 'highlight_and_scroll_unselected_variation_labels', 100 );
    function highlight_and_scroll_unselected_variation_labels() {
    if ( ! is_product() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($) {
    var $form = $('form.variations_form');

    $form.on('click', '.single_add_to_cart_button', function(e) {
    var isValid = true;
    var firstInvalid = null;

    $form.find('.variations select').each(function(){
    var $select = $(this);
    var selected = $select.val();
    var $label = $select.closest('tr').find('label');

    if (!selected) {
    isValid = false;
    $label.css('color', 'red');
    if (!firstInvalid) {
    firstInvalid = $label;
    }
    } else {
    $label.css('color', '');
    }
    });

    if (!isValid) {
    e.preventDefault();

    if (firstInvalid) {
    $('html, body').animate({
    scrollTop: firstInvalid.offset().top - 100 // adjust offset as needed
    }, 500);
    }

    return false;
    }
    });

    // Reset label color on change
    $form.on('change', '.variations select', function(){
    var $select = $(this);
    var $label = $select.closest('tr').find('label');

    if ($select.val()) {
    $label.css('color', '');
    }
    });

    // Block default alert
    if (typeof window.alert === 'function') {
    const originalAlert = window.alert;
    window.alert = function(msg) {
    if (msg === wc_add_to_cart_variation_params.i18n_make_a_selection_text) {
    return;
    } else {
    originalAlert(msg);
    }
    };
    }
    });
    </script>
    <?php
    }

    Kindly check and verify it from your end?

    Have a great day!

Viewing 1 replies (of 1 total)

The topic ‘Highlight unselected options’ is closed to new replies.