Change Variation Select Dropdown to Radio Buttons on WooCommerce

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi admin, 8/6/21.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,443
    Đã được thích:
    1,069
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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.

    convert-variation-select-from-dropdown-to-checkbox-woocommerce.jpg

    Để 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é:

    convert-variation-select-from-dropdown-to-checkbox-woocommerce-complate.jpg
    Chèn code sau vào tập tin function.php của themes:
    PHP:
    /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;
    }
     
    Cảm ơn đã xem bài:

    Change Variation Select Dropdown to Radio Buttons on WooCommerce

    seolagi thích bài này.


Like và Share ủng hộ ITSEOVN