[hỏi đáp] Hiện thị thông tin bên dưới sản phẩm bằng hook

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

Tìm hiểu những bài liên quan đến hook mình Flatsome đã chia sẽ

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
}

add_action( 'woocommerce_after_shop_loop_item_title', 'show_thong_tin' );

function show_thong_tin() { ?>

</div>

<?php

}

OK về cơ bản là xong nhé chỉ cần css lại là đẹp ngon lành cành đào

Cách hook WooCommerce trong wordpress — Demo sau khi css hook WooCommerce trong wordpress

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;
}

.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

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