Hướng dẫn chèn nút Xem nhanh và xem chi tiết bên dưới sản phẩm trong flatsome

WordPress hỗ trợ người dùng thiết kế website theo kiểu không cần biết đến code, chỉ cần kéo thả balabala, nhưng đôi khi những cái mặc định nó lại không được bắt mắt cho lắm.

Hôm nay chúng ta sẽ tìm cách chèn nút Xem nhanh và Xem chi tiết bên dưới sản phẩm trong Flatsome. Đây là một tính năng rất hữu ích, giúp bạn có thể hiển thị thông tin sản phẩm một cách nhanh chóng và dễ dàng.

Hướng dẫn chèn nút Xem nhanh và xem chi tiết bên dưới sản phẩm trong flatsome

// thêm thông tin bên dưới mô tả SP

add_action( 'woocommerce_after_shop_loop_item_title', 'show_thong_tin' );

function show_thong_tin() { ?>

<?php

global $product;

$id = $product->get_id();

$link = get_permalink($id);

?>

<div class="wdm-thongtin" >

<div class="xemnhanh"><a class="quick-view" data-prod="<?php echo $id; ?>" href="#quick-view">Xem Nhanh</a>  </div>  <div class="chitiet"><a href="<?php echo $link; ?>">Xem chi tiết</a> </div> 

<style>

.grid-tools {display: none !important;}

</style>

</div>

<?php

}

/* Thêm đoạn css này vào phần tùy biến css nhé*/

.wdm-thongtin {
margin-top:30px;
}
.wdm-thongtin a:hover {
padding: 7px 14px;
background-color: #fff;
color: #009245;
border-radius: 99px;
border:2px solid #009245;
}
.wdm-thongtin a {
padding: 10px 17px;
background-color: #009245;
color: #fff;
border-radius: 99px;
}
.xemnhanh,
.chitiet {
display: inline-block;
text-align: center;
width: 48%;
}
/*end*/

Bây giờ là lúc tận hưởng thành quả rồi nhỉ. Thật dễ dàng phải không nào? Nếu có bất kỳ câu hỏi nào các bạn vui lòng com tờ men ngay bên dưới để đội ngũ Thiết Kế Web Nam Định hỗ trợ giải đáp cho nhé.

Chúc các bạn thành công !!!