Đây là cách khách hàng mua hàng mặc định khi bạn cài đặt Woocommerce:
Họ tìm kiếm sản phẩm mình cần.
Khi tìm được sản phẩm ưng ý, họ click nút Thêm vào giỏ hàng.
Ngay khi hoàn tất việc chọn hàng, họ vào Giỏ hàng và cập nhật sản phẩm nếu muốn.
Cuối cùng click vào nút thanh toán để tiến hành thanh toán.
Bây giờ hình dung khách hàng của bạn là người khá bận rộn. Ngay khi họ nhìn thấy sản phẩm mình cần và muốn thanh toán thì sao?
Họ không có nhu cầu mua thêm sản phẩm.
Họ không muốn mất công vào giỏ hàng chỉ để thực hiện công việc thanh toán. Nói cách khác, tất cả điều họ muốn:
Hoàn tất việc mua hàng nhanh nhất có thể.
Dĩ nhiên website bạn phải ưu tiên đem lại trải nghiệm mua sắm tốt nhất cho khách hàng của mình.
Vậy giải pháp của bạn là gì?
Câu trả lời hiển nhiên:
Bổ sung thêm nút mua ngay ngay cạnh sản phẩm. Họ chỉ cần click nút này là đến trang thanh toán và thực hiện thanh toán ngay.
Và bài viết này mình sẽ chỉ cho bạn cách làm như vậy.
Đọc thêm: Cách tối ưu đường dẫn tĩnh trong Woocommerce
Cách thêm nút mua ngay trong website WordPress bán hàng
Bạn đang nghĩ tới một plugin giúp bạn thêm nút mua ngay?
Đúng vậy, WC Quick Buy giúp bạn bổ sung tính năng mua ngay tiện lợi này mà không cần động vào code. Plugin cũng có tùy chọn cho bạn biết code.
Đây là các bước chúng ta thêm nút mua ngay:
Đầu tiên, bạn cài đặt và activate plugin. Mới làm quen với WordPress, vẫn không biết cài đặt plugin, xem hướng dẫn từng bước cài đặt một plugin WordPress. Tốt nhất là bạn nên đọc sách làm quen WordPress để có kiến thức nền tảng về sử dụng WordPress.
Ngay khi plugin được kích hoạt, bạn đi tới Woocomerce -> Setting (Cài đặt).
Bây giờ bạn sẽ nhìn thấy một tab mới có tên “WC Quick Buy’.
Click vào đó bạn sẽ nhìn thấy nhiều tùy chọn cấu hình cho plugin. Các tùy chọn được phân chia theo từng nhóm.
Ở tab General, bạn sẽ chọn trang chuyển đến (Redirection Location) khi khách hàng click nút mua ngay. Chúng ta chọn trang thanh toán. Một lựa chọn hợp lý trong tình huống của chúng ta.
Tiếp đó, bạn cần chọn hiển thị nút này cho những kiểu sản phẩm nào. Chọn All Product Types để hiển thị nút cho tất cả nút sản phẩm.

Ngay khi bạn hoàn tất, click vào nút Save changes để lưu lại cấu hình. Nếu bạn quên click vào nút này mà click vào các tab cấu hình khác, mọi tùy chọn của bạn sẽ bị mất. Do vậy nhớ click vào nút Save changes mỗi khi bạn thay đổi tùy chọn cho mỗi tab.
Bây giờ chúng ta chuyển sang nút Button Styling.
Ở đây, bạn sẽ nhập tên của nút. Nếu bạn muốn định kiểu riêng cho nút thì sử dụng thêm 2 tùy chọn bên dưới. Còn nếu bạn muốn style của nút giống style của theme có thể bỏ qua.

Chuyển sang phần Button Position.
Bạn sẽ nhìn thấy 2 phần tương ứng với vị trí nút ở trang sản phẩm và trang cửa hàng. Ở đây chúng ta sẽ để plugin tự động thêm nút và đặt bên cạnh nút thêm vào giỏ hàng.

Cuối cùng nếu bạn cần kiểm soát thủ công vị trí nút bạn có thể sinh shortcode. Tính năng này đòi hỏi bạn thoải mái với sửa code.
Sau khi hoàn tất cấu hình plugin bây giờ bạn ra trang chủ. Và đây là thành quả sau vài phút cầu hình:

Ảnh chụp từ theme Roku, một theme bán hàng nhẹ và đẹp mắt.
Đó là tất cả những việc bạn phải làm để bổ sung nút mua ngay vào website. Đơn giản phải không nào?
Đọc thêm: Series học Woocomerce
Bây giờ đến lượt bạn hành động thôi nếu như website của bạn chưa có tính năng thú vị và mạnh mẽ này.
Và đừng quên để lại câu hỏi nếu bạn gặp phải bất kỳ vấn đề gì với việc bổ sung thêm nút mua ngay cho website.
Còn nếu bạn biết cách hay hơn, đừng giữ cho riêng mình. Hãy chia sẻ cho mọi người cùng biết ở phần comment nhé!
Cuối cùng, nhớ click nút like fan page để ủng hộ blog. Một hành động nhỏ nhưng đối với mình là niềm vui lớn :).

Thank ad mình đã tốn 200k vì plugin này mà hiện tại vẫn chưa ưng ý, cũng mai đọc dc bài này.
Mình đã làm được nhưng không biết cách để cho nút nó khỏi lệch
như trang này : https://trandaiphat.com
Bài viết hay lắm, mình đã bổ sung cho website của mình https://dacsanhoanglam.com, cảm ơn tác giả
Nhờ add chỉ cách làm thăng bằng các nút mua hàng ko để cái nhấp lên, cái nhấp xuống với a! https://camerabachnhat.com/
Mến chào bạn. Cảm ơn bạn rất nhiềuuu!
mình muốn thêm nút mua trên tiki, shopee thì làm như nào bạn ơi
https://dienkimbinh.com/san-pham/den-pha-led16-20w-bvp132-philips/ Lỗi trong chi tiết nhấp vào nó xoay miết bạn ạ
Chưa click vào nút mua ngay Bản thân nút mua hàng của bạn cũng đã có vấn đề rồi mà. f12 cũng thấy web bị lỗi javascript rồi.
cảm ơn admin đã chia sẻ
Không bấm vào được khi xem nhanh bạn ơi. http://gocmuasam.net
Bản WooCommerce mới không có cái này mình không biết làm như nào. Bạn có hướng dẫn dành cho bản mới không ạ
Thay vì dùng nút đặt hàng như vậy, có cách nào hay plugin nào có thể gán link vào nút đặt hàng đó để khi bấm vào nó dẫn sang trang đích không bạn?
mình chưa biết có cách nào như vậy hồi viết bài này nếu bạn tìm ra thì chia sẻ thêm
Thay vì dùng nút đặt hàng như vậy, thì có cách nào hay dùng plugin nào để gán link dẫn tới trang đích vào nút đặt hàng đó luôn ko bạn?
Cám ơn bạn!
Mình cấu hình xong nhưng chữ “Buy Now” nó không có khung viền rất khó nhận biết. Có thể tạo khung viền cho nó được ko bạn?
Những cái này thường phải xử lý thêm code css để cho đẹp cái này mình không phải dân code nên cũng khó giúp bạn nếu cần bạn vào group wordpress (https://www.facebook.com/groups/wordpressviet/?ref=nf_target&fref=nf) có thể nhờ vả ai được chăng
http://wifi-saoviet.com.vn/
Mình thêm vào được rồi, nhưng bấm vào nút mua hàng thì lại ko dươc
anh ơi, em gở plugin nút Quick buy rồi mà sao trên trang chủ nó vẫn hiên chữ mua nhanh là sao nhỉ. Anh chỉ em cách gỡ bỏ hoàn toàn chữ mua nhanh trên web giùm em với.
Mình vào web không thấy chắc là do cache thôi.
Quả nhiên là do cache ạnh. Cảm ơn anh nhiều nhé.
anh ơi cho em hỏi làm sao sữa màu và co đều với thêm giỏ hàng z anh. nó lệch xuống rồi ak
Mình cũng không thạo css lắm chỉ biết vài đường cơ bản, trường hợp của bạn hơi khó một chút bạn thử vào group WordPress Việt nam trên facebook hỏi xin code css xem sao
sao mình css ko dc, bạn giúp mình với, có code demo nao ko? mình copy css cua bạn bỏ vào nó cũng ko thay đổi
cho mình ảnh chụp xem bạn paste code chuẩn không, luôn địa chỉ website.
//dominantavietnam.com/wp-content/uploads/2017/11/01.jpg
DEMO
http://dominantavietnam.com/san-pham/serum-lam-trang-da-mat/
code css add vào lỗi rồi input.wc_quick_buy_buttonthay vì mỗi wc_quick_buy_button. Thứ hai bạn cần để một khoảng trắng với dầu { nhé. code hoàn chỉnh
input.wc_quick_buy_button {
background: #ff3c20 !important;
}
nếu không được thì dùng bộ chọn id
input#quick_buy_552_button {
background: #ff3c20 !important;
}
bạn sửa sao vậy b? chụp hình cho mình xem với, mình sửa mãi k biết sao?
mình thấy web của bạn cũng đẹp rồi đấy còn đây là hình ảnh ví dụ: https://prnt.sc/h565ov. Sắp tới phiên bản wordpress 4.9 thêm code css sẽ ngon hơn vì nó có check lỗi cú pháp.
Mình muốn giữ nút Mua ngay giống style với nút Thêm vào giỏ hàng thì làm sao vậy b?
Bạn xem lại mấy comment mình support mọi người bên dưới xem có giúp được gì không?
Làm sao sửa màu của nút mua ngay vậy bạn?
bạn thêm code css ở phần button internal style. Ví dụ:
input[type=”button”].quick_buy_button {
background-color: red;
}
Bạn ơi mình thêm vào rồi nhưng nó vẫn chưa thay đổi, mình muốn backgroud là màu đỏ và màu chữ là màu trắng in đậm thì làm thế nào?
xem hộ giúp mình nhé
http://kisafashion.com/san-pham/nuoc-hoa-chinh-hang-charme-chance-25ml-nu-tinh-goi-cam-tuoi-mat/
bạn thử code này xem sao: input.quick_buy_button {
background-color: red;
color: white;
}
Bạn ơi, bạn xem giùm mình, mình chèn code này vào nhưng vẫn chưa được. http://www.upsieutoc.com/image/cXWvAL
khung thêm code bạn chỉ thêm duy nhất đoạn này cho mình
input.quick_buy_button {
background-color: red;
color: white;
}
không viết gì thêm vào đây. chỗ này phải đúng cú pháp css nhìn của bạn thêm cả text (cho nut mua nhanh) vào thì làm sao đúng cú pháp được
Cảm ơn bạn, quá tuyệt!