Only if multi options, change variations from dropdown to radio buttons

  • Resolved hussein87

    (@hussein87)


    2 years, 1 month ago

    Hi,

    I want to change the variation’s dropdown to radio buttons only for one option variations, and keep the dropdown for multioption variations. 

    Changing dropdown to radio buttons code:

    add_action( 'woocommerce_after_single_product', function() {
     
    	global $product;
    	if( ! $product || ! $product->is_type( 'variable' ) ) {
    		return;
    	}
     
    	// Inline jQuery
    	?>
    	<script>
    		jQuery( document ).ready( function( $ ) {
    			$( ".variations_form" )
    				.on( "wc_variation_form woocommerce_update_variation_values", function() {
    				$( "label.generatedRadios" ).remove();
    				$( "table.variations select" ).each( function() {
    					var selName = $( this ).attr( "name" );
    					$( "select[name=" + selName + "] option" ).each( function() {
    						var option = $( this );
    						var value = option.attr( "value" );
    						if( value == "" ) { return; }
    						var label = option.html();
    						var select = option.parent();
    						var selected = select.val();
    						var isSelected = ( selected == value )
    							? " checked=\"checked\"" : "";
    						var selClass = ( selected == value )
    							? " selected" : "";
    						var radHtml
    							= <code><input name=&quot;${selName}&quot; type=&quot;radio&quot; value=&quot;${value}&quot; /></code>;
    						var optionHtml
    							= <code><label class=&quot;generatedRadios${selClass}&quot;>${radHtml} ${label}</label></code>;
    						select.parent().append(
    							$( optionHtml ).click( function() {
    								select.val( value ).trigger( "change" );
    							} )
    						)
    					} ).parent().hide();
    				} );
    			} );
    		} );
    	</script>
    	<?php
    } );

    Css to hide radio buttons:

        .variations .value .selected input[type=radio]{
    opacity: 0;	
    }
    
    .variations .value :not(label:only-of-type).selected{
    	opacity: 1;
    }

    Any help as much appreciated!

    • This topic was modified 2 years, 1 month ago by hussein87.
    • This topic was modified 2 years, 1 month ago by hussein87.
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @hussein87

    Thanks for reaching out!

    I understand that you want to change the drop-down menu to a radio button on your site using the custom code above.

    I tried the code on your test site, however, it is not working on my end.

    Please be informed that this forum is meant for general support with the core functionality of WooCommerce itself. What you want to achieve would require customization to do it. Since custom coding is outside our scope of support, I am leaving this thread open for a bit to see if anyone can chime in to help you out.

    For questions related to development and custom coding, your best bet is to ask on any of these channels for support. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

    – WooCommerce Developer Resources Portal
    – WooCommerce Advanced Facebook group
    – WooCommerce Community Forum
    – WooCommerce Developer Slack Channel.
    – Hire a WooCommerce Expert

    Hope this helps!

    Thread Starter hussein87

    (@hussein87)

    Hi, thanks for your reply!

    The code above works perfectly for me and change the dropdown menu to a radio button.

    I was asking, how to make this change only for variations that have only one option (which is selected by default in Woo backend). So if there are multioptions in the variation I want to keep the dropdown menu.

    Here’s an image for clarification:
    https://snipboard.io/ur8WoG.jpg

    I appreciate any help!

    Plugin Support Daniyal Ahmed (a11n)

    (@daniyalahmedk)

    Hi there,

    Thanks for getting back to us.

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

    Best,

    Thread Starter hussein87

    (@hussein87)

    Hi @daniyalahmedk

    Thanks for the reply!

    I understand that, and since the code above is doing the job, I just need to find a way to loop through the attributes and apply the JS code to those, who have more than one option.

    All the best,

    Thread Starter hussein87

    (@hussein87)

    Just in case someone wanted to achieve what I was trying to do, here’s how I solved this:

    FIRST: I used JavaScript to loop through attributes and check if Select has more than 1 option and add a class to it. 

    let checkSelects = [...document.querySelectorAll(".value select")]

checkSelects.forEach(checkSelect => {
  if (checkSelect.length > 2) {
    checkSelect.classList.add("active")
  }
})

    SECOND: I applied the CSS code to the added class like this: 

    .value select.active{
	display: inline-block !important;
}

    Now the default Woocommerce dropdown menu is displayed again but we need to the generated radio buttons like this: 

    .value label:not(:only-of-type){
		display: none !important;
}
    Plugin Support Douglas I. a11n

    (@imodouglas)

    Hi @hussein87,

    Thank you for sharing the steps you used to resolve this issue with us. I am happy to hear that you were able to resolve this issue.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Only if multi options, change variations from dropdown to radio buttons’ is closed to new replies.