WooC Commerce thêm vào số lượng giỏ hàng

WooC Commerce có thể được sử dụng với nhiều chủ đề WordPress và mỗi chủ đề có một cách bố trí và tạo kiểu khác nhau cho các tính năng khác nhau. Trong bài viết này, chúng ta sẽ nói về tính năng số lượng, cụ thể hơn là các nút bấm tăng giảm số lượng của một sản phẩm trước khi thêm vào Giỏ hàng, hoặc khi cập nhật Giỏ hàng. Mặc dù ở nhiều chủ đề, các nút số lượng WooC Commerce này được biểu thị bằng các dấu “+” và “-” để thêm và giảm số lượng tương ứng, các chủ đề như chủ đề Storefront hiển thị các mũi tên lên và xuống giống nhau, theo mặc định (xem hình ảnh . Đối với các chủ đề như vậy, hãy khám phá cách thêm các nút + và – vào đầu vào số lượng WooC Commerce trên trang sản phẩm

Mũi tên nhập số lượng trên Chủ đề StoreFront khi di chuột vào đó

Có nhiều cách để làm điều này tôi. e. sử dụng plugin hoặc đoạn mã

Sử dụng đoạn mã để thêm các nút cộng + và trừ – vào đầu vào số lượng WooC Commerce trên trang sản phẩm

Bạn có thể sử dụng một đoạn mã đơn giản bao gồm PHP, JQuery và CSS để thêm các nút dấu cộng (+) và (-) thay cho mũi tên lên và xuống để tăng và giảm số lượng tương ứng. Bắt đầu với việc thêm các đoạn mã PHP & JQuery bên dưới vào các chức năng. tệp php của chủ đề con của bạn

add_action( 'woocommerce_after_add_to_cart_quantity', 'ts_quantity_plus_sign' );
 
function ts_quantity_plus_sign() {
   echo '+';
}
 
add_action( 'woocommerce_before_add_to_cart_quantity', 'ts_quantity_minus_sign' );

function ts_quantity_minus_sign() {
   echo '-';
}
 
add_action( 'wp_footer', 'ts_quantity_plus_minus' );
 
function ts_quantity_plus_minus() {
   // To run this on the single product page
   if ( ! is_product() ) return;
   ?>
   
   
Sau khi thêm các đoạn mã PHP và JQuery ở trên, chúng tôi sẽ làm mới trang sản phẩm



 
Bạn có thể thấy rằng các nút cộng (+) và trừ (-) đã được thêm vào bên cạnh phần tử nhập số lượng. Tuy nhiên, chúng tôi cần thêm một số kiểu/CSS để các nút hiển thị chính xác. Nếu bạn đang sử dụng các chủ đề phổ biến như chủ đề StoreFront, bạn sẽ có tùy chọn thêm CSS bổ sung bằng cách nhấp vào Tùy chỉnh trên chính giao diện người dùng
.single-product div.product form.cart .quantity {
    float: none;
    margin: 0;
    display: inline-block;
}
Bạn sẽ thấy rằng các nút hiện xuất hiện ở cả hai bên của đầu vào số lượng



 
Bằng cách này, bạn có thể dễ dàng sử dụng các đoạn mã để thêm các nút này trên trang sản phẩm. Tuy nhiên, để hiển thị các nút cộng(+) và trừ(-) trên trang Giỏ hàng, bạn nên sử dụng các plugin hoạt động cho cả hai mục đích thay vì sử dụng các đoạn mã này
Sử dụng các plugin để thêm các nút cộng + và trừ – vào đầu vào số lượng trên trang sản phẩm và trang Giỏ hàng
Để thêm các nút trên sản phẩm cũng như trang Giỏ hàng, có sẵn hai plugin miễn phí



Nút tăng số lượng cho WooC Commerce. Đây là plugin dễ sử dụng hiển thị các nút trên cả trang sản phẩm và trang Giỏ hàng. Ngoài ra, bạn có tùy chọn hiển thị các nút trên trang Cửa hàng và/hoặc Danh mục tùy thuộc vào những gì bạn chọn trong “Hiển thị kho lưu trữ”
Nếu bạn muốn tải các nút trên tất cả các trang chứ không chỉ trên các trang Sản phẩm, Giỏ hàng, Thanh toán, Cửa hàng và Danh mục, bạn có thể chọn tùy chọn tiếp theo i. e. “Tải trên tất cả các trang”
Bạn có thể thấy rằng có nhiều cách khác nhau để bạn có thể tạo kiểu cho các nút. Ngoài ra còn có một plugin của cùng một tác giả được gọi là Tự động cập nhật giỏ hàng Ajax cho WooC Commerce để cập nhật Giỏ hàng theo thời gian thực. e. sử dụng Ajax, khi tăng hoặc giảm số lượng
Nút số lượng SMNTS WooC Commerce. Đây cũng là một plugin dễ dàng nhưng có rất ít tùy chọn về kiểu dáng. Ưu điểm duy nhất mà nó mang lại so với plugin trước đó là nó có tùy chọn tắt các nút trên trang Giỏ hàng hoặc trang Sản phẩm (nếu có yêu cầu như vậy) chỉ bằng một dòng mã, như đã đề cập trên trang chủ plugin. Nó cũng quản lý để loại bỏ các mũi tên lên và xuống mặc định bên trong phần tử nhập số lượng
Bằng cách này, bạn có thể sử dụng các plugin hoặc đoạn mã dựa trên yêu cầu của mình để thêm các nút cộng + và trừ – vào đầu vào số lượng trong WooC Commerce