Custom Plus & Minus Quantity trong Woocommerce
26 Tháng Sáu, 2024
Như bạn đã biết thì nút thay đổi số lượng của Woocommerce để default không mấy là đẹp mắt và khiến người dùng khó tương tác trong việc thay đổi số lượng. Đó là lý do tại sao mình viết bài này để giúp các bạn làm đẹp nút đó.
Sửa file ../global/quantity-input.php ở template Woocommerce
Các bạn copy đoạn code sau và dán đè vào đoạn code cũ ở file quantity-input.php.
<?php
/**
* Product quantity inputs
*
* This template can be overridden by copying it to yourtheme/woocommerce/global/quantity-input.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
if ( $max_value && $min_value === $max_value ) {
?>
<div class="quantity hidden">
<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
</div>
<?php
} else {
/* translators: %s: Quantity. */
$labelledby = ! empty( $args['product_name'] ) ? sprintf( __( '%s quantity', 'woocommerce' ), strip_tags( $args['product_name'] ) ) : '';
?>
<div class="quantity">
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
<input type="button" value="-" class="qty_button minus" />
<input
type="number"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<input type="button" value="+" class="qty_button plus" />
</div>
<?php
}
Chèn đoạn sau vào file js của bạn
Đoạn code trên giúp chúng ta tạo hình thù cho button số lượng, đoạn js này giúp chúng ta khi ấn + / – sẽ thay đổi số lượng:
jQuery( function( $ ) {
if ( ! String.prototype.getDecimals ) {
String.prototype.getDecimals = function() {
var num = this,
match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if ( ! match ) {
return 0;
}
return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
}
}
// Quantity "plus" and "minus" buttons
$( document.body ).on( 'click', '.plus, .minus', function() {
var $qty = $( this ).closest( '.quantity' ).find( '.qty'),
currentVal = parseFloat( $qty.val() ),
max = parseFloat( $qty.attr( 'max' ) ),
min = parseFloat( $qty.attr( 'min' ) ),
step = $qty.attr( 'step' );
// Format values
if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
if ( max === '' || max === 'NaN' ) max = '';
if ( min === '' || min === 'NaN' ) min = 0;
if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;
// Change the value
if ( $( this ).is( '.plus' ) ) {
if ( max && ( currentVal >= max ) ) {
$qty.val( max );
} else {
$qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
}
} else {
if ( min && ( currentVal <= min ) ) {
$qty.val( min );
} else if ( currentVal > 0 ) {
$qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
}
}
// Trigger change event
$qty.trigger( 'change' );
});
});
Thêm style cho button vào file css của bạn
Chỉ cần dừng ở bước trên là button số lượng của bạn đã hoạt động, css dưới đây sẽ giúp bạn phần nào khiến các nút trở nên đẹp hơn:
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
display: none;
margin: 0;
}
.quantity input.qty {
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield;
}
.quantity input.qty_button{
-webkit-appearance: button;
width: 40px;
height: 33px;
background: #f4f2f5;
content: "\f068";
font-family: fontawesome;
font-size: 14px;
color: #a6a9b2;
text-align: center;
line-height: 33px;
cursor: pointer;
border: none;
}
.quantity .input-text{
height: 30px;
border: none;
outline: none;
font-size: 16px;
font-weight: bold;
width: 50px!important;
}
.quantity{
display: inline-flex;
border: 1px solid #ddd;
}
Có vấn đề gì cần giải đáp bạn comment ngay bên dưới nhé!
Đăng nhập
0 Góp ý
Cũ nhất
Wordpress
- Tháng Sáu 26, 2024
Hướng dẫn tích hợp Facebook Messenger vào Website
Kiến thức
- Tháng Sáu 26, 2024
Bảng mã màu HTML, CSS, RGB, CMYK chuẩn
Wordpress
- Tháng Sáu 26, 2024
Cách cài đặt SMTP cho WordPress
Wordpress
- Tháng Sáu 26, 2024
Hướng dẫn sử dụng Duplicator để nhân bản Website WordPress
Woocommerce
- Tháng Sáu 26, 2024
Hướng dẫn hiển thị sản phẩm đã xem trong Woocommerce
Unity
- Tháng Sáu 26, 2024
Các hàm cơ bản của Monobehaviour Unity: Update, LateUpdate, FixedUpdate
Unity
- Tháng Sáu 26, 2024
Xây dựng hệ thống Event trong Unity
Unity
- Tháng Sáu 26, 2024
Tương tác với Object đa nền tảng trong Unity
Woocommerce
- Tháng Sáu 26, 2024
Custom Plus & Minus Quantity trong Woocommerce
Unity
- Tháng Sáu 26, 2024
Các hàm cơ bản của Monobehaviour Unity: Awake, OnEnable, Start
Unity
- Tháng Sáu 26, 2024
Lưu chỉ số nhân vật với Scriptable Object
Tin tức liên quan
Singleton trong Unity
Nếu phải chỉ ra một design pattern nào không thể thiếu trong một project thì đó chắc chắn là Singleton. Đơn giản, tính ứng dụng cao là các ưu...
Save/Load dữ liệu trong Unity
Save/Load dữ liệu có lẽ là điều quá quen thuộc với những người đã từng chơi game. Bài viết này mình sẽ hướng dẫn các bạn cách dựng một...
Các hàm cơ bản của Monobehaviour Unity: Awake, OnEnable, Start
Monobehaviour là một lớp “nền” cho các script được gắn vào game object trong Unity. Một lớp Mono có sẵn rất nhiều hàm để thực thi các chức năng...