SkyVerge WooCommerce Extensions

WooCommerce Product Reviews Pro is handy for gathering more feedback from customers as they review your products, which can help future purchasers learn more about items. Was the item too small or too big? Was the color as expected? What were you using the item for?

In Product Reviews Pro, you can add these questions as review qualifiers. They’re added as dropdown questions in your review form.

WooCommerce Product Reviews Pro: Review qualifiers

One question our support team got recently was: “Can I update these qualifiers to use radio inputs instead of select inputs?” And we thought it makes a neat little JavaScript tutorial. 🙂

You can target each review qualifier input, get its options and selected value, and rebuild it as a radio option instead via JavaScript. Here’s an example that will take each review qualifier dropdown and apply this process — be sure you know how to add custom code to your site if you use this.

/**
 * Changes Product Reviews Pro review qualifiers to radio buttons
 *  rather than select fields.
 */
function sv_wc_prp_radio_review_qualifiers() {
    
    wc_enqueue_js("
        // target each review qualifier
        $( 'div.review-qualifiers select' ).each( function( i, select ) {
            var select = $( select );

            select.find( 'option' ).each( function( j, option ){
                var option = $( option );

                // create a radio, and set its name / value
                var radio = $( '<input type=\"radio\" />' );

                radio.attr( 'name', select.attr( 'name' ) ).attr( 'value', option.val() );
                if ( option.attr( 'selected' ) ) {
                    radio.attr('checked', 'checked');
                }

                // insert our radio first, then we'll remove our select when we're done
                select.before( radio );
                select.before( $( '<label />' ).attr( 'for', select.attr( 'name' ) ).text( option.text() ) );
                select.before( '<br/>' );
            });

            // now we can remove the select since we've inserted a radio
            select.remove();
        } );
    ");
}
add_action( 'wp_print_footer_scripts', 'sv_wc_prp_radio_review_qualifiers' );

And voilà, our select inputs are now radio inputs! They may not look too great yet, though, depending on your theme.

WooCommerce Product Reviews Pro: Radio qualifiers

So, let’s add some custom CSS to adjust the styling for these review qualifiers.

.review-qualifiers .woocommerce-input-wrapper {
    display: flex;
}

.review-qualifiers input[type="radio"] {
    margin: 3px 0;
}

.review-qualifiers input[type=radio]+label {
    display: inline-block;
    margin: 0 .85em 0 .25em;
}

And now we have review qualifiers that are styled inline, which is great for questions with short, few-word answers.

WooCommerce Product Reviews Pro: styled qualifiers

For those of you using review qualifiers with “Yes / no” or short answers, this should help with a small refinement in customer experience by making all options clear!

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

Leave a Reply

Your email address will not be published. Required fields are marked *