Thay đổi vị trí giá biến thể từ dưới lên trên Woocomerce

Khi bạn dùng giao diện flatsome hoặc các theme dùng plugin Woocomerce để quản lý sản phẩm mà dùng biến thể thì mặc định khi bạn click vào tên thuộc tính vị trí giá của biến thể luôn nằm dưới các biến thể. Điều này khiến cho trải nghiệm người dùng không được tốt cho lắm. Chính vì thế bài  sau sẽ hướng dẫn bạn cách đưa vị trí hiển thị giá biến thể lên trên thay thế vị trí giá mặc định khi bạn click.

Hướng dẫn chi tiết cách đưa vị trí giá biến thể lên trên bên dưới tiêu đề

Thật ra điều này được giải quyết chỉ với 1 đoạn code, và bạn có thể chèn đoạn code này vào file function là xong:

add_action( 'wp_footer', 'hien_gia_bien_the_duoi_tieu_de', 25 );
function hien_gia_bien_the_duoi_tieu_de() {
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
jQuery(document).ready(function(event) {
var m = $('.price.product-page-price').html();
jQuery('.single_variation_wrap').change(function(){
$('.woocommerce-variation-price').hide();
var p = $('.single_variation_wrap').find('.price').html();
$('.price.product-page-price').html(p);
});
jQuery('body').on('click','.reset_variations',function(event) {
$('.price.product-page-price').html(m);
});
});
});
</script> 
<?php
}

Nếu là một người mới tìm hiểu wordpress thì bạn có thể chưa biết file function ở đâu. Vì vậy bạn làm theo các bước sau để dán đoạn code vào:

Bước 1: Vào giao diện

Bước 2: Chọn Theme file Editor (chỉnh sửa giao diện)

Bước 3: Chọn file function.php ở phần file giao diện

Bước 4: Dán đoạn code đã copy ở trên vào rồi lưu lại.

Toàn bộ quá trình bạn xem hình bên dưới là sẽ làm được.

 

Những lợi ích của việc đưa giá bên dưới biến thể lên trên vị trí giá dưới tiêu đề

– Giúp đồng nhất hiển thị vị trí giá tốt hơn. Ngay khi vào chi tiết sản phẩm người dùng đã bị thu hút vị trí giá mặc định rồi.  Chính vì thế nếu như họ click chọn thuộc tính mà giá hiện ở một chỗ khác thì sẽ ít chú ý hơn, từ đó họ ngộ nhận là giá của biến thể chọn là giá ở vị trí giá mặc định, trong khi giá biến thể thì có thể bằng hoặc khác. Nên việc đồng nhất vị trí giá sẽ giúp khách hàng không hiểu lầm bạn.

– Một website chuyên nghiệp là một website luôn tuân thủ những tiêu chuẩn đồng nhất, vì vậy giá biến thể hiển thị ở vị trí mặc định sẽ giúp cho bố cục đồng nhất, làm tăng trải nghiệm người dùng với website của bạn.

Đây chỉ là 1 thủ thuật nhỏ trong chuyên mục Chia sẻ về woocomerce. Hi vọng sẽ giúp bạn trong việc thay đổi vị trí giá biến thể