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

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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é!

Giuseart.com---Tùy-biến-khối-sản-phẩm-biến-thể-woocommerce — Giuseart.com – Tùy biến khối sản phẩm biến thể của woocommerce

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.

// 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
    }
}

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()) : ?>

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>';

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

.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;
}

.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é!