Xóa nút Thêm vào giỏ hàng cho các sản phẩm cụ thể WooC Commerce

Không có gì bí mật khi nút “Thêm vào giỏ hàng” là một trong những yếu tố quan trọng nhất trên trang sản phẩm WooC Commerce. Rốt cuộc, đó là nút cho phép khách hàng thêm sản phẩm của bạn vào giỏ hàng của họ và cuối cùng là mua hàng

Mặc dù nút “Thêm vào giỏ hàng” rất cần thiết để bán hàng, nhưng có một số trường hợp bạn có thể muốn ẩn nút này. Ví dụ: bạn có thể muốn ẩn nút trên các sản phẩm đã hết hàng hoặc trên các sản phẩm chỉ có sẵn để mua trực tiếp [e. g. vé tham dự sự kiện]

May mắn thay, việc ẩn nút “Thêm vào giỏ hàng” trong WooC Commerce tương đối dễ thực hiện. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách ẩn nút “Thêm vào giỏ hàng” trong WooC Commerce bằng hai phương pháp khác nhau

Phương pháp 1. Ẩn nút “Thêm vào giỏ hàng” bằng Plugin

Cách dễ nhất để ẩn nút “Thêm vào giỏ hàng” trong WooC Commerce là sử dụng plugin. Chúng tôi khuyên bạn nên sử dụng plugin Ẩn Thêm vào giỏ hàng. Đó là một plugin miễn phí có sẵn từ kho plugin WordPress

Để sử dụng plugin Ẩn Thêm vào giỏ hàng, chỉ cần cài đặt và kích hoạt nó trên trang web WordPress của bạn. Sau khi được kích hoạt, hãy đi tới Cài đặt → Ẩn Thêm vào giỏ hàng và chọn vai trò người dùng mà bạn muốn ẩn nút “Thêm vào giỏ hàng”

Theo mặc định, plugin sẽ ẩn nút “Thêm vào giỏ hàng” đối với khách và khách hàng. Tuy nhiên, bạn cũng có thể chọn ẩn nó khỏi quản trị viên và quản lý cửa hàng

Sau khi thực hiện lựa chọn của mình, hãy nhấp vào nút “Lưu thay đổi” ở cuối trang và bạn đã hoàn tất. Nút “Thêm vào giỏ hàng” hiện sẽ bị ẩn khỏi các vai trò người dùng đã chọn trên cửa hàng WooC Commerce của bạn

MẸO CHUYÊN NGHIỆP. Nếu bạn đang cân nhắc ẩn nút Thêm vào giỏ hàng trong WooC Commerce, hãy lưu ý rằng điều này có thể gây ra những hậu quả không mong muốn. Ví dụ: ẩn nút có thể khiến khách hàng khó mua sản phẩm của bạn hơn, điều này có thể dẫn đến mất doanh số bán hàng. Ngoài ra, việc ẩn nút có thể khiến bạn khó quản lý khoảng không quảng cáo của mình hơn vì bạn sẽ không thể theo dõi doanh số một cách dễ dàng

Phương pháp 2. Ẩn nút “Thêm vào giỏ hàng” bằng CSS tùy chỉnh

Nếu bạn không muốn sử dụng plugin, thì bạn cũng có thể ẩn nút “Thêm vào giỏ hàng” bằng cách thêm một số CSS tùy chỉnh vào trang web WordPress của mình. Mặc dù phương pháp này đòi hỏi nhiều bí quyết kỹ thuật hơn một chút, nhưng nó vẫn tương đối dễ thực hiện

Trước tiên, bạn sẽ cần truy cập trình chỉnh sửa mã trang web WordPress của mình. Nếu bạn không quen với cách thực hiện việc này, hãy xem hướng dẫn của chúng tôi về cách kết nối với WordPress bằng FTP

Khi bạn đã kết nối, hãy điều hướng đến thư mục /wp-content/themes/ của trang web của bạn và tìm thư mục của chủ đề đang hoạt động của bạn [e. , /wp-content/themes/theme-name/]. Khi bạn đã tìm thấy thư mục chủ đề của mình, hãy mở thư mục đó và tìm tệp có tên style. css. Nhấp chuột phải vào tệp đó và chọn Xem/Chỉnh sửa

Khi bạn mở phong cách. css trong trình chỉnh sửa mã của bạn, hãy tìm phần ở đầu tệp có tên /* Start Custom CSS */. Nếu phần này không tồn tại trong tệp của bạn, hãy tạo nó bằng cách thêm dòng mã sau. /* Bắt đầu CSS tùy chỉnh */. Bên dưới phần này, thêm quy tắc CSS sau

thêm vào giỏ hàng { hiển thị. không ai;

Quy tắc CSS này sẽ yêu cầu WooC Commerce không hiển thị nút “Thêm vào giỏ hàng” trên bất kỳ trang sản phẩm nào. Khi bạn đã thêm quy tắc này, hãy lưu các thay đổi của bạn và tải kiểu lên. css trở lại máy chủ của bạn. Giờ đây, nút “Thêm vào giỏ hàng” sẽ bị ẩn trên tất cả các trang sản phẩm của bạn

Phần kết luận

Việc ẩn nút “Thêm vào giỏ hàng” có thể hữu ích trong một số trường hợp, chẳng hạn như khi sản phẩm hết hàng hoặc khi sản phẩm chỉ có sẵn để mua trực tiếp [e. , vé cho một sự kiện]. May mắn thay, việc ẩn nút “Thêm vào giỏ hàng” trong WooC Commerce tương đối dễ dàng – sử dụng plugin hoặc thêm một số mã CSS tùy chỉnh

10 câu trả lời câu hỏi liên quan được tìm thấy

Làm cách nào để ẩn nút Thêm vào giỏ hàng trong WooC Commerce?

Có một số cách để ẩn giỏ hàng trong WooC Commerce. Một cách đơn giản là xóa biểu tượng giỏ hàng khỏi tiêu đề. Điều này có thể được thực hiện bằng cách vào Giao diện > Menu và bỏ chọn hộp “Hiển thị Giỏ hàng”

Có nhiều hơn MỘT cách để ẩn/xóa nút ‘Thêm vào giỏ hàng’ trong WooC Commerce. Rốt cuộc, nó là một nút, vì vậy bạn có thể ẩn nó thông qua CSS, JS hoặc PHP

Cách tiếp cận tiếp theo, trong hầu hết các tình huống, là ẩn nó qua PHP. Nhưng không phải tất cả các nhà phát triển WooC Commerce đều biết cách ẩn nút đúng cách

Trong khi làm việc với plugin Bộ lập lịch WooC Commerce, tôi thấy cần phải ẩn có chọn lọc nút Thêm vào giỏ hàng của WooC Commerce. Tôi còn khá mới đối với WooC Commerce. Vì vậy, cách tiếp cận rõ ràng mà tôi đã thực hiện là thực hiện tìm kiếm trên Google

Không có hại được thực hiện ở đó, phải không. …. đúng??

Chà, hóa ra Google không có câu trả lời đúng

Tôi sẽ giải thích

Kết quả tìm kiếm có thể hướng dẫn bạn… nhưng không phải lúc nào cũng đi đúng hướng

Đây là kết quả tìm kiếm nhanh trên Google, 'xóa nút thêm vào giỏ hàng, thương mại điện tử' đã có sẵn cho tôi

Một vài kết quả đầu tiên trông khá tốt. Chúng đến từ các nguồn đáng tin cậy, như wordpress. org, WooTheme, Themelocation và PootlePress. Theo một nghĩa nào đó, tất cả những điều này đều yêu cầu tôi làm điều tương tự;

• woocommerce_template_loop_add_to_cart
• woocommerce_template_single_add_to_cart

Đây là mã cho cùng

remove_action[ 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' ];
remove_action[ 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ];

Lý do là nút ‘Thêm vào giỏ hàng’ được hiển thị trên hai thao tác này

Điều này nghe có vẻ hoàn hảo. Đó chỉ là những gì tôi cần

Tôi đã không suy nghĩ thêm và tiếp tục và sử dụng nó. Nút thêm vào giỏ hàng đã bị xóa khỏi các trang sản phẩm WooC Commerce cần thiết

Bây giờ, trong sách quy tắc mã hóa của tôi, có một quy tắc mà tôi luôn tuân theo. 'Kiểm tra bất kỳ thay đổi nào trước khi bạn tiếp tục'. Vì vậy, tôi đã làm, và…

ồ ồ

Những thay đổi của tôi đã ảnh hưởng đến plugin khác trên trang web. 🙁

Tôi đã phải điều tra lý do cho việc này. Và trong khi làm như vậy, tôi nhận ra rằng phương pháp mà tôi đã chọn để ẩn nút thêm vào giỏ hàng là không chính xác. Nhưng may mắn thay, tôi đã tìm ra giải pháp phù hợp

Khi sử dụng lại mã… Hiểu chức năng của từng dòng trước khi sử dụng

Thông thường, các nhà phát triển như bạn và tôi tìm đến Google để tìm câu trả lời. Chúng tôi cũng nghĩ như vậy- “Tôi không thể là người duy nhất gặp phải vấn đề này”, “Chắc chắn có những người khác đã giải quyết vấn đề này” – Và bạn cố gắng tìm kiếm câu trả lời, để tiết kiệm thời gian

Tôi không phản đối việc sử dụng lại mã

Nhưng bạn phải điều tra mã và kiểm tra kỹ trước khi sử dụng

Vấn đề tôi gặp phải không nghiêm trọng. Nhưng hai dòng mã có vẻ vô tội, chứa một số đạn mà tôi không biết là mình đã giải phóng

Bạn thấy đấy, những hành động này [là các chức năng], kích hoạt các móc bổ sung. Ví dụ: hàm woocommerce_template_single_add_to_cart nằm trong bao gồm/wc-template-functions. php, chứa đoạn mã sau

function woocommerce_template_single_add_to_cart[]
{
    global $product;
    do_action[ 'woocommerce_' . $product->product_type . '_add_to_cart' ];
}

Như bạn có thể thấy, nó gọi một phương thức dựa trên loại sản phẩm. Vì vậy, nếu loại sản phẩm là 'Đơn giản', nó sẽ gọi woocommerce_single_add_to_cart, gọi một chức năng mẫu khác

Vì vậy, cuối cùng, việc loại bỏ hook dẫn đến việc chúng tôi xóa các tệp mẫu cho mỗi sản phẩm WooC Commerce. Và mặc dù ý định tháo móc là để ẩn nút thêm vào giỏ hàng, nhưng cuối cùng nó lại loại bỏ nhiều thứ hơn thế

Giải pháp phù hợp thường được ghi lại chính thức

Bây giờ như đã đề cập, điều tra thêm đã dẫn tôi đến câu trả lời đúng. Và với một plugin như WooC Commerce, cách phù hợp để xóa nút thêm vào giỏ hàng là sử dụng một bộ lọc đơn giản

Nếu bạn xem mã sản phẩm đơn lẻ/thêm vào giỏ hàng/đơn giản. php, bạn sẽ nhận thấy một bộ lọc đơn giản

global $product;
if [ ! $product->is_purchasable[] ] {
    return;
}

Ghi chú nhanh của WooC Commerce về mục đích móc này được sử dụng

Đoạn mã trên được chạy trước khi bất kỳ chức năng nào khác được kiểm tra. Nếu bộ lọc is_purchasable được đặt thành true cho sản phẩm, thì nút 'Thêm vào giỏ hàng' sẽ hiển thị, nếu không thì nút này sẽ bị ẩn

Và có câu trả lời

Vì vậy, bạn chỉ cần thêm vào như sau

add_filter[ 'woocommerce_is_purchasable', '__return_false'];

Dòng mã nhỏ này sẽ khiến sản phẩm không thể mua được và thực hiện theo cách khá đơn giản và sẽ không có móc hoặc mẫu nào bị xóa, do đó sẽ không có vấn đề không tương thích nào phát sinh

Khá thường xuyên, chúng tôi chuyển sang Google [hoặc Bing nếu bạn muốn làm như vậy] để tìm kiếm câu trả lời. Nhưng không có gì đảm bảo rằng câu trả lời phổ biến nhất là câu trả lời đúng

Theo nguyên tắc chung, hãy luôn nhớ thực hiện các nghiên cứu cần thiết trước khi triển khai giải pháp

Đó là tất cả từ tôi bây giờ. Hẹn gặp lại lần sau, chúc bạn viết mã vui vẻ 🙂

P. S – Nếu bạn cần bất kỳ trợ giúp nào về Tùy chỉnh hoặc Phát triển Woocommerce, vui lòng Liên hệ với chúng tôi. ?

• Mẹo & Thủ thuật WordPress
• Với các thẻ. Thêm vào giỏ hàng, WooC Commerce, Tùy chỉnh WooC Commerce

Chia sẻ.

• Varun S

Xin lưu ý, một số liên kết trong bài đăng trên blog này có thể là liên kết liên kết. Điều này có nghĩa là nếu bạn tiếp tục mua sản phẩm bằng liên kết như vậy, chúng tôi sẽ nhận được một khoản hoa hồng nhỏ [bạn không phải trả thêm phí]. Điều này giúp chúng tôi hỗ trợ blog và sản xuất nội dung miễn phí. Chúng tôi chỉ giới thiệu những sản phẩm mà chúng tôi hợp tác hoặc yêu thích. cảm ơn sự hỗ trợ của bạn