Giỏ hàng

Thêm nút Tải Xuống vào trang Sản phẩm Woocommerce

Bạn đang bán sản phẩm số (ebook, file download,…) trên website của mình qua Woocommerce. Nhưng khi khách thanh toán xong, cần tải xuống thì hơi lằng nhằng và phức tạp.

Chính vì thế, bạn muốn thêm luôn NÚT TẢI XUỐNG vào ngay trang sản phẩm cho dễ sử dụng. Nút tải xuống này sẽ nằm ngay sau nút “Thêm Vào Giỏ“.

Nếu đó là điều bạn đang tìm thì bài viết này là của bạn. (Xem hình minh họa bên dưới)

thêm nút tải xuống vào trang sản phẩm

Cách Thêm Nút Tải Xuống Vào Trang Sản Phẩm

Bước 1: Chuẩn bị code

Đây là đoạn code cần thiết bạn sẽ thêm vào để hiển thị nút tải xuống trên trang sản phẩm.

				
					add_action('woocommerce_after_add_to_cart_form', 'download_products');

function download_products()
{

    $downloads = array();
    $user_id = get_current_user_id();
    $downloads = wc_get_customer_available_downloads($user_id);
    if (!empty($downloads)) {
        foreach ($downloads as $download) {

            echo '<button type="button" class="nuttaixuong"><a href="' . $download['download_url'] . '">LINK TẢI XUỐNG</a></button>';

        }
    }

}
				
			

Bước 2: Thêm Code vào cuối File Function.php

Bạn truy cập file manager của website. Tìm đến chuyên mục Theme, chọn vào theme bạn đang dùng và chọn sửa file Function.php.

Quy trình như sau:

Truy cập Wp-content -> themes -> Theme bạn đang dùng -> Function.php

thêm nút tải xuống cho trang sản phẩm số

Bước 3: Làm đẹp cho nút Tải Xuống

Sau khi thêm code ở bước 2 thì nút thì hiển thị theo mặc định của chủ đề. Nếu đẹp rồi thì bạn bỏ qua bước này. Còn nếu chưa ưng ý thì bạn có thể thêm CSS theo code mẫu trên.

Với thông số cụ thể như sau:

Border-radius: độ cong viền của nút bấm
Background-color: màu sắc của nút bấm
Color: màu của chữ
Font-weight: độ đậm của chữ
Font-size: độ to nhỏ của chữ

Cái này thì tùy mắt thẩm mỹ mà anh em lựa chọn phù hợp nhé.

				
					.nuttaixuong {border-radius:5px; background-color:#0C5;}
.nuttaixuong a {color: white!important;font-weight:700;font-size:18px;}
				
			

Kết Bài


Như vậy là đã hướng dẫn xong cho bạn cách thêm nút tải xuống vào trang sản phẩm Woocommerce rất dễ phải không nào?

Nếu còn thắc mắc hoặc chỗ nào chưa làm được hãy để lại bình luận nhé. Đừng quên VuaWeb có bán rất nhiều mẫu web chuyển đổi sẵn cho các bạn làm kinh doanh, kiếm tiền online (MMO, Affiliate). Bạn biết ai cần hãy giới thiệu cho tớ nhé.

Hẹn gặp lại ở một bài viết khác.

2 bình luận về “Thêm nút Tải Xuống vào trang Sản phẩm Woocommerce”

Viết một bình luận