Tùy biến hiển thị cụm sản phẩm biến thể woocommerce đẹp và hữu ích nhất

Đăng vào bởi quanly

Chào các bạn, hôm nay cùng mình tùy biến khối sản phẩm biến thể mặc định của woocommerce trở nên đẹp và hữu dụng hơn nhé!

Mặc định, khối sản phẩm biến thể của woocommerce có giao diện không được bắt mắt và khá là rối đối với khách hàng phổ thông.

Có nhiều bài viết trên internet hướng dẫn tùy biến khoảng giá sản phẩm biến thể dạng “Min price – Max price” thành “Min Price” rồi nhưng phần hiển thị các biến thể ở dưới chưa có nhiều hướng dẫn chi tiết nên đa phần anh em làm web không biết sửa.

Đoạn code mình hướng dẫn sẽ tùy biến cụm sản phẩm biến thể woocommerce mặc định thành bố cục như hình trên. Cụ thể là:

  • Khoảng giá mặc định có dạng 50.000đ – 60.000đ sẽ được chỉnh sửa. Khi đó, nếu sản phẩm biến thể được chọn thì hiển thị giá của biến thể đó. Nếu chưa có biến thể nào được chọn thì hiển thị giá thấp nhất của các biến thể.
  • Bố cục các biến thể được chỉnh sửa. Trong đó, tiêu đề sẽ ghi luôn các giá trị của thuộc tính. Ví dụ: Sản phẩm máy tính test ABC | SSD 1T | Ram 65G | Core i9. Giá sẽ được hiển thị đầy đủ giá cũ và giá khuyến mại.

Code này rất phù hợp cho các bạn làm lĩnh vực máy tính, điện máy hoặc bán đồ công nghệ. Xem demo: //digilap.vn/laptop-gaming-hp-omen-16-wf1137tx-a2nr9pa/

Bước 1: Tạo sản phẩm biến thể

Các bạn tiến hành tạo sản phẩm biến thể woocommerce. Đây là kiến thức tổng quát mình không hướng dẫn chi tiết tạo sản phẩm biến thể ở đây nữa nha.

Bước 2: Mở file function.php

Các bạn vào Quản trị – Giao diện – Theme File Editor (sửa theme).  Sau đó, tìm và mở file function.php của child theme các bạn đang kích hoạt.

Bước 3: Copy code vào function.php

Copy toàn bộ đoạn code dưới đây vào function.php và tiến hành lưu lại.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
// Add custom Theme Functions here
add_action('woocommerce_before_add_to_cart_form', 'custom_variation_display');
// Thay đổi hiển thị giá sản phẩm biến thể
add_filter('woocommerce_variable_price_html', 'custom_variable_price', 10, 2);
function custom_variable_price($price, $product) {
    if ($product->is_type('variable')) {
        $prices = $product->get_variation_prices();
        if (empty($prices['price'])) return '';
        $min_price = min($prices['price']);
        // Hiển thị giá nhỏ nhất mặc định kèm data để JS xử lý
        return '<span class="custom-variable-price" data-default-price="' . esc_attr(wc_price($min_price)) . '">' . wc_price($min_price) . '</span>';
    }
    return $price;
}
// Thêm JS inline để update giá theo biến thể
add_action('wp_footer', function() {
    if (is_product()) : ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var $form = $('form.variations_form');
        var $priceSpan = $('.custom-variable-price');
        if ($form.length && $priceSpan.length) {
            $form.on('found_variation', function(event, variation) {
                if (variation && variation.price_html) {
                    $priceSpan.fadeOut(150, function() {
                        $(this).html(variation.price_html).fadeIn(150);
                    });
                }
            });
            $form.on('reset_data', function() {
                $priceSpan.fadeOut(150, function() {
                    $(this).html($priceSpan.data('default-price')).fadeIn(150);
                });
            });
        }
    });
    </script>
    <?php
    endif;
});
function custom_variation_display() {
    global $product;
    if ($product->is_type('variable')) {
        $variations = $product->get_available_variations();
        $product_title = $product->get_name();
        // Sắp xếp biến thể theo giá tăng dần
        usort($variations, function($a, $b) {
            return $a['display_price'] - $b['display_price'];
        });
        echo '<ul class="custom-variation-list">';
        
        foreach ($variations as $variation) {
            $variation_id = $variation['variation_id'];
            $price = $variation['display_price'];
            $regular_price = $variation['display_regular_price'];
            $is_selected = $variation_id == $product->get_default_attributes() ? 'checked' : '';
            $variation_title = [];
            foreach ($variation['attributes'] as $attr_slug => $attr_value) {
                $taxonomy = str_replace('attribute_', '', $attr_slug);
                $term = get_term_by('slug', $attr_value, $taxonomy);
                if ($term) {
                    $variation_title[] = $term->name;
                }
            }
            echo '<li class="variation-item' . ($is_selected ? ' selected' : '') . '">';
            echo '<label>';
            echo '<input type="radio" name="custom_variation_id" value="' . $variation_id . '" ' . $is_selected . ' data-attributes=\'' . json_encode($variation['attributes']) . '\'>';
            echo '<div class="variation-content">';
            echo '<span class="variation-title"><strong>' . $product_title . '</strong> | ' . implode(' | ', $variation_title) . '</span>';
            echo '<span class="variation-price">' . wc_price($price);
            if ($price < $regular_price) {
                echo ' <del>' . wc_price($regular_price) . '</del>';
            }
            echo '</span>';
            echo '</div>';
            echo '</label>';
            echo '</li>';
        }
        echo '</ul>';
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            var $form = $('form.variations_form');
            var $radioButtons = $('input[name="custom_variation_id"]');
            var $variationItems = $('.variation-item');
            // Đợi form biến thể được khởi tạo
            $form.on('wc_variation_form', function() {
                // Lắng nghe sự kiện click vào radio button
                $radioButtons.on('change', function() {
                    var $this = $(this);
                    var attributes = $this.data('attributes');
                    
                    // Xóa class selected của tất cả các item
                    $variationItems.removeClass('selected');
                    // Thêm class selected cho item được chọn
                    $this.closest('.variation-item').addClass('selected');
                    
                    // Reset form trước khi cập nhật
                    $form.find('select').val('').change();
                    
                    // Cập nhật từng select box
                    Object.keys(attributes).forEach(function(key) {
                        var value = attributes[key];
                        var $select = $form.find('select[name="' + key + '"]');
                        
                        if ($select.length) {
                            $select.val(value).trigger('change');
                        }
                    });
                    // Đợi một chút để các select box được cập nhật
                    setTimeout(function() {
                        // Cập nhật variation_id
                        $form.find('input[name="variation_id"]').val($this.val()).change();
                        
                        // Kích hoạt sự kiện found_variation
                        $form.trigger('found_variation', [variations[$this.val()]]);
                        
                        // Kích hoạt kiểm tra biến thể
                        $form.trigger('check_variations');
                    }, 100);
                });
                // Tự động chọn biến thể đầu tiên (giá thấp nhất) khi trang load
                $radioButtons.first().prop('checked', true).trigger('change');
            });
            // Đồng bộ ngược lại khi người dùng thay đổi select box
            $form.on('found_variation', function(event, variation) {
                var $radio = $radioButtons.filter('[value="' + variation.variation_id + '"]');
                if ($radio.length) {
                    $radio.prop('checked', true);
                    // Cập nhật class selected
                    $variationItems.removeClass('selected');
                    $radio.closest('.variation-item').addClass('selected');
                }
            });
        });
        </script>
        <style>
            .variation-item {padding:5px;border: 1px solid #e6e6e6;
                transition: all 0.3s ease;
}.variation-item:hover{ background-color:#ffc10733;}
            
            .variation-item.selected {
                   background-color:#ffc10733;
    border-color: #FF9800;
    box-shadow: 0 0 0 1px #FF9800;
    padding: 5px;
            }
            
            .variation-item.selected .variation-content {
                color:#ce2d1f;
            }
            
            .variation-item.selected .variation-price {
                font-weight: 600;
            }
        </style>
        <?php
    }
}

Bước 5: Trang trí với CSS

Bạn copy toàn bộ code CSS dưới đây, paste vào Giao diện – Tùy biến – Custom CSS. Đối với theme Flatsome: Giao diện – Tùy biến – Style – Custom CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.product-info .price span.amount, .product-info .price ins bdi {
    font-size: 22px;
}
.product-info .price del bdi, .product-info .price {
    color: gray;
    font-size: 15px;
}
.custom-variation-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 15px;
}
.variation-item.selected {
    background-color: #ffc10733;
    border-color: #FF9800;
    box-shadow: 0 0 0 1px #FF9800;
    padding: 5px;
}
.variation-item {
    padding: 5px;
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease;
margin-left: 0 !important;
    width: 100%;
    margin-bottom: 0;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    background: white;
}
.variation-item label {
    margin-bottom: 0;
    display: flex;
}
.variation-item input[type="radio"] {
    display: inline-flex;
}
.variation-item.selected .variation-content {
    color: #ce2d1f;display: flex;
    flex-direction: column;
}
.variation-title {
    font-weight: bold;
    font-size: 14px;
}
.variation-price {
    color: gray;
    font-size: 16px;
}
.variation-item.selected .variation-price {
    font-weight: 600;
}.variation-price span.amount {
    color: #da0000;
}.variation-price del span {
    font-size: 14px;
    color: gray !important;
}
.product-info .variations {
    display: none;
}

Sau khi update, bạn ra view sản phẩm biến thể xem đã thay đổi layout chưa nha. Có thể code CSS các bạn copy về sẽ không được đúng ý nên các bạn cũng nên tự tối ưu thêm về mặt hiển thị nhé!

Chúc các bạn thành công, nếu gặp lỗi hay khó khăn gì cứ bình luận hoặc nhắn tin mình hỗ trợ. Xin cám ơn!

 

Bài viết cùng chủ đề:

[Share] – Plugin sắp xếp thứ tự hiển thị danh mục sản phẩm woocommerce
17/08/2026

Chào các bạn, hôm nay mình xin chia sẻ plugin sắp xếp thứ tự hiển thị danh mục sản phẩm woocommerce, plugin sẽ hữu ích cho những ai có nhu cầu tùy chỉnh vị trí hiển thị các danh mục con trong trang danh mục sản phẩm hiện tại. Trước khi vào bài viết này,...

Hướng dẫn show toàn bộ danh mục con kèm sản phẩm trong trang danh mục cha hiện tại
17/08/2026

Chào các bạn, mặc định trang Danh mục sản phẩm của Woocommerce chỉ cho phép hiển  thị các card sản phẩm, người dùng phải điều hướng các danh mục con thông qua menu hoặc sidebar, điều này gây không ít khó khăn cho việc thao tác và trải nghiệm người dùng. Do đó, xuất phát...

Plugin hiển thị danh sách mã giảm giá đẹp cho wordpress – WC Coupon Grid
17/08/2026

Chào các bạn, hôm nay mình xin giới thiệu plugin hiển thị mã giảm giá đẹp cho wordpress, mời bạn cùng tham khảo và nếu có nhu cầu thì ủng hộ mình nhé! Để hoạt động đúng, plugin yêu cầu kích hoạt trước đó plugin Woocommerce và đồng thời đã tạo mã giảm giá trong phần cài đặt...

Tạo slider bài viết liên quan đẹp cho website wordpess sử dụng theme Flatsome
17/08/2026

Hôm nay, mình tiếp tục chia sẻ tới các bạn cách tạo slider bài viết liên qua đẹp cho website wordpress sử dụng theme Flatsome nhé Bước 1: Copy code tạo slider bài viết liên quan vào theme Các bạn vào Giao diện – Sửa (theme file editor) – theme Flatsome – Template-part/post/content-single.php. Chèn đoạn code...

Tạo sản phẩm biến thể dạng Cross Sells đẹp cho woocommerce
17/08/2026

Trước tiên ta cần phần biệt: sản phẩm biến thể mặc định trong woocommerce đã quá quen thuộc rồi. Tuy nhiên, các biến thể mặc định hiển thị rất xấu và không chuyên nghiệp. Hôm nay, mình sẽ cùng nhau nghiên cứu làm sản phẩm biến thể đẹp và chuyên nghiệp hơn nhiều với Cross...

Hoa baby và Ý nghĩa của hoa baby màu trắng, hồng, tím, xanh
17/08/2026

Hoa Baby là một loài hoa nhỏ mang một vẻ đẹp mong manh, yếu đuối nhưng lại có một sức sống tiềm tàng và mãnh liệt. Vậy đôi khi bạn có cảm thấy tò mò với tên gọi baby và ý nghĩa đằng sau tên gọi đó hay không? Hay các màu sắc của hoa baby...