Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome

INFO

Trước đây khi bạn muốn thêm nút “Xem Nhanh” Hoặc hiện thị xem chi tiết bạn phải sử dụng Plugin, với Flatsome.xyz bạn chỉ cần 1 đoạn code trong Function mang thể dùng chức năng này và tha hồ custom mà không cần thêm bất cứ mẫu gì nữa , Hãy đọc hết bài Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome để ứng dụng nhé.

Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome

Báo cáo bài viết

Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome
- sở hữu THỂ BẠN để ý

Để bạn dễ hình dung. Bạn với thể xem qua Hình mình làm cho demo trên trang khách hàng bên dưới :

Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome

OK , thấy hoàn hảo đúng ko bạn. Nếu như bạn đang cần thêm thì bài nay sẽ danh cho bạn !

mang THỂ BẠN để ý

Chỉ cần thêm doạn code sau vào Function.php của theme của bạn đang sử dụng nhé :

 


	
			1
hai
3
4
5
6
7
8
9
10
11
12
13
14
15
16

			// 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="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

		

giải thích đoạn code nhé :

với đoạn code add_action( ‘woocommerce_after_shop_loop_item_title’, ‘show_thong_tin’ ); bạn sẽ hook vào bên dưới giá Sản phẩm
sở hữu 2 doạn code này $id = $product->get_id(); và $link = get_permalink($id); để lấy Số ID bài đăng và Link bài đăng theo ID sản phẩm

khi bạn lưu lại là OK , việc còn lại là thêm đoạn Css cho hoàn mỹ nữa nhé :

 


	
			một
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

		

Chú ý : khi theo đỗi class ở trên thì xuống css nhớ đổi thay theo nhé

nếu có nghi vấn gì cứ liên hệ tớ nhé, Tớ vẫn ở đây đợi kèo của anh em

Chúc anh em thành công

theo : https://flatsome.xyz/them-xem-nhanh-va-xem-chi-tiet-ben-duoi-san-pham.html

Thêm xem nhanh và xem chi tiết bên dưới sản phẩm cho Theme Flatsome