Hiển thị thông tin bên dưới sản phẩm bằng hook trong WooCommerce

Khi xây dựng website bán hàng, tùy vào mục đích sử dụng mà nhiều khi bạn cần thông tin bên dưới sàn phẩm để khách hàng truy cập nhanh. Hôm nay mình sẽ chia sẻ cho bạn code hiển thị thông tin bên dưới sản phẩm bằng hook trong WooCommerce

Hiển thị thông tin bên dưới sản phẩm bằng hook trong WooCommerce

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.

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
}

Cơ bản là xong nhé chỉ cần css lại là đẹp ngay thôi, Bạn cần thêm css sau vào

.thongtin {
display: flex;
}
.thongtin .nut {
border: 1px solid;
border-radius: 10px;
padding: 5px;
text-align: center;
margin: 5px;
background-color: #4fba69;
color: black;
}

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

.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é