1BANNER 123
5/5 - (951 bình chọn)

Hôm nay mình sẽ share 1 đoạn code mà mình tự viết để có thể custom lại nút tăng giảm số lượng woocommrece.

Như thế này

Custom Nut Tang Giam So Luong 1
Custom lại nút tăng giảm số lượng

Các bạn dán đoạn code này vào file functions.php nhé.

add_action( 'woocommerce_after_quantity_input_field', 'custom_quat' );
function custom_quat() {;?>
	<div class="quantity-wrapper pull-left">
		<span class="add-up plus add-action fa fa-plus"></span> 
		<span class="add-down minus add-action fa fa-minus"></span>
   </div>
<?php }

Ở đây mình sử dụng hook woocommerce_after_quantity_input_field để chèn được nội dung ngay sau input nhập số lượng. Sau khi thêm vào thì các bạn thêm css dưới đây giúp mình nhé.

.add-action{
	border-bottom: 1px solid #ebeef2;border-right: 1px solid #ebeef2;border-top: 1px solid #ebeef2;color: #6f6f6f;cursor: pointer;display: block;
    font-size: 7px;height: 50%;line-height: 15px;position: relative;text-align: center;
    width: 27px;background: #F5F5F5;
}
.button.is-form{
	display:none;
}

Để có thể thêm được chữ số lượng ở phía trước của input số lượng thì các bạn có thể tham khảo bài viết này

Các thêm text vào trước và sau input số lượng

Hoặc thêm code này vào nhé.

add_action( 'woocommerce_before_add_to_cart_quantity', 'text_before_quantity' );
function text_before_quantity() {
 echo '<div class="qty-text">Số lượng: </div>'; 
}

Và 1 chút css cho nó nữa là xong

.qty-text{
	display: flex;
    align-items: center;
    margin-right: 10px;
}

Chúc các bạn thành công với cách custom lại nút tăng giảm số lượng trong trang sản phẩm của woocommrece

6 thoughts on “Hướng dẫn custom nút tăng giảm số lượng woocommerce.

      • stieu220 says:

        cách viết display:none cho woocommerce như thế nào ta, mình không rành code lắm, có thể hỗ trợ mình thêm đoạn đó với, Thành Tuấn có thể chỉnh sửa và bổ sung thêm trong bài viết nhiều khi có bạn đọc trên blog cũng vướng phải trường hợp như mình

    • Thành Tuấn says:

      Bạn học PhP cơ bản + jquery và tài liệu của wordpress là có thể làm được nhé. Chứ còn tài liệu trên mạng chỉ có thể giúp bạn giải quyết 1 số vấn đề nhỏ thôi, quan trọng là khả năng tư duy của mình

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *