Hướng dẫn cách thêm nội dung vào trước và sau giá sản phẩm trong WooCommerce

  • Wordpress
  • Lượt xem: 26
Hiển thị nôi dung trước và sau giá sản phẩm
Mục lục

    Trong bài viết này, hãy cùng Nhanh Media tìm hiểu cách thêm nội dung vào trước và sau giá sản phẩm trong WooCommerce. Hay còn gọi là Prefix và Suffix.

    Tại sao cần phải thêm Prefix và Suffix vào giá sản phẩm?

    Giả sử:

    • Website bán quần áo, giá được tính theo đơn vị là: “bộ”, ví dụ: 200.000đ/ 1 bộ
    • Website bán mỹ phẩm, giá được phân loại theo “lọ” hoặc “hộp”, ví dụ: 350.000đ/lọ (250ml)
    • Đối với website bất động sản thì đơn vị sẽ được tính theo “m2” hoặc “căn”, vậy ta có ví dụ: 35 triệu/m²

    Chính xác thì mục tiêu của việc thêm nội dung vào trước và sau giá sản phẩm để hiển thị rõ ràng đơn vị giá trên từng sản phẩm để khách hàng không nhầm lẫn, đồng thời tạo sự nhất quán và chuyên nghiệp trên các trang web.

    Vậy giờ hãy cũng bát đầu nhé!

    Thêm vào cài đặt WooCommerce

    Với bước này thì sẽ áp dụng khi trên website của bạn chỉ bán 1 dòng sản phẩm duy nhất. Ví dụ website của bạn chuyên về các sản phẩm thời trang thì ta có thể tiến hành thêm đơn vị tính mặc định cho tất cả các sản phẩm là “bộ”.

    Như vậy, chúng ta sẽ tiến hành thêm 2 ô textbox (Prefix và Suffix) vào cài đặt mặc định của WooCommerce, để từ đó chúng ta có thể nhập nội dung tùy biến cho sản phẩm (áp dụng cho toàn bộ sản phẩm).

    Thêm vào cài đặt woocommerce
    Thêm vào cài đặt woocommerce

    Việc bạn cần làm là chỉ cần copy đoạn code bên dưới vào Functions.php của theme đang sử dụng là được:

    /*
 * Prefix and sufix to price
 * Author: http://nhanhmedia.com
 */
/*Add default setting*/
function devvn_woocommerce_general_settings( $array ) {
    $array[] = array( 'name' => __( 'Prefix and suffix to price', 'woocommerce' ), 'type' => 'title', 'desc' => '', 'id' => 'woocommerce_presuffix_settings' );
    $array[] = array(
        'title'    => __( 'Prefix', 'woocommerce' ),
        'desc'     => __( 'Add prefix to price. Leave blank to disable.', 'woocommerce' ),
        'id'       => 'devvn_woocommerce_price_prefix',
        'desc_tip' => true,
        'type'     => 'text',
    );
    $array[] = array(
        'title'    => __( 'Suffix', 'woocommerce' ),
        'desc'     => __( 'Add suffix to price. Leave blank to disable.', 'woocommerce' ),
        'id'       => 'devvn_woocommerce_price_suffix',
        'desc_tip' => true,
        'type'     => 'text',
    );
    $array[] = array( 'type' => 'sectionend', 'id' => 'woocommerce_presuffix_settings');
    return $array;
};
add_filter( 'woocommerce_general_settings', 'devvn_woocommerce_general_settings', 10, 1 );

    Sau khi xong bước này thì sẽ được như hình trên!

    Thêm metabox vào mỗi sản phẩm

    Chẳng hạn, bạn có 1 website bán bách hóa, như vậy website sẽ có rất nhiều mặt hàng khác nhau mà mỗi sản phẩm sẽ có cách tính giá riêng:

    • Ví dụ: Nước ngọt thì tính theo “chai”, gia vị thì tính theo “gói”, Mỳ tôm thì tính theo “thùng”…

    Vậy để quản lý hiển thị đơn vị tính giá phù hợp cho từng sản phẩm, chúng ta cần ghi giá trị tương ứng cho từng sản phẩm cụ thể. Vì thế mà chúng ta đến với bước thứ 2 này, nó cho phép chúng ta ghi đè giá trị mặc định để tùy ý điều chỉnh cho phù hợp với từng sản phẩm.

    Cách 2: Thêm metabox vào mỗi sản phẩm
    Thêm metabox vào mỗi sản phẩm

    Để thực hiện, bạn hãy copy đoạn code bên dưới vào file Functions.php của theme đang sử dụng:

    /*Add metabox to product*/
add_action( 'woocommerce_product_options_general_product_data', 'devvn_presuffix_products' );
function devvn_presuffix_products() {
    //Add metabox prefix to product
    woocommerce_wp_text_input( array(
        'id' => '_product_prefix',
        'label' => 'Prefix',
        'description' => 'Add prefix to price. Leave blank to default.',
        'desc_tip' => 'true',
    ) );
    //Add metabox suffix to product
    woocommerce_wp_text_input( array(
        'id' => '_product_suffix',
        'label' => 'Suffix',
        'description' => 'Add suffix to price. Leave blank to default.',
        'desc_tip' => 'true',
    ) );
}
/*Save metabox prefix and suffix*/
add_action( 'woocommerce_process_product_meta', 'devvn_presuffix_products_save' );
function devvn_presuffix_products_save( $post_id ) {
    if(get_post_type($post_id) == 'product'){
        if ( isset($_POST['_product_prefix']) ) {
            if ($_POST['_product_prefix'] != "") {
                update_post_meta($post_id, '_product_prefix', sanitize_text_field($_POST['_product_prefix']));
            } else {
                delete_post_meta($post_id, '_product_prefix');
            }
        }
        if ( isset($_POST['_product_suffix']) ) {
            if ($_POST['_product_suffix'] != "") {
                update_post_meta($post_id, '_product_suffix', sanitize_text_field($_POST['_product_suffix']));
            } else {
                delete_post_meta($post_id, '_product_suffix');
            }
        }
    }
}

    Sau khi thiết lập, bạn sẽ có thể tùy biến cách hiển thị giá phù hợp với từng mặt hàng của mình.

    Kết quả sẽ hiển thị rõ ràng, giúp khách hàng dễ hiểu, ví dụ:

    • Nước ngọt: 15.000đ/chai
    • Gia vị: 40.000/gói
    • Mỳ tôm: 200.000/thùng

    Ngoài ra, nến bạn không muốn hiển thị đơn vị tính, chỉ cần nhập số 0 vào phần cài đặt, kết quả sẽ chỉ hiển thị giá sản phẩm như ban đầu.

    Code hiển thị nội dung vào trước và sau giá

    Bước này để chúng ta cho Prefix và Suffix hiển thị ra ngoài giao diện người dùng.

    Bạn hãy copy đoạn code bên dưới vào file Functions.php của theme đang sử dụng:

    /*Add to price html*/
add_filter( 'woocommerce_get_price_html', 'bbloomer_price_prefix_suffix', 100, 2 );
function bbloomer_price_prefix_suffix( $price, $product ){
    $prefix = get_option( 'devvn_woocommerce_price_prefix');
    $suffix = get_option( 'devvn_woocommerce_price_suffix');
    $prefix_product = sanitize_text_field(get_post_meta($product->get_ID(), '_product_prefix', true));
    $suffix_product = sanitize_text_field(get_post_meta($product->get_ID(), '_product_suffix', true));
    if($prefix_product || (is_numeric($prefix_product) && $prefix_product == 0)) $prefix = $prefix_product;
    if($suffix_product || (is_numeric($suffix_product) && $suffix_product == 0)) $suffix = $suffix_product;
    $prefix = ($prefix && $prefix !== 0)?'<span class="devvn_woocommerce_price_prefix">'.$prefix.'</span>':'';
    $suffix = ($suffix && $suffix !== 0)?'<span class="devvn_woocommerce_price_suffix">'.$suffix.'</span>':'';
    $price = $prefix.$price.$suffix;
    return apply_filters( 'devvn_woocommerce_get_price', $price );
}

    Sau khi thực hiện xong thì bạn sẽ nhận được kết quả như hình.

    Hiển thị nôi dung trước và sau giá sản phẩm
    Hiển thị nôi dung trước và sau giá sản phẩm

    Full code

    Phần này dành cho những bạn nào lười, 1 phát ăn liền mà không cần đọc nội dung =)) Nếu bạn đã thực hiện theo những bước trên thì bỏ quan phần này nhé!

    Dán toàn bộ code sau vào functions.php của theme đang sử dụng là được

    /*
 * Prefix and sufix to price
 * Author: http://nhanhmedia.com
 */
/*Add default setting*/
function devvn_woocommerce_general_settings( $array ) {
    $array[] = array( 'name' => __( 'Prefix and suffix to price', 'woocommerce' ), 'type' => 'title', 'desc' => '', 'id' => 'woocommerce_presuffix_settings' );
    $array[] = array(
        'title'    => __( 'Prefix', 'woocommerce' ),
        'desc'     => __( 'Add prefix to price. Leave blank to disable.', 'woocommerce' ),
        'id'       => 'devvn_woocommerce_price_prefix',
        'desc_tip' => true,
        'type'     => 'text',
    );
    $array[] = array(
        'title'    => __( 'Suffix', 'woocommerce' ),
        'desc'     => __( 'Add suffix to price. Leave blank to disable.', 'woocommerce' ),
        'id'       => 'devvn_woocommerce_price_suffix',
        'desc_tip' => true,
        'type'     => 'text',
    );
    $array[] = array( 'type' => 'sectionend', 'id' => 'woocommerce_presuffix_settings');
    return $array;
};
add_filter( 'woocommerce_general_settings', 'devvn_woocommerce_general_settings', 10, 1 );
/*Add metabox to product*/
add_action( 'woocommerce_product_options_general_product_data', 'devvn_presuffix_products' );
function devvn_presuffix_products() {
    //Add metabox prefix to product
    woocommerce_wp_text_input( array(
        'id' => '_product_prefix',
        'label' => 'Prefix',
        'description' => 'Add prefix to price. Leave blank to default.',
        'desc_tip' => 'true',
    ) );
    //Add metabox suffix to product
    woocommerce_wp_text_input( array(
        'id' => '_product_suffix',
        'label' => 'Suffix',
        'description' => 'Add suffix to price. Leave blank to default.',
        'desc_tip' => 'true',
   ) );
}
/*Save metabox prefix and suffix*/
add_action( 'woocommerce_process_product_meta', 'devvn_presuffix_products_save' );
function devvn_presuffix_products_save( $post_id ) {
   if(get_post_type($post_id) == 'product'){
       if ( isset($_POST['_product_prefix']) ) {
           if ($_POST['_product_prefix'] != "") {
               update_post_meta($post_id, '_product_prefix', sanitize_text_field($_POST['_product_prefix']));
           } else {
               delete_post_meta($post_id, '_product_prefix');
           }
       }
       if ( isset($_POST['_product_suffix']) ) {
           if ($_POST['_product_suffix'] != "") {
               update_post_meta($post_id, '_product_suffix', sanitize_text_field($_POST['_product_suffix']));
           } else {
               delete_post_meta($post_id, '_product_suffix');
           }
       }
   }
}
/*Add to price html*/
add_filter( 'woocommerce_get_price_html', 'bbloomer_price_prefix_suffix', 100, 2 );
function bbloomer_price_prefix_suffix( $price, $product ){
   $prefix = get_option( 'devvn_woocommerce_price_prefix');
   $suffix = get_option( 'devvn_woocommerce_price_suffix');
   $prefix_product = sanitize_text_field(get_post_meta($product->get_ID(), '_product_prefix', true));
   $suffix_product = sanitize_text_field(get_post_meta($product->get_ID(), '_product_suffix', true));
   if($prefix_product || (is_numeric($prefix_product) && $prefix_product == 0)) $prefix = $prefix_product;
   if($suffix_product || (is_numeric($suffix_product) && $suffix_product == 0)) $suffix = $suffix_product;
   $prefix = ($prefix && $prefix !== 0)?'<span class="devvn_woocommerce_price_prefix">'.$prefix.'</span>':'';
   $suffix = ($suffix && $suffix !== 0)?'<span class="devvn_woocommerce_price_suffix">'.$suffix.'</span>':'';
   $price = $prefix.$price.$suffix;
   return apply_filters( 'devvn_woocommerce_get_price', $price );
}

    Ngoài ra có chút Css để cho đẹp hơn. cái này tùy vào từng theme và từng thẩm mỹ mỗi người mà style nhé. Có 2 class cho các bạn style là devvn_woocommerce_price_prefixvà devvn_woocommerce_price_suffix

    span.devvn_woocommerce_price_prefix {
    font-size: 0.8em;
    margin: 0 10px 0 0;
}
span.devvn_woocommerce_price_suffix {
    font-size: 0.8em;
    margin: 0 0 0 10px;
}

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

    Picture of Trương Văn Long

    Trương Văn Long

    5 1 đánh giá
    Đánh giá bài viết
    Theo dõi
    Thông báo của
    guest
    0 Góp ý
    Cũ nhất
    Mới nhất Được bỏ phiếu nhiều nhất
    Phản hồi nội tuyến
    Xem tất cả bình luận
    CHIA SẺ NỘI DUNG NẾU NÓ HỮU ÍCH NHÉ ^^
    Chuyên mục
    Bảng giá công cụ
    • Semrush - 99k / 1 tháng
    • Keyword Tools - 120k / 1 tháng
    • Canva Pro - 99k / 1 năm
    • Capcup Pro - 299k / 1 năm
    • Còn rất nhiều công cụ khác ...
    • Hoàn tiền nếu lỗi
    • Hỗ trợ 24/7
    • Không giới hạn
    Mua ngay

    Có thể bạn quan tâm

    blank

    Địa chỉ: Tu Hoàng, Phương Canh, Nam Từ Liêm, Hà Nội

    Phone: 0325 326 981

    Mail:nhanhmediasp@gmail.com

    Liên kết nhanh

    Về nhanh Media

    Dự án

    Blog

    Liên hệ

    Dịch vụ

    Thiết kế website

    Fix mã độc website

    Đăng ký nhận bản tin

    Facebook-f Youtube

    Thiết kế và vận hành bởi Nhanh Media

    Gọi ngay
    Fanpage

    Trang chủ
    Mua Hosting
    Zalo