Freeship trên theme Flatsome – Hướng Dẫn Chức Năng Mua Thêm Để Được Freeship

Freeship trên theme Flatsome – Chức năng mua thêm được free ship này chắc hẳn đã rất quen thuộc với các bạn hay đi shopping rồi đúng không nào. Trong bài viết này thì mình sẽ hướng dẫn các bạn làm nó cho website của riêng mình chỉ với 1 đoạn code đơn giản.

Freeship trên theme Flatsome

Hướng Dẫn Chức Năng Mua Thêm Để Được Freeship trên theme Flatsome

Bước 1: Tạo code và chèn vào file functions.php

Các bạn hãy copy và paste đoạn code dưới đây vào file functions.php trong child-theme nhé (Giao diện -> Theme File Editor):

//Mua thêm để được freeship
add_action( 'woocommerce_checkout_before_customer_details', 'flatsomeaz_free_shipping_cart_notice' );

function flatsomeaz_free_shipping_cart_notice() {

$min_amount = 500000; //Giá trị đơn hàng để được freeship

$current = WC()->cart->subtotal;

if ( $current < $min_amount ) {
$added_text = 'Mua thêm ' . wc_price( $min_amount - $current ) . ' để được miễn phí vận chuyển!';
$cart_total = WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax();
printf( '<progress id="cart-progress-bar" max="500000" value="%s"></progress>', $cart_total );
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
$notice = sprintf( '<a href="%s" class="button-ms">%s</a> %s', esc_url( $shop_page_url ), 'Tiếp tục mua hàng', $added_text );
wc_print_notice( $notice, 'notice' );
}
}

Bước 2: Tuỳ chỉnh CSS cho tính năng freeship trên theme Flatsome

Copy và paste đoạn CSS sau vào style.css hoặc Giao diện > Tuỳ biến > Custom CSS nhé:

.button-ms{float:right;background-color:#000;padding:5px 10px;font-size: 12px;border-radius:8px;color:#fff;margin-top:-3px;margin-left:5px;}
@media only screen and (max-width: 420px){
.button-ms{margin-top: 8px!important;margin-left: 20px!important;}
}

Kết luận
TRên đây là hướng dẫn của mình về cách tạo chức năng mua thêm sản phẩm để được nhận free ship trên website sử dụng theme Fatsome. Chúc các bạn thành công!!

Bài viết liên quan

Đánh giá bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *