Thêm nút xem nhanh và xem chi tiết bên dưới sản phẩm cho trang bán hàng Worpdress

Thêm nút xem nhanh và xem chi tiết bên dưới sản phẩm cho trang bán hàng Worpdress:

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 dùng Plugin, Giờ đây bạn chỉ cần 1 đoạn code trong Function có thể dùng chức năng này và tha hồ custom mà không 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é.

Demo

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

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

// 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=”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 :

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
với 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é :