Hôm nay, Thịnh chia sẻ bạn một đoạn code rất hay và có nhiều lợi ích thiết thực để dễ hình dung, bạn hãy xem hình ở ngay dưới đây
Bình thường khi bạn sử dụng Woocommerce để đăng những sản phẩm.
Mặc định của Woocomerce sẽ chỉ là giá sản phẩm / số lượng là một.
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002207.png)
Nếu bạn bán những mặt hàng đơn giản như điện thoại, tủ lạnh, mặt hàng gia dụng…vv thì ổn áp, không có vấn đề gì.
Nhưng trong trường hợp, bạn bán những sản phẩm như trái cây, thịt bò, thịt lợn…
Bạn không thể nào để giá / số lượng 01.
Như vậy thì rất bất cập.
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002218.png)
Vì vậy, trong bài viết này Thịnh sẽ chia sẻ bạn cách thêm đơn vị tính giá tiền của sản phẩm trong Woocommerce.
Cách thêm đơn vị tính giá tiền của sản phẩm trong Woocommerce
Để có thể thêm tính năng đơn vị tính giá tiền của sản phẩm trong woocommerce bạn làm như sau.
Đầu tiên bạn cần truy cập vào trang quản trị website wordpress.
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002188.jpg)
Tiếp theo, bạn chọn Giao diện —--> Theme File Editor —-> Functions.php
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002189.jpg)
Kế tiếp, bạn copy đoạn code HTML giúp thêm đơn vị tính giá tiền của sản phẩm trong Woocommerce vào File Functions.php
Đoạn code HTML
Nguồn Code trên được viết và chia sẻ bởi anh: Vườn tài nguyên . Cảm ơn anh
/*
* Them don vi gia tien
*/
/*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 );
}
Cuối cùng, bạn bấm lưu là hoàn tất quá trình thêm tính năng thêm đơn vị giá tiền của sản phẩm.
Khi này, tại phần đăng sản phẩm của woocommerce sẽ có thêm tính năng mới như sau.
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002211.png)
Bạn sẽ có 2 phần để điền thông tin giá sản phẩm là Prefix và Suffix.
Giải thích: Prefix là thành tố đứng trước giá sản phẩm:
Ví dụ: Chỉ từ 10.000 VNĐ , Chỉ còn 15.000 , Giảm giá sốc…..
Suffix là phần tố đứng sau giá sản phẩm
Ví dụ: 10.000 VNĐ/ 1kg hoặc 15.000.000 /m2……
Lưu ý: Bạn cần thêm đoạn CSS tạo khoảng cách giữa hai thành tố Prefix và Suffix.
Nếu không thêm đoạn CSS này, hai thành tố vừa thêm vào Woocommerce dính rất sát với nhau, nhìn rất mất thẩm mỹ.
Đoạn Css bạn copy ở dưới đây
/* Điều chỉnh khoảng cách của tiền tố và hậu tố giá */
.devvn_woocommerce_price_prefix {
margin-right: 10px;
}
.devvn_woocommerce_price_suffix {
margin-left: 5px;
}
Cách thêm đoạn CSS, bạn vào Tùy biến —-> CSS bổ sung
![Cách Export Email hàng loạt trong trang đơn hàng order Woocommerce](https://thinhtony.com/wp-content/uploads/2024/07/1000002212.png)
Xong như vậy là hoàn tất.
Tổng kết
Thịnh cảm ơn bạn đã đọc bài viết của Thịnh nha.
Như vậy, Thịnh đã hướng dẫn bạn cách thêm đơn vị tính giá tiền của sản phẩm trong Woocommerce rùi nhé.
Khá đơn giản đúng không nè? Thịnh chúc bạn áp dụng tính năng này hiệu quả và làm thành công nha.