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 woocommerce 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 An Nhiên sẽ 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
Hook WooCommerce trong wordpress có nghĩa là 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ách hook WooCommerce trong wordpress:
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.
<br /><br /><br />
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘show_thong_tin’ );<br /><br /><br />
function show_thong_tin() { ?><br /><br /><br />
<div class=”thongtin” ></p><br /><br />
<p><div class=”nut1″> Đăng ký lái xe </div> <div class=”nut2″>Xem Đánh giá xe </div> </p><br /><br />
<p></div><br /><br /><br />
<?php<br /><br /><br />
}
Về cơ bản là đã xong rồi nhé, bây giờ chỉ cần CSS lại cho nó đẹp mắt và phù hợp hơn nhé
Sau đây bạn cần thêm CSS sau vào:
<br /><br /><br />
.thongtin {<br /><br /><br />
display: flex;<br /><br /><br />
}<br /><br /><br />
.thongtin .nut {<br /><br /><br />
border: 1px solid;<br /><br /><br />
border-radius: 10px;<br /><br /><br />
padding: 5px;<br /><br /><br />
text-align: center;<br /><br /><br />
margin: 5px;<br /><br /><br />
background-color: #4fba69;<br /><br /><br />
color: black;<br /><br /><br />
}
Thế là đã hoàn thành ngon lành rồi nhé.
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é. Nó sẽ thành kiểu như này:
<br /><br /><br />
.thongtin {<br /><br /><br />
display: flex;<br /><br /><br />
}<br /><br /><br />
.thongtin .nut a {<br /><br /><br />
border: 1px solid;<br /><br /><br />
border-radius: 10px;<br /><br /><br />
padding: 5px;<br /><br /><br />
text-align: center;<br /><br /><br />
margin: 5px;<br /><br /><br />
background-color: #4fba69;<br /><br /><br />
color: black;<br /><br /><br />
}
Khác ở chỗ là .thongtin .nut đổi thành .thongtin .nut a nhé.
Cảm ơn bạn đã đọc bài viết Hiển thị thông tin bên dưới sản phẩm bằng hook trong wooce wordpress của An Nhiên!
Chúc các bạn thực hiện thành công nhé.
