Hướng dẫn tạo thông báo thời gian giao hàng dự kiến woocommerce

Hien-thi-thong-bao-thoi-gian-giao-hang-du-kien

Hướng dẫn tạo thông báo thời gian giao hàng dự kiến woocommerce

Thông báo thời gian giao hàng dự kiến giúp khách hàng nắm được thông tin rõ hơn tránh trường hợp hối giục hay huỷ bỏ đơn hàng giữa chừng. Thời gian giao hàng dự kiến có thể linh hoạt hoặc cố định hoặc cũng có thể tuỳ chỉnh cho từng sản phẩm tuỳ theo nhu cầu và mục đích của người làm web.

Hôm nay, flatsomea-z sẽ hướng dẫn các bạn cách tạo thông báo thời gian giao hàng dự kiến woocommerce;

Cách 1: Tạo thời gian giao hàng dự kiến bằng custom field để linh hoạt cho từng sản phẩm

Copy và paste đoạn code sau vào functions.php trong child-theme nhé.

// Hiển thị thời gian giao hàng dự kiến

function delivery_field() {
    woocommerce_wp_text_input( array(
        'id' => '_delivery_field',
        'label' => 'Giao hàng trong: ',
        'description' => 'Mô tả nội dung',
        'desc_tip' => 'true',
        'placeholder' => 'Nhập số ngày giao hàng dự kiến.'
    ) );
}
add_action( 'woocommerce_product_options_general_product_data', 'delivery_field' );
 
 function delivery_save_field( $post_id ) {
    if ( ! empty( $_POST['_delivery_field'] ) ) {
        update_post_meta( $post_id, '_delivery_field', esc_attr( $_POST['_delivery_field'] ) );
    }
}
add_action( 'woocommerce_process_product_meta', 'delivery_save_field' );
 
function delivery_value() {
    global $product;
	echo '<p id="deliveryinfo"><b>Giao hàng trong:</b> ' . 
    esc_html( get_post_meta( get_the_ID(), '_delivery_field', true ) ) . ' ngày.</p>'; }
add_action( 'woocommerce_before_add_to_cart_button', 'delivery_value' );

Cách này sẽ hiển thị như sau:

Tạo Thời Gian Giao Hàng Dự Kiến Bằng Acf để Linh Hoạt Cho Từng Sản Phẩm
Tạo Thời Gian Giao Hàng Dự Kiến Bằng Acf để Linh Hoạt Cho Từng Sản Phẩm
Tạo Thời Gian Giao Hàng Dự Kiến Bằng Acf để Linh Hoạt Cho Từng Sản Phẩm-2
Tạo Thời Gian Giao Hàng Dự Kiến Bằng Acf để Linh Hoạt Cho Từng Sản Phẩm-2

Cách 2: Tạo thời gian giao hàng dự kiến dựa theo điều kiện ngày tự thiết lập

Copy và paste đoạn code sau vào functions.php nhé

//Thời gian giao hàng
add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_products_loop', 20 );
function woocommerce_products_loop(){
global $product;

// Thiết lập múi giờ
date_default_timezone_set('Asia/Ho_Chi_Minh');

$is_days = in_array( date('w'), array( 0, 1, 2, 3, 4, 5, 6 ) ) ? true : false; // Từ Thứ 2 đến CN

$end_time = mktime('12', '00', '00', date('m'), date('d'), date('Y')); // 12h00
$now_time = time();

$after_tomorow = date('l', strtotime('+2 days'));

// Điều kiện hiển thị
if( $is_days && $now_time < $end_time ) {
$displayed_day_1 = date( "d/m/Y", strtotime( "today + 1 day" ) );
$displayed_day_2 = date( "d/m/Y", strtotime( "today + 2 day" ) );
} elseif( $is_days && $now_time >= $end_time ) {
$displayed_day_1 = date( "d/m/Y", strtotime( "today + 2 day" ) );
$displayed_day_2 = date( "d/m/Y", strtotime( "today + 3 day" ) );
}

// Text hiển thị Single Product
$html = "<br><div class='woocommerce-message' style='clear:both'><img class='anh-giao-hang' src='#'/>Giao hàng dự kiến: {$displayed_day_1} - {$displayed_day_2}</div>";

echo $html;
}

Thay “#” bằng link ảnh icon bạn muốn hiển thị kèm dòng thông báo nhé.

Code trên mình đang để điều kiện là trước đặt trước 12h thì giao từ 1 – 2 ngày còn sau 12h sẽ giao từ 2 – 3 ngày. Các bạn muốn điều kiện khác thì có thể sửa hoặc ib mình hướng dẫn.

Kết quả đây:

Hien-thi-thong-bao-thoi-gian-giao-hang-du-kien
Hien-thi-thong-bao-thoi-gian-giao-hang-du-kien

Hình ảnh icon các bạn để size 18x18px hoặc to hơn tuỳ ý. Thêm 01 chút CSS để được như hình nhé

.woocommerce-message{margin-top:20px;color: rgb(0, 171, 86);}
.anh-giao-hang{margin-right: 10px;margin-top: -6px}

Chúc các bạn thành công.

Trả lời

Email của bạn sẽ không được hiển thị công khai.