Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn
Với nhu cầu thông báo các chương trình khuyến mãi cho khách hàng khi họ ghé thăm trang chi tiết sản phẩm. Thì mình xin hướng dẫn cho các bạn cách để có thể tạo được bảng thông báo đó.
Plugin yêu cầu phải có: ACF bảng pro. Các bạn có thể tải tại đây :https://drive.google.com/file/d/1HXJtX5wcW45aPF4lZe7xUmsWnw7r–AT/view?usp=sharing Bản này là bản uy tín vì mình đang sử dụng, còn tin hay không thì tùy các bạn. Nhân tiện nếu các bạn sử dụng thường xuyên thì nên mua để ủng hộ tác giả nhé. Mình share ở đây để các bạn test thôi chứ không khuyến khích sài hàng Null, xin cảm ơn.
ACF là 1 công cụ giúp chúng ta giảm thời gian code, ngoài việc dùng ACF các bạn cũng có thể sử dụng custom field của wordpress và woocommerce nhé.
Tạo theme option.
Đầu tiên các bạn tạo giúp mình 1 cái theme option, để mình có thể chứa các field mà mình sẽ tạo ở dưới. Để tạo được theme option thì các bạn vui lòng follow theo hướng dẫn sau:
Vào file function
Sau đó các bạn thêm đoạn code này giúp mình
|
1 2 3 4 5 6 7 8 9 10 |
if( function_exists('acf_add_options_page') ) { acf_add_options_page(array( 'page_title' => 'Theme option custom PTTUAN', 'menu_title' => 'Theme Settings', 'menu_slug' => 'theme-general-settings', 'capability' => 'edit_posts', 'redirect' => false )); } |
Sau đó chúng ta sẽ được kết quả như thế này.
Lưu ý là code này chỉ sử dụng được cho plugin ACF pro
Tạo các field hiển thị theo mong muốn bằng plugin ACF
Kế đến chúng ta sẽ tiến hành tạo các field mà mình muốn nhé.
Ở đây mình sẽ tạo tổng cộng 3 field nhé.
- Field nhập thông tin chương trình – dạng Wysiwyg Editor
- Field lựa chọn loại hiển thị – Radio
- Field danh sách sản phẩm – Relationship
Các bạn tạo theo hình dưới đây nhé.
Các bạn lưu ý các khoanh đỏ giúp mình. Rất nhiều bạn ib mình chỉ vì sai các nội dung trong khoanh đó.
Ở field danh sách sản phẩm, các bạn lựa chọn giúp mình post type là product nhé, để tránh việc mất thời gian lựa chọn.
Ở field loại hiển thị các bạn set up nó giống hình dưới đây giúp mình nhé.
Nội dung ở mục choices đó là
|
1 2 3 |
tc : Tất cả lt : Loại trừ dc : Được chọn |
Sau đó các bạn nhấp đăng/save lại, vậy là xong bước set up các field hiển thị, kế đến sẽ là set up nội dung hiển thị.
Thêm nội dung hiển thị ở theme settings
Các bạn click vào phần theme setting mà chúng ta đã thêm ở phía trên để set up nội dung muốn hiển thị nhé.
Khi click vào đây giao diện nó sẽ như thế này.
Và chúng ta chỉ cần thêm nội dung vào.
Ở field loại hiển thị, nếu các bạn muốn hiển thị tất cả các sản phẩm thì các bạn chọn tất cả, nếu các bạn muốn loại trừ thì chọn loại trừ, muốn chỉ hiển thị thì chọn cái được chọn.
Hiển thị tất cả: Là Thông tin phía trên sẽ hiển thị ở tất cả các sản phẩm
- Loại trừ: Khi bạn chọn loại trừ bạn nhớ chọn thêm sản phẩm loại trừ, như vậy thì thông tin sản phẩm sẽ không hiển thị đối với các sản phẩm dc chọn.
- Được chọn: Cũng tương tự loại trừ, khi chọn “Được chọn” bạn chọn các sản phẩm được chọn để thông tin hiển thị đến các sản phẩm đó nhé.
- Sau đó dưới danh sách sản phẩm các bạn lựa chọn các sản phẩm phù hợp là được.
Hiển thị nội dung ra website
Bước này sẽ cần đến code, các bạn có thể follow đoạn code dưới này để hiển thị nội dung nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function show_thong_tin(){ global $post; $thong_tin = get_field('thong_tin','option'); $loai_hien_thi = get_field('loai_hien_thi','option'); $danh_sach = get_field('danh_sach','option'); if($danh_sach){ $id_array = array(); foreach( $danh_sach as $id_post ): $id_array[] = $id_post->ID; endforeach; if($loai_hien_thi == 'lt' && !is_single($id_array)){ echo '<div class="promotion-ptt">'.$thong_tin.'</div>'; } if($loai_hien_thi == 'dc' && is_single($id_array)){ echo '<div class="promotion-ptt">'.$thong_tin.'</div>'; } } if($loai_hien_thi == 'tc'){ echo '<div class="promotion-ptt">'.$thong_tin.'</div>'; } } add_action('woocommerce_single_product_summary','show_thong_tin'); |
Thêm 1 chút CSS nữa nhé
|
1 2 3 4 5 6 7 |
.promotion-ptt { border-radius: 8px; border: #eee solid 1px; box-shadow: 0 6px 12px 0 rgb(0 0 0 / 5%); padding: 8px 15px; background: #effeff; } |
Và kết quả sẽ như thế này
Chúc các bạn thành công, hi vọng với 1 ít kiến thức này các bạn có thể tạo nên nhiều tính năng xịn xò cho web của mình.
- Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome
- Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form
- Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed
- Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress
- Plugin kết nối Giao Hàng Nhanh với Woocommerce
Bài viết cùng chủ đề:
-
Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed
-
Cách tắt tính năng tự động cập nhật trong WordPress (auto update)
-
Xoá chữ CATEGORY ARCHIVES trong theme Flatsome
-
Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS
-
Hướng dẫn custom bộ lọc của woocommerce wordpress
-
Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome
-
Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO
-
Code tự động lưu ảnh vào host khi copy nội dung từ website khác
-
Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm
-
Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn
-
21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce
-
10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)
-
Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng
-
Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress
-
Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form
-
Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome
