programming

WooC Commerce hiển thị các biến thể không có giá

Theo mặc định, hiển thị giá trên các sản phẩm có thể biến đổi của WooC Commerce là một loạt các mức giá, từ giá của biến thể thấp nhất đến giá cao nhất. Trong một số trường hợp, cửa hàng có thể không hiển thị loại cao cấp hơn vì điều đó có thể ngăn cản một số khách hàng truy cập trang sản phẩm. Để loại bỏ khả năng như vậy, chúng tôi sẽ thay đổi cách hiển thị giá trên các sản phẩm khác nhau

Cài đặt và kích hoạt một chủ đề con

Bước đầu tiên trong quy trình của chúng tôi ở đây là tạo và cài đặt một chủ đề con. Nếu đang sử dụng một trong các chủ đề của chúng tôi, bạn có thể dễ dàng lấy chủ đề con của chủ đề đó từ phần tải xuống của chúng tôi. Nếu không, bạn có thể đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về chủ đề con để tạo chủ đề của riêng bạn. Bước này là cần thiết để duy trì các thay đổi của chúng tôi trong suốt quá trình cập nhật chủ đề

All code below will be placed in our child theme’s functions.php file. If the file is empty the code will go just below the opening PHP tag if it exists.

Thay đổi hiển thị giá

Nhiệm vụ của chúng ta hôm nay rất đơn giản. Chúng tôi sẽ thay thế phạm vi giá mặc định được hiển thị trên các sản phẩm khác nhau Tất cả những gì chúng tôi cần là một số mã có giá tối thiểu và tối đa, đảm bảo chúng khác nhau và sau đó thay thế chúng bằng đầu ra đã chọn của chúng tôi

add_filter[ 'woocommerce_get_price_html', 'cssigniter_change_variable_price_display', 10, 2 ];
function cssigniter_change_variable_price_display[ $price, $product_obj ] {
    global $product;

    if [ 'variable' !== $product->get_type[] || 'product_variation' === $product_obj->post_type ] {
        return $price;
    }

    $prices = array[ $product->get_variation_price[ 'min', true ], $product->get_variation_price[ 'max', true ] ];
    // Translators: %s is the lowest variation price.
    $price = $prices[0] !== $prices[1] ? sprintf[ __[ 'From: %s', 'your-text-domain' ], wc_price[ $prices[0] ] ] : wc_price[ $prices[0] ];

    return $price;
}

Chúng tôi móc mã của mình vào woocommerce_get_price_html và ở dòng 11, chúng tôi tạo chuỗi mới sẽ hiển thị cho khách hàng của mình. Trong trường hợp của chúng tôi, đây sẽ là “Từ. ” cùng với giá cả. Bạn có thể dễ dàng thay đổi nó thành thứ khác bằng cách thay thế 'From: %s' bằng thứ khác, ví dụ như 'Starting at: %s', chỉ cần đảm bảo rằng bạn bao gồm đối số %s sẽ được thay thế bằng giá

Chuỗi văn bản mới trên trang danh sách sản phẩm

Chuỗi văn bản mới trong chế độ xem một sản phẩm

kết thúc

Trong hướng dẫn hôm nay, chúng tôi đã dễ dàng thay thế hiển thị phạm vi giá có thể thay đổi mặc định bằng một thứ phù hợp hơn với cửa hàng của chúng tôi. Chuỗi thay thế có thể dễ dàng sửa đổi và dịch nếu cần. Bạn có thấy hướng dẫn này hữu ích không?

Đáng ngạc nhiên là các sản phẩm biến đổi với một phạm vi giá hiển thị hai mức giá. ở trên cùng bên phải, bạn tìm thấy giá sản phẩm "gốc", được hiển thị dưới dạng một phạm vi; . Hơi khó hiểu

Trong đoạn trích hôm nay, chúng ta sẽ thấy một lần và mãi mãi cách thay thế giá sản phẩm biến ở trên cùng bên phải bằng một trong các biến thể hiện tại, đồng thời ẩn giá biến thể. Do đó, bạn sẽ thấy một mức giá duy nhất trên trang sản phẩm duy nhất cho các sản phẩm có thể thay đổi. Vui thích

Đây là màn hình mặc định khi một sản phẩm biến đổi có phạm vi giá. trên cùng là giá “tĩnh” cho tất cả các biến thể;

Đoạn mã PHP. Tự động cập nhật giá sản phẩm thay đổi với giá thay đổi hiện tại [Cộng thêm. Ẩn giá thay đổi]

Ghi chú. các câu lệnh jQuery có trong đoạn mã nhắm mục tiêu các lớp CSS cụ thể để thay thế HTML giá. Nếu chủ đề của bạn sử dụng HTML tùy chỉnh và các lớp khác nhau, mã sẽ không hoạt động. Đảm bảo kiểm tra mã này trên một chủ đề mặc định, chẳng hạn như Storefront, để đảm bảo rằng nó thực sự hoạt động;

Các sản phẩm biến đổi trong WooC Commerce cho phép bạn cung cấp một tập hợp các biến thể trên một sản phẩm, với quyền kiểm soát giá, kho hàng, hình ảnh, v.v. cho mỗi biến thể. Chúng có thể được sử dụng cho một sản phẩm như áo sơ mi, nơi bạn có thể cung cấp loại lớn, vừa và nhỏ và có nhiều màu sắc khác nhau

Thêm một sản phẩm biến

↑ Quay lại đầu trang

Đặt loại sản phẩm

↑ Quay lại đầu trang

Để thêm một sản phẩm biến, hãy tạo một sản phẩm mới hoặc chỉnh sửa một sản phẩm hiện có

Đi đến. WooC Commerce > Sản phẩm
Chọn nút Thêm sản phẩm hoặc Chỉnh sửa sản phẩm hiện có. Dữ liệu sản phẩm hiển thị
Chọn Sản phẩm thay đổi từ menu thả xuống Dữ liệu sản phẩm

Thêm thuộc tính để sử dụng cho các biến thể

↑ Quay lại đầu trang

Trong phần Thuộc tính, hãy thêm các thuộc tính trước khi tạo các biến thể — sử dụng các thuộc tính toàn cầu trên toàn trang web hoặc xác định các thuộc tính tùy chỉnh dành riêng cho một sản phẩm

Thuộc tính toàn cầu

Để sử dụng một thuộc tính toàn cầu trên sản phẩm của bạn

Đầu tiên tạo một thuộc tính toàn cầu
Sau đó, bạn có thể chọn thuộc tính toàn cầu nói trên từ danh sách thả xuống và chọn Thêm
Chọn Chọn tất cả để thêm tất cả các giá trị từ đó vào sản phẩm biến [nếu có]
Quan trọng nhất là chọn hộp kiểm Được sử dụng cho các biến thể để sử dụng chúng cho các biến thể
Chọn Lưu thuộc tính

Thuộc tính tùy chỉnh

Để thêm một thuộc tính mới dành riêng cho sản phẩm này

Chọn Thuộc tính sản phẩm tùy chỉnh và nhấp vào Thêm
Đặt tên cho thuộc tính [e. g. , Kích thước]
Đặt các giá trị được phân tách bằng một đường ống thẳng đứng, | [e. g. , Bé nhỏ. Trung bình. Lớn]
Bật hộp kiểm Được sử dụng cho các biến thể
Chọn Lưu thuộc tính

Thêm thuộc tính tùy chỉnh

Thêm giá trị thuộc tính tùy chỉnh

Thêm biến thể

↑ Quay lại đầu trang

Với các thuộc tính được tạo và lưu để thêm một biến thể, hãy chuyển đến phần Biến thể trong hộp meta Dữ liệu sản phẩm

Thêm biến thể theo cách thủ công

Chọn Thêm biến thể từ menu thả xuống và chọn Bắt đầu
Chọn thuộc tính cho biến thể của bạn. Để thay đổi dữ liệu bổ sung, hãy nhấp vào biểu tượng hình tam giác để mở rộng biến thể
Chỉnh sửa mọi dữ liệu có sẵn. Trường bắt buộc duy nhất là Giá thông thường
Chọn Lưu thay đổi

Tạo tất cả các biến thể có thể

Chọn Tạo các biến thể từ tất cả các thuộc tính để WooC Commerce tạo mọi tổ hợp biến thể có thể có từ các thuộc tính của bạn và giá trị của chúng, rồi chọn Bắt đầu

Nó sẽ tạo một biến thể mới cho mỗi và mọi sự kết hợp có thể có của các thuộc tính biến thể [tối đa 50 mỗi lần chạy]. Nếu bạn có nhiều kết hợp khả thi hơn, bạn có thể chạy lại

Ví dụ: nếu bạn có hai thuộc tính – màu sắc [với các giá trị xanh lam và xanh lục] và kích thước [với các giá trị lớn và nhỏ], nó sẽ tạo ra các biến thể sau

lớn màu xanh
Màu xanh lá cây lớn
Màu xanh nhỏ
Màu xanh lá cây nhỏ

Ghi chú. Nếu sau này bạn thêm các thuộc tính bổ sung, thì có thể phải xác định lại các biến để các kết hợp biến thể hoạt động chính xác. Ngoài ra, hãy lưu ý chức năng/hành vi lựa chọn này khi sử dụng hơn 30 biến thể

Chỉnh sửa nhiều biến thể

Nếu bạn có hơn 15 biến thể, hãy sử dụng các nút để điều hướng tiến và lùi trong danh sách. Mỗi khi bạn điều hướng đến một tập hợp các biến thể mới, tập hợp trước đó sẽ được lưu lại. Điều này đảm bảo rằng tất cả các thay đổi được lưu

Đặt mặc định

↑ Quay lại đầu trang

Đặt mặc định bạn thích trên các biến thể. Trong ví dụ này, không có giá trị biểu mẫu mặc định nào được đặt, vì vậy người dùng có thể chọn bất kỳ màu sắc và kích thước nào ngay từ trang sản phẩm

Nếu bạn muốn một biến thể nhất định đã được chọn khi người dùng truy cập trang sản phẩm, hãy chọn các giá trị biểu mẫu mặc định. Điều này cũng cho phép nút Thêm vào giỏ hàng tự động xuất hiện trên các trang sản phẩm khác nhau

Bạn chỉ có thể đặt giá trị mặc định sau khi đã tạo ít nhất một biến thể

Thêm dữ liệu biến thể

↑ Quay lại đầu trang

Mỗi biến thể có thể có các thuộc tính sau

Tổng quan

Đã bật – Bật hoặc tắt biến thể
Có thể tải xuống – Nếu đây là biến thể có thể tải xuống
Ảo – Nếu sản phẩm này không phải là sản phẩm thực tế hoặc được vận chuyển, cài đặt vận chuyển sẽ bị xóa
Giá thông thường [bắt buộc] – Đặt giá cho biến thể này
Giá ưu đãi [không bắt buộc] – Đặt giá cho biến thể này khi giảm giá
Trạng thái thuế – Chịu thuế, chỉ giao hàng, không có
Loại thuế – Loại thuế cho biến thể này. Hữu ích nếu bạn đang cung cấp các biến thể bao gồm các nhóm thuế khác nhau
Số lượng chứng khoán – Hiển thị nếu Quản lý chứng khoán? . Cho phép đặt mức tồn kho hiện tại cho biến thể
Cho phép Backorders? . Cho phép đặt nếu các đơn hàng dự trữ được cho phép đối với biến thể;
Ngưỡng tồn kho thấp – Hiển thị nếu Quản lý tồn kho? . Khi lượng hàng của biến thể đạt đến mức này, bạn sẽ nhận được email thông báo. Nếu không được đặt, ngưỡng toàn bộ sản phẩm sẽ được sử dụng [xem phần Quản lý khoảng không quảng cáo bên dưới]
Tệp có thể tải xuống – Hiển thị nếu Có thể tải xuống được chọn. Thêm [các] tệp để khách hàng tải xuống
Giới hạn tải xuống – Hiển thị nếu Có thể tải xuống được chọn. Đặt số lần khách hàng có thể tải xuống [các] tệp. Để trống không giới hạn
Hết hạn tải xuống – Hiển thị nếu Có thể tải xuống được chọn. Đặt số ngày trước khi tải xuống hết hạn sau khi mua

Quản lý hàng tồn kho

Hàng tồn kho cho các sản phẩm biến đổi có thể được quản lý ở cấp độ sản phẩm và biến thể

Chọn cách quản lý kho bằng cách bật Bật quản lý kho ở cấp độ sản phẩm trên tab Hàng tồn kho

Các cài đặt sau khả dụng nếu bạn chọn quản lý kho ở cấp độ sản phẩm

SKU – Nếu bạn sử dụng SKU, hãy đặt SKU hoặc để trống để sử dụng SKU của sản phẩm
Quản lý chứng khoán?
Số lượng chứng khoán – Hiển thị nếu Quản lý chứng khoán được chọn. Nhập số lượng. Kho cho biến thể cụ thể hoặc để trống để sử dụng cài đặt kho của sản phẩm
Allow Backorders – Chọn cách xử lý backorders
Ngưỡng hàng sắp hết – Khi lượng hàng của biến thể đạt đến mức này, bạn sẽ nhận được email thông báo
Bán riêng lẻ? . [Cài đặt này được sử dụng cho chính sản phẩm. Bạn không thể đặt một biến thể cụ thể chỉ được bán một lần cho mỗi đơn hàng]

Nếu ngưỡng Sắp hết hàng không được đặt thì giá trị mặc định cho toàn cửa hàng sẽ được sử dụng. Bạn có thể đặt mặc định này trong tab Sản phẩm – Khoảng không quảng cáo của cài đặt WooC Commerce

Chọn quản lý kho cho các biến thể riêng lẻ cho phép bạn chỉnh sửa các thuộc tính giống nhau cho từng biến thể

Đặt Trạng thái Chứng khoán có thể được áp dụng cho tất cả các biến thể cùng một lúc thành Còn hàng hoặc Hết hàng. Cập nhật hàng loạt trong Biến thể

Đang chuyển hàng

Trọng lượng – Trọng lượng cho biến thể hoặc để trống để sử dụng trọng lượng của sản phẩm
Kích thước – Chiều cao, chiều rộng và chiều dài cho biến thể hoặc để trống để sử dụng kích thước của sản phẩm
Lớp vận chuyển – Lớp vận chuyển có thể ảnh hưởng đến việc vận chuyển. Đặt cái này nếu nó khác với sản phẩm

Sản phẩm được liên kết

Upsell
bán chéo
nhóm

Nếu các trường SKU, trọng lượng, kích thước và kho hàng không được đặt thì nó sẽ kế thừa các giá trị được gán cho biến sản phẩm. Các trường giá phải được đặt cho mỗi biến thể

Thêm hình ảnh vào Variation

↑ Quay lại đầu trang

Mở rộng biến thể
Nhấp vào trình giữ chỗ hình ảnh màu xanh lam [ảnh chụp màn hình]
Chọn hình ảnh bạn muốn sử dụng
Tiết kiệm

Chỉnh sửa hàng loạt

↑ Quay lại đầu trang

Bạn có thể chỉnh sửa hàng loạt các biến thể bằng cách chọn phần dữ liệu cụ thể mà bạn muốn từ danh sách thả xuống. Trong ví dụ này, tôi muốn chỉnh sửa giá cho tất cả các biến thể

Những gì khách hàng nhìn thấy

↑ Quay lại đầu trang

Ở giao diện người dùng, khi xem một sản phẩm có thể thay đổi, người dùng sẽ thấy các hộp thả xuống để chọn các tùy chọn biến thể. Việc chọn các tùy chọn sẽ hiển thị thông tin về biến thể, bao gồm cả giá và lượng hàng có sẵn

Nếu người dùng cố gắng nhấp vào nút thêm vào giỏ hàng bị mờ đi trước khi chọn một thuộc tính, một thông báo sẽ xuất hiện yêu cầu họ chọn một số thuộc tính

Trong trang lưu trữ sản phẩm, Thêm vào giỏ hàng không hiển thị vì phải chọn một biến thể trước khi thêm vào giỏ hàng trên trang sản phẩm

Chức năng / hành vi cho hơn 30 biến thể

↑ Quay lại đầu trang

Nếu một sản phẩm có thể có hơn 30 biến thể, thì trước tiên, khách hàng sẽ phải chọn tất cả các thuộc tính có sẵn trước khi họ có thể xem liệu sản phẩm có hàng hay có sẵn hay không

Ví dụ: nếu bạn có Áo hoodie, có sẵn năm kích cỡ và ba màu, thì điều này sẽ tạo ra 125 biến thể [năm mũ ba]. Nếu bạn xóa năm biến thể trong số này, khách hàng vẫn có thể chọn biến thể đó từ giao diện người dùng nhưng họ sẽ không thấy biến thể này không khả dụng cho đến khi họ chọn nút Thêm vào giỏ hàng

Bạn có thể ghi đè điều này bằng cách thay đổi ngưỡng biến thể Ajax. Có một số chi tiết tập trung vào nhà phát triển trong bài viết tài liệu này

Cài đặt và kích hoạt một chủ đề con

Thay đổi hiển thị giá

kết thúc

Đoạn mã PHP. Tự động cập nhật giá sản phẩm thay đổi với giá thay đổi hiện tại [Cộng thêm. Ẩn giá thay đổi]

Thêm một sản phẩm biến

Đặt loại sản phẩm

Thêm thuộc tính để sử dụng cho các biến thể

Thuộc tính toàn cầu

Thuộc tính tùy chỉnh

Thêm biến thể

Thêm biến thể theo cách thủ công

Tạo tất cả các biến thể có thể

Chỉnh sửa nhiều biến thể

Đặt mặc định

Thêm dữ liệu biến thể

Tổng quan

Quản lý hàng tồn kho

Đang chuyển hàng

Sản phẩm được liên kết

Thêm hình ảnh vào Variation

Chỉnh sửa hàng loạt

Những gì khách hàng nhìn thấy

Chức năng / hành vi cho hơn 30 biến thể

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề