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

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 với thể tiêu dùng chức năng này và tha hồ custom mà ko cần thêm bất cứ cái 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 để áp dụng nhé.

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

Thống kê bài viết

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

Để bạn dễ tưởng tượng. Bạn với thể xem qua Hình mình làm cho demo trên trang người mua 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 !

với THỂ BẠN quan tâm

• cách thêm code breadcrumbs rankmath đẹp và nhanh
• Chia sẽ theme Flatsome 3.14.0
• Contact us all-in-one button – Plugin tạo nút địa chỉ chuyên nghiệp
• Đổi Font % sang px trong Theme Flatsome
• Tino khuyến mại trong tháng 02-2023
• Code gửi email SMTP từ Gmail cho WordPress

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

một 2 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ảng giải đoạn code nhé :

• mang đ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 hai 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

lúc 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 hai 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ú ý : lúc theo đỗi class ở trên thì xuống css nhớ đổi thay theo nhé

ví như mang câu hỏi gì cứ địa chỉ 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