Làm cách nào để sửa nút thêm vào giỏ hàng của WooC Commerce?

Nút Thêm vào giỏ hàng chắc chắn là một trong những yếu tố quan trọng nhất trên bất kỳ cửa hàng WooC Commerce nào vì đây là nút trực tiếp dẫn đến doanh số và doanh thu

Do đó, nút Thêm vào giỏ hàng càng tốt thì cửa hàng trực tuyến của bạn càng thu được nhiều lợi nhuận. Trong hướng dẫn này, chúng tôi sẽ trình bày một số cách để bạn tùy chỉnh nút Thêm vào giỏ hàng của WooC Commerce

Mục lục

[Hiện an]

1. Nút Thêm vào giỏ hàng mặc định trong WooC Commerce
2. Tại sao bạn tùy chỉnh nút Thêm vào giỏ hàng của WooC Commerce?
3. Làm cách nào để tùy chỉnh nút Thêm vào giỏ hàng trong WooC Commerce?
   1. 1. Thay đổi văn bản nút thêm vào giỏ hàng của WooC Commerce
   2. 2. Thay thế văn bản Thêm vào giỏ hàng của WooC Commerce bằng các biểu tượng
   3. 3. Thêm văn bản trước/sau nút Thêm vào giỏ hàng trên một trang sản phẩm
      1. Thêm văn bản trước nút Thêm vào giỏ hàng
      2. Thêm văn bản sau nút Thêm vào giỏ hàng
   4. 4. Thay đổi màu nút Thêm vào giỏ hàng của WooC Commerce
      1. Thay đổi màu nút Thêm vào giỏ hàng của WooC Commerce trên toàn bộ trang web của bạn
      2. Thay đổi màu nút WooC Commerce Thêm vào giỏ hàng khác nhau trong các trang khác nhau
      3. Thay đổi màu nút Thêm vào giỏ hàng của WooC Commerce bằng mã CSS
   5. 5. Tạo nút Thêm vào giỏ hàng cố định trên WooC Commerce
   6. 6. Thêm nút Mua hàng trực tiếp cùng với nút Thêm vào giỏ hàng
   7. 7. Hiển thị các nút Thêm vào giỏ hàng ở mọi nơi trên trang web WordPress của bạn
   8. 8. Tùy chỉnh thông báo đã thêm vào giỏ hàng
4. Làm cách nào để khắc phục nút Thêm vào giỏ hàng của WooC Commerce không hoạt động?
   1. Nhập thông tin sản phẩm hoàn chỉnh trong WooC Commerce
   2. Kiểm tra khả năng tương thích của WooC Commerce với các plugin khác
   3. Khắc phục sự cố liên quan đến mã
   4. Sự cố phía máy chủ [mod_security]
   5. Khắc phục các sự cố liên quan đến chủ đề
      1. 1. Khôi phục về Phiên bản chủ đề trước hoặc Cập nhật nó
      2. 2. Thay đổi mã của chủ đề
      3. 3. Chuyển sang chủ đề WooC Commerce khác
5. Phần kết luận

Nút Thêm vào giỏ hàng mặc định trong WooC Commerce

Trước khi hiểu sâu hơn về cách tạo nút Thêm vào giỏ hàng tùy chỉnh WooC Commerce cho một sản phẩm, hãy xem nút thêm vào giỏ hàng WooC Commerce mặc định

Trong WooC Commerce mặc định, ngoại trừ các sản phẩm bên ngoài/liên kết thuộc về các nguồn khác, nút Thêm vào giỏ hàng luôn xuất hiện trên tất cả các trang sản phẩm đơn lẻ vì chúng là nơi khách hàng thường mua hàng

Nó khá đơn giản. Chỉ cần làm theo các hướng dẫn dưới đây

1. Cài đặt và kích hoạt plugin Nút thêm vào giỏ hàng tùy chỉnh WooC Commerce trên trang web WordPress của bạn

2. Điều hướng đến Giao diện > Tùy biến > WooC Commerce > Thêm vào giỏ hàng từ bảng điều khiển WordPress

3. Đánh dấu vào ô Hiển thị biểu tượng thêm vào giỏ hàng

4. Đánh dấu vào hộp văn bản Ẩn thêm vào giỏ hàng

5. Cuối cùng, nhấp vào nút Xuất bản

3. Thêm văn bản trước/sau nút Thêm vào giỏ hàng trên một trang sản phẩm

Cách thứ ba bạn có thể thực hiện để tùy chỉnh nút Thêm vào giỏ hàng trong WooC Commerce là thêm văn bản vào trước hoặc sau nút Thêm vào giỏ hàng trên các trang sản phẩm

Thêm văn bản trước nút Thêm vào giỏ hàng

Thông thường sẽ có mô tả ngắn về sản phẩm phía trên nút Thêm vào giỏ hàng. Tuy nhiên, bạn có thể đề cập đến thông báo, bảo đảm, giao hàng miễn phí hoặc chính sách hoàn trả, v.v. trước tùy chọn Thêm vào giỏ hàng

Ví dụ: bạn có thể thêm văn bản “Giao hàng miễn phí“ bằng cách sử dụng câu lệnh echo

add_filter[ 'woocommerce_loop_add_to_cart_link', 'woostify_before_after_btn', 10, 3 ];
 add_action[ 'woocommerce_before_add_to_cart_button', 'woostify_before_add_to_cart_btn' ];
 function woostify_before_add_to_cart_btn[]{
     echo 'Free Shipping';
 }

Sao chép và dán mã ở trên vào hàm. php của chủ đề tệp, sau đó nhấp vào Cập nhật tệp để lưu mọi thứ

Ngoài ra, bạn có thể kèm theo giá sản phẩm. [add_to_cart=”96″ show_price”=”true”]

Đối với sản phẩm đơn giản sẽ hiện nút thêm vào giỏ hàng. Tuy nhiên, nút “Chọn tùy chọn” sẽ được hiển thị cho các sản phẩm khác nhau

8. Tùy chỉnh thông báo đã thêm vào giỏ hàng

Ngoài việc tùy chỉnh nút thêm vào giỏ hàng, bạn cũng có thể chỉnh sửa thông báo đã thêm vào giỏ hàng. Cách dễ nhất để tùy chỉnh nó là dán tập lệnh sau vào “chức năng. tập tin php”

add_filter[ 'wc_add_to_cart_message_html', 'woostify_custom_add_to_cart_message' ];
function woositfy_custom_add_to_cart_message[] {
   $message = 'The item has been added to cart. Thanks for shopping with us!' ;
   return $message;
}

Trong trường hợp này, chúng tôi sẽ thay đổi thông báo thành “Mặt hàng đã được thêm vào giỏ hàng của bạn. Cảm ơn đã đi mua sắm cùng chúng tôi. ”

Để cá nhân hóa, bạn có thể hiển thị tên sản phẩm như sau

add_filter[ 'wc_add_to_cart_message', 'woostify_custom_wc_add_to_cart_message', 10, 2 ]; 
 
function woostify_custom_wc_add_to_cart_message[ $message, $product_id ] { 
    $message = sprintf[esc_html__['%s has been added to your cart. Thank you for shopping!','tm-organik'], get_the_title[ $product_id ] ]; 
    return $message; 

Bằng cách thêm đoạn mã trên, khách hàng của bạn sẽ thấy một cái gì đó như thế này

Ngoài ra, bạn có thể xóa hoàn toàn thông báo đã thêm vào giỏ hàng. Tất cả những gì bạn cần làm là thêm đoạn script sau

add_filter[ 'wc_add_to_cart_message_html', '__return_null' ];

Làm cách nào để khắc phục nút Thêm vào giỏ hàng của WooC Commerce không hoạt động?

Trên đây là một số cách để bạn làm cho WooC Commerce thay đổi nút Thêm vào giỏ hàng để làm cho nó hữu ích hơn. Trong một số trường hợp, có một số lý do khiến nút Thêm vào giỏ hàng WooC Commerce không hoạt động trên cửa hàng của bạn, chẳng hạn như

• Xung đột Chủ đề hoặc Plugin
• Sự cố máy chủ
• vấn đề về mã

Dưới đây là các bước để sửa nút Thêm vào giỏ hàng bị thiếu trong WooC Commerce

Nhập thông tin sản phẩm hoàn chỉnh trong WooC Commerce

Nút thêm vào giỏ hàng chỉ hiển thị khi bạn cung cấp đầy đủ thông tin cần thiết về sản phẩm

Nếu một sản phẩm được trang web công nhận hoàn toàn là sản phẩm đã hoàn thành và được giới thiệu, thì nút Thêm vào giỏ hàng sẽ không được hiển thị cho sản phẩm đó. Để khắc phục sự cố này, bạn cần đảm bảo rằng bạn đã điền tất cả các thông tin bắt buộc về sản phẩm như trọng lượng, mô tả, kích thước, ID sản phẩm, giá và SKU. Kiểm tra tất cả mọi thứ một cách cẩn thận và đảm bảo rằng bạn không để trống bất kỳ trường bắt buộc nào. Sau khi thông tin được thêm vào, nút thêm vào giỏ hàng sẽ xuất hiện

Kiểm tra khả năng tương thích của WooC Commerce với các plugin khác

WooC Commerce có thể gặp nhiều lỗi khi các plugin xung đột với nhau. Bạn phải đang sử dụng plugin hoặc mã, không phải tất cả đều tương thích với WooC Commerce. Đây là vấn đề phổ biến nhất và dễ kiểm tra và giải quyết nhất

Trong những trường hợp như vậy, bạn cần tắt tất cả các plugin, sau đó bật lại từng plugin một cho đến khi bạn tìm thấy plugin gây ra sự cố. Bằng cách xóa plugin bị lỗi, nút Thêm vào giỏ hàng WooC Commerce sẽ được bật trên trang web của bạn

Khắc phục sự cố liên quan đến mã

Có thể có một số vấn đề với phần mã hóa mặc định của WordPress. Theo mặc định, nếu bạn đặt cùng một mức giá cho các biến khác nhau của sản phẩm, WooC Commerce sẽ ẩn giá và nút Thêm vào giỏ hàng cho sản phẩm này và các sản phẩm khác không có biến

Nếu bạn đang gặp sự cố này, hãy sao chép và dán đoạn mã sau vào hàm PHP

add_filter['woocommerce_show_variation_price’, function[] { return TRUE;}];

Bằng cách đó, vấn đề thiếu nút Thêm vào giỏ hàng của WooC Commerce sẽ được giải quyết

Sự cố phía máy chủ [mod_security]

Một vấn đề khác gián tiếp khiến nút Thêm vào giỏ hàng của WooC Commerce bị thiếu là không thể đọc mã jQuery. Sự cố này xảy ra khi mod_security của máy chủ của trang web của bạn đã hết hạn và sử dụng các quy tắc cũ

Để kiểm tra trường hợp này, hãy truy cập công cụ dành cho nhà phát triển trình duyệt của bạn [công cụ của Nhà phát triển Chrome chẳng hạn] và xem lỗi JS có xuất hiện hay không. “. jQuery. bánh quy. tối thiểu. js không được tìm thấy”

Trường hợp bạn gặp lỗi trên liên hệ ngay với nhà cung cấp hosting để họ kiểm tra giúp bạn

Khắc phục các sự cố liên quan đến chủ đề

Có một số lý do khiến nút Thêm vào giỏ hàng của WooC Commerce không hoạt động trên các trang cửa hàng của bạn do một số chủ đề WooComerce nhất định. Dưới đây là một số cách dễ nhất để khắc phục các sự cố như vậy

1. Khôi phục về Phiên bản chủ đề trước hoặc Cập nhật nó

Cách đầu tiên bạn có thể thử là sử dụng phiên bản cũ hơn của chủ đề hoặc cập nhật nó. Thay đổi hoàn toàn chủ đề có thể khắc phục nút Thêm vào giỏ hàng bị thiếu trong cửa hàng WooC Commerce

2. Thay đổi mã của chủ đề

Trong trường hợp bạn không thành công với cách đầu tiên, bạn có thể làm theo các bước bên dưới để khắc phục sự cố của mình

Trong bảng điều khiển WordPress của bạn, đi tới Giao diện> Trình chỉnh sửa chủ đề của chủ đề chính [không phải chủ đề con như chúng tôi làm trong các phần trên] ở phía bên phải của WordPress, tìm Chỉ mục. php [Mẫu chỉ mục chính] hoặc Đơn. php [Bài đăng đơn] [Tên tệp có thể khác nhau trong các chủ đề khác nhau]

Nếu bạn thấy một chỉ số. tập tin php, bấm vào nó. Nếu không, bấm vào đơn. tập tin php. Trong cả hai tệp, cuộn xuống cho đến khi bạn thấy dòng get_template_part

Bây giờ sao chép dòng đó và thay thế bằng đoạn mã sau

if [ is_singular[ 'product' ] ] { wc_get_template_part[ 'content', 'single-product' ]; } else { //paste the line you copied here [replace the whole line, including //] }

Đảm bảo dán dòng mã bạn đã sao chép vào khối thứ hai. Sau khi thêm vào sẽ như thế này

if [ is_singular[ 'product' ] ] { wc_get_template_part[ 'content', 'single-product' ]; } else { get_template_part[ 'template-parts/single' ];} 

Cuối cùng bấm nút Cập nhật tệp để lưu tệp rồi quay lại các trang của shop kiểm tra nút Thêm vào giỏ hàng có xuất hiện không

3. Chuyển sang chủ đề WooC Commerce khác

Nếu bạn đã thử 2 cách trên mà vẫn không khắc phục được. Bạn có thể nghĩ đến việc thay đổi chủ đề của mình. Có nhiều chủ đề WordPress khác nhau nhưng không phải tất cả chúng đều hỗ trợ WooC Commerce. Nếu chủ đề của bạn không hỗ trợ WooC Commerce, nút Thêm vào giỏ hàng có thể không hoạt động trên trang web của bạn

Nếu bạn đang gặp trường hợp này, bạn nên chuyển sang chủ đề khác dành cho WooC Commerce. Chúng tôi thực sự khuyên bạn nên sử dụng chủ đề Woostify. Đây là một chủ đề mạnh mẽ hoàn toàn tập trung vào WooC Commerce, có thể loại bỏ tất cả các sự cố không mong muốn khiến nút Thêm vào giỏ hàng bị thiếu trên cửa hàng WooC Commerce của bạn. Như đã đề cập trước đó, Woostify cho phép bạn kích hoạt và tạo các nút Thêm vào giỏ hàng tùy chỉnh WooC Commerce với các cú nhấp chuột đơn giản và hầu như không có dòng mã nào

Tải xuống Woostify ngay

Phần kết luận

Có nhiều phương pháp khác nhau để tùy chỉnh nút Thêm vào giỏ hàng của WooC Commerce, hầu hết trong số đó liên quan đến việc thêm mã vào tệp chủ đề của bạn. Để thực hiện thay đổi với những cách này, bạn cần có kiến ​​thức lập trình. Mặc dù, thật dễ dàng để thực hiện các bước đó, nhưng một khó khăn mà bạn có thể gặp phải là các tùy chỉnh của bạn có thể bị mất khi cập nhật chủ đề

Từ đó, bạn nên chọn cách đơn giản hơn là sử dụng chủ đề Woostify. Nó cung cấp các cài đặt mặc định để bật nút Thêm vào giỏ hàng trong cửa hàng WooC Commerce của bạn và cung cấp cho bạn các tùy chọn tùy chỉnh nâng cao cho nó. Hơn nữa, chủ đề này được xây dựng 100% cho WooC Commerce, do đó, nó sẽ loại bỏ tất cả các vấn đề liên quan đến chủ đề

Hy vọng rằng từ bài viết này, bạn sẽ tìm ra các phương pháp phù hợp nhất để tạo nút Thêm vào giỏ hàng thay đổi WooC Commerce trên trang web của mình. Nếu bạn có thêm câu hỏi hoặc đề xuất, vui lòng cho chúng tôi biết bằng cách để lại nhận xét bên dưới

Tại sao nút thêm vào giỏ hàng không hoạt động?

Tại sao nút thêm vào giỏ hàng của tôi không hiển thị WooC Commerce?

Tại sao giỏ hàng WooC Commerce của tôi không hoạt động?

Cách thêm vào giỏ hàng hoạt động trong WooC Commerce?