WooCommerce 可变产品改为点击选择

main.scss

.woocommerce{
  .variations{
    .reset_variations{
      display: none;
    }

    .reset_variations,
    select{
      display: none;
    }

    .label,
    .value{
      display: block;
    }

    .label{
      margin-bottom: 5px;
      line-height: normal;
    }

    .c-filters{
      margin-bottom: .5rem;
      li{
        display: inline-block;
        border: 1px solid #eee;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        margin-right: 10px;
        cursor: pointer;
        &:first-child{
          display: none;
        }
        &.is-selected{
          border: 1px solid #e51919;
          color: #e51919;
          position: relative;
          &:after{
            content: '';
            width: 14px;
            height: 14px;
            bottom: 0;
            right: 0;
            position: absolute;
            background: url(../images/chose-t-icon.png);
          }
        }
      }
    }

  }
  
}

woocommerce_sku_selector.js

<script>
        jQuery(document).ready(function($){
          $('.variations select').parent().append('<ul id="js-sku-selector" class="c-filters"></ul>');

          $('.variations select option').each(function(){
            $('#selector').append('<li data-value="' + $(this).val() + '">'+$(this).text()+'</li>');
          });

          $('.variations select').hide();

          $('.selector li').click(function(){
            $(this).siblings().removeClass('is-selected');
            $(this).addClass('is-selected');
            $('.variations select').val($(this).data('value')).trigger('change');
          });
        });
    </script>