Có bạn hỏi làm sao để hiện thị thông tin bên dưới sản phẩm bằng hook trong wooce wordpress , thấy câu hỏi có nhiều người quan tâm , như mình hồi bắt đầu làm quen với hook cũng quan tâm !
hôm nay tớ chỉ bạn cách hook vào thông tin vào sản phẩm và css cho đẹp nhé
Hiện thị thông tin bên dưới sản phẩm bằng hook trong wooce wordpress
Đinh nghĩa hook WooCommerce trong wordpress – Hiện thị thông tin bên dưới sản phẩm
Hook cho phép bạn ghi đè các mã code hoặc thêm các mã code mà không cần can thiệp vào các file hệ thống. Tất cả các việc làm này bạn không cần phải sửa file trong core WordPress hay sửa file trong core của Plugin WooCommerce, mà bạn chỉ cần sửa trong file Functions. php của theme mà bạn đang sử dụng
CÓ THỂ BẠN QUAN TÂM
- Share icon box liên hệ đẹp cho theme Flatsome
- Plugin Content Crawler – lấy tin sản phẩm tự động
- Làm list category đẹp cho blog trong wordpress
- Get thumbnail gallery product in archive – Show thumbnail ra trang chủ
- Thêm số đánh giá cho sản phẩm trong wordpess
- Code nút chát click hỗ trợ cố định website
Tìm hiểu những bài liên quan đến hook mình Flatsome đã chia sẽ
- [hỏi đáp] Hiện thị thông tin bên dưới sản phẩm bằng hook trong wooce wordpress
- Tổng hợp hook trong WordPress
- [hỏi – đáp] Show thuộc tính sản phẩm ra trang sản phẩm trong wordpress
Cách hook WooCommerce trong wordpress – Hiện thị thông tin bên dưới sản phẩm
Hook cho phép bạn ghi đè các mã code hoặc thêm các mã code mà không cần can thiệp vào các file hệ thống.
Vậy làm sao để sử dụng Hook đặc biệt là Action Hook và Filters Hook trong WooCommerce WordPress
Tất cả các việc làm này bạn không cần phải sửa file trong core WordPress hay sửa file trong core của Plugin WooCommerce, mà bạn chỉ cần sửa trong file Functions.php của theme mà bạn đang sử dụng.
|
1 2 3 4 5 6 7 8 9 |
add_action( 'woocommerce_after_shop_loop_item_title', 'show_thong_tin' ); function show_thong_tin() { ?> <div class="thongtin" > <div class="nut1"> Đăng ký lái xe </div> <div class="nut2">Xem Đánh giá xe </div> </div> <?php } |
OK về cơ bản là xong nhé chỉ cần css lại là đẹp ngon lành cành đào
Bạn cần thêm css sau vào
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.thongtin { display: flex; } .thongtin .nut { border: 1px solid; border-radius: 10px; padding: 5px; text-align: center; margin: 5px; background-color: #4fba69; color: black; } |
OK lưu lại và view ngon lành cành đào liền 🙂 , lưu ý : nếu bạn thêm trong code có dạng này ( có <a href ) thì css thêm chữ a vào nhé kiểu
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.thongtin { display: flex; } .thongtin .nut a { border: 1px solid; border-radius: 10px; padding: 5px; text-align: center; margin: 5px; background-color: #4fba69; color: black; } |
Khác chỗ .thongtin .nut a nhé 🙂
Chúc các bạn thành công nhé
Câu hỏi từ group Zalo : https://zalo.me/g/bojpcr323
Pingback: Tạo đánh giá ngẫu nhiên cho sản phẩm trong wordpress - Xuân công Nghệ
Pingback: Tổng hợp hook trong wordpress – Vị trí hook trong single product woocommerce - FLATSOME - FREE EVERY THING
Pingback: Tổng hợp hook trong wordpress - hook trong single product
Pingback: Tạo nút coppy link và share link trong wordpress - FLATSOME - FREE EVERY THING