Trang chủ Blog Website Share Code Đổi số lượng sản phẩm thành dạng select

Đổi số lượng sản phẩm thành dạng select

Chuyển quantity thành dạng dropdown

Số lượng sản phẩm thường là dạng inpu nhập số vào, đối với một số khách lười nhập thì cũng hơi bất tiện nhỉ.? Bởi thế khách mình bảo thích dạng select cho nhanh.

Nên sẵn chia sẻ mọi người cách đổi sang dạng select đơn giản như sau

Cho code vào function.php của theme.

function woocommerce_quantity_input($args = array(), $product = null, $echo = true)
{
    if (is_null($product)) {
        $product = $GLOBALS['product'];
    }

    $defaults = array(
        'input_id' => uniqid('quantity_'),
        'input_name' => 'quantity',
        'input_value' => '1',
        'classes' => apply_filters('woocommerce_quantity_input_classes', array('input-text', 'qty', 'text'), $product),
        'max_value' => apply_filters('woocommerce_quantity_input_max', -1, $product),
        'min_value' => apply_filters('woocommerce_quantity_input_min', 0, $product),
        'step' => apply_filters('woocommerce_quantity_input_step', 1, $product),
        'pattern' => apply_filters('woocommerce_quantity_input_pattern', has_filter('woocommerce_stock_amount', 'intval') ? '[0-9]*' : ''),
        'inputmode' => apply_filters('woocommerce_quantity_input_inputmode', has_filter('woocommerce_stock_amount', 'intval') ? 'numeric' : ''),
        'product_name' => $product ? $product->get_title() : '',
    );

    $args = apply_filters('woocommerce_quantity_input_args', wp_parse_args($args, $defaults), $product);

    $args['min_value'] = max($args['min_value'], 0);
    $args['max_value'] = 0 < $args['max_value'] ? $args['max_value'] : 10;


    if ('' !== $args['max_value'] && $args['max_value'] < $args['min_value']) {
        $args['max_value'] = $args['min_value'];
    }

    $options = '';

    for ($count = $args['min_value']; $count <= $args['max_value']; $count = $count + $args['step']) {

        if ('' !== $args['input_value'] && $args['input_value'] >= 1 && $count == $args['input_value']) {
            $selected = 'selected';
        } else $selected = '';

        $options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
    }

    $string = '<div class="isures-custom--qty_dropdown"><select name="' . $args['input_name'] . '">' . $options . '</select><span class="isures-label--qty">Quantity</span></div>';

    if ($echo) {
        echo $string;
    } else {
        return $string;
    }
}

Nếu bạn muốn thay đổi số lượng options thì để ý giúp mình dòng code số 23 nhé. Sửa số 10 thành số bạn muốn. ví dụ 20, thì code trên tạo ra 20 options từ 1-20.

Rồi tiếp là làm đẹp lại cho quantity.

.single-product .isures-custom--qty_dropdown{
	width: 30%;
}
.isures-custom--qty_dropdown{
	position: relative;
	width: 100%;
	height: 54px;
	margin-bottom: 15px;
	margin-right: 15px;
	-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
	cursor: pointer
}
.isures-custom--qty_dropdown select {
	width: 100%;
	height: 54px;
    padding-right: 1.75rem;
    background-color: transparent;
    padding: 1.5rem 0.625rem 0.375rem;
    font-size: 16px;
    color: #4d4d4d;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 3px;
	cursor: pointer
}
span.isures-label--qty {
    position: absolute;
    top: 0.525rem;
    left: 0.625rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
    -webkit-transition: 0.12s;
    transition: 0.12s;
    -webkit-transition-delay: 0.12s;
    transition-delay: 0.12s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    line-height: 1;
    color: #4d4d4d;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    text-transform: none !important;
}
.isures-custom--qty_dropdown select, .isures-custom--qty_dropdown select option {
    border: none;
    box-shadow: none;
}

Code trên là style theo ý thích của mình, bạn có thể thay đổi theo sở thích riêng nhé 🙂

Thành quả được như này

Đổi số lượng sản phẩm thành select
Đổi số lượng sản phẩm thành select

Oke chúc bạn thành công! <3

Tham gia Group Flatsome Hỏi Đáp để hỏi đáp, cũng như nhận các bài chia sẻ khác!

5/5 - (100 bình chọn)
Bài viết liên quan