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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,980
    Đã được thích:
    1,211
    Đ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:
    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;
    }
     
    Cảm ơn đã xem bài:

    Change Variation Select Dropdown to Radio Buttons on WooCommerce

    Chỉnh sửa cuối: 13/1/23
    seolagi thích bài này.


Chủ để tương tự : Change Variation
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Change button link cart checkout woocommerce_mini_cart woocommerce 20/2/24
Mã nguồn mở Wordpress Change gallery thumbnails count & number default 4 Woocommerce 3/8/23
Mã nguồn mở Wordpress Đổi vị trí hiện thị Fixed Toc từ nội dung vào sidebar, Change position Fixed TOC 12/10/21
Mã nguồn mở Wordpress Change userName Via Twitter sharing post on newspaper 7/1/21
Mã nguồn mở Wordpress Show default variation price Woocommerce, hiển thị giá mặc định của biến thể? 13/1/23