Change Variation Select Dropdown to Radio Buttons on WooCommerce

Mặc định phần Variation product sản phẩm của bạn khi bạn chọn các trường biến thể giá, biến thể về thông số sản phẩm Attibutes, Varations thì các biến thể này hiển thị ngoài giao diện người dùng sẽ là dạng Select Dropdown chọn từng thành phần, nhìn rất bất tiện và khó cho người sử dụng mới.

Hiển thị khá xấu và khó xem như hình dưới.



Để chuyển định dạng này từ Dropdown sang Radio Buttons dạng click cho người dùng dễ dàng click và sử dụng như hình dưới thì bạn add code như hướng dẫn nhé:


Chèn code sau vào tập tin function.php của themes:

Mã:

//chuyển combobox chon kích thước thành, radiobutton chọn cho đẹp và tiện, trong chi tiết sản phẩm
add_action( 'woocommerce_after_single_product', function() {
  // Variable Products Only
  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
              = `<input name="${selName}" ${isSelected} type="radio" value="${value}" />`;
            var optionHtml
              = `<label class="generatedRadios${selClass}">${radHtml} ${label}</label>`;
            select.parent().append(
              $( optionHtml ).click( function() {
                select.val( value ).trigger( "change" );
              } )
            )
          } ).parent().hide();
        } );
      } );
    } );
  </script>
  <?php
} );
//end

Chèn thêm chút css cho đẹp giao diện

Mã:

.product-summary .variations_button
{
padding-bottom: 0px;
}
.variations .reset_variations {
    right: 10px;
    bottom: 87%;
}
.variations
{
margin-top: 8px;
margin-bottom: 8px;
}
.variations_form .variations td
{
border: 1px solid #e3e1e1 !important;
padding: 0px 10px;
}
.variations_form .variations .label
{
width: 135px;
background-color: #f4f4f4;
border: none !important;
}
.variations_form .variations .value label
{
margin:0px 0px;
}