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é!
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!
Chia sẻ bài viết:
