Hướng dẫn thêm nút Xem Demo xem chi tiết cho sản phẩm Woocommerce

Cách thêm nút Xem Demo xem chi tiết cho sản phẩm Woocommerce

1. Sử dụng ACF tạo field để thêm link XEM DEMO

Bạn có thể tải và xem hướng dẫn sử dụng ACF tại đây

Thêm 1 field Group với Location Rules cho sản phẩm và tạo 1 field là: xem_demo với Type là URL

2. Sửa template của WooCommerce

Chúng ta sẽ ghi đè template của WooCommerce để kiểm soát toàn bộ phần hiển thị sản phẩm trong danh sách.

Bạn tìm đến file: content-product.php (theo đường dẫn: your-theme/woocommerce/content-product.php)

<?php
// Lấy giá trị từ custom field xem_demo
$xem_demo_url = get_field('xem_demo', $product->get_id()) ?: $product->get_permalink(); // Nếu không có giá trị, mặc định là permalink của sản phẩm
?>
<div class="box-image">
        <div class="image-fade_in_back">
            <a href="<?php echo esc_url($product->get_permalink()); ?>" aria-label="<?php echo esc_attr($product->get_name()); ?>">
                <?php echo woocommerce_get_product_thumbnail(); ?>
            </a>
        </div>
        <div class="image-tools is-small top right show-on-hover">
            <!-- Có thể thêm công cụ khác ở đây nếu cần -->
        </div>
        <div class="image-tools is-small hide-for-small bottom left show-on-hover">
            <!-- Có thể thêm công cụ khác ở đây nếu cần -->
        </div>
        <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
            <div class="xem_dmct">
                <a class="xem_demo" href="<?php echo esc_url($xem_demo_url); ?>" rel="nofollow" target="_blank">
                    <i class="fa fa-eye" aria-hidden="true"></i> Xem demo
                </a>
                <a class="chi_tiet" href="<?php echo esc_url($product->get_permalink()); ?>">
                    <i class="fa fa-arrows" aria-hidden="true"></i> Xem chi tiết
                </a>
            </div>
        </div>
    </div>

3. Thêm CSS cho Gird Tools

.product-small.box .grid-tools {
height: 100%;
background: #0e0e0eb3;
vertical-align: middle;
border-radius: 5px 5px 0 0;
}
.xem_dmct {
padding-top: 40%;
width: 60%;
}
.xem_dmct a.xem_demo {
margin-bottom: 10px;
background: #ff0000;
}
.xem_dmct a {
border-radius: 6px;
}
.fa {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.xem_dmct a.chi_tiet {
background: #15779e;
}