Hướng Dẫn Tạo Section Sản Phẩm Mua Kèm Deal Sốc Bằng Code (Không Dùng Plugin) Cho Flatsome

Bạn muốn tạo section “Mua kèm deal sốc” giống hình ảnh – với sản phẩm chính, các lựa chọn mua kèm có checkbox, tổng giá tự động cập nhật, và nút “Bấm để mua deal sốc” – hoàn toàn bằng code, không dùng plugin? Bài viết này hôm nay FTechx Solutions sẽ hướng dẫn từng bước chi tiết, chỉ sử dụng PHP, HTML, CSS, JavaScript thuần và tận dụng UX Builder + Child Theme của Flatsome.

Lợi ích: Không phụ thuộc plugin → nhẹ hơn, không lỗi conflict, kiểm soát 100% logic, dễ tùy biến theo từng sản phẩm. Yêu cầu: Biết cơ bản PHP, JS, và có Flatsome Child Theme đã kích hoạt.

Tổng Quan Kỹ Thuật

Thành phần Công nghệ Hiển thị sản phẩm WooCommerce Loop + wc_get_product() Checkbox chọn mua kèm HTML <input type=”checkbox”> Tính tổng giá động JavaScript (pure) Nút thêm vào giỏ (bundle) AJAX add_to_cart với product_id + variation_id Layout Flatsome UX Builder + Shortcode tùy chỉnh Style CSS trong Child Theme

Bước 1: Tạo Child Theme Flatsome (Nếu Chưa Có)

1. Tạo thư mục: wp-content/themes/flatsome-child
2. Tạo file style.css:

css /* Theme Name: Flatsome Child Template: flatsome */ 1234 /* Theme Name:   Flatsome Child Template:     flatsome*/

3. Tạo file functions.php:

php &lt;?php add_action( 'wp_enqueue_scripts', 'flatsome_child_enqueue_styles' ); function flatsome_child_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?&gt; 123456 &lt;?phpadd_action( 'wp_enqueue_scripts', 'flatsome_child_enqueue_styles' );function flatsome_child_enqueue_styles() {    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}?&gt;

4. Kích hoạt Flatsome Child trong Appearance > Themes.

Bước 2: Tạo Shortcode [deal_soc_bundle] (Code Chính)

Thêm vào functions.php của Child Theme:

php // [deal_soc_bundle] - Section Mua Kèm Deal Sốc add_shortcode('deal_soc_bundle', 'deal_soc_bundle_shortcode'); function deal_soc_bundle_shortcode($atts) { $atts = shortcode_atts(array( 'main_id' =&gt; '', // ID sản phẩm chính 'items' =&gt; '', // Danh sách ID mua kèm: 123,456,789 'discount_percent' =&gt; 15, // % giảm khi mua kèm ), $atts); if (!$atts['main_id'] || !$atts['items']) return ''; $main_product = wc_get_product($atts['main_id']); if (!$main_product) return ''; $item_ids = array_filter(array_map('trim', explode(',', $atts['items']))); $items = array(); foreach ($item_ids as $id) { $p = wc_get_product($id); if ($p) $items[] = $p; } if (empty($items)) return ''; // Tính giá gốc &amp; giá deal $main_price = $main_product-&gt;get_price(); $bundle_price = $main_price; $original_total = $main_price; ob_start(); ?&gt; &lt;div&gt; &lt;h3&gt;Chọn mua kèm deal sốc&lt;/h3&gt; &lt;div&gt; &lt;!-- Sản phẩm chính --&gt; &lt;div&gt; &lt;?php echo $main_product-&gt;get_image('thumbnail'); ?&gt; &lt;p&gt;&lt;?php echo wp_trim_words($main_product-&gt;get_name(), 5); ?&gt;&lt;/p&gt; &lt;strong&gt;&lt;?php echo wc_price($main_price); ?&gt;&lt;/strong&gt; &lt;input type="checkbox" checked disabled&gt; &lt;small&gt;(Bắt buộc)&lt;/small&gt; &lt;/div&gt; &lt;!-- Sản phẩm mua kèm --&gt; &lt;?php foreach ($items as $item): $price = $item-&gt;get_price(); $original_total += $price; ?&gt; &lt;div&gt; &lt;?php echo $item-&gt;get_image('thumbnail'); ?&gt; &lt;p&gt;&lt;?php echo wp_trim_words($item-&gt;get_name(), 5); ?&gt;&lt;/p&gt; &lt;strong&gt;&lt;?php echo wc_price($price); ?&gt;&lt;/strong&gt; &lt;label&gt;&lt;input type="checkbox"&gt; Đã chọn&lt;/label&gt; &lt;/div&gt; &lt;?php endforeach; ?&gt; &lt;/div&gt; &lt;!-- Tổng tiền --&gt; &lt;div&gt; &lt;p&gt;Tổng tiền: &lt;span&gt;&lt;?php echo wc_price($original_total); ?&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Tiết kiệm: &lt;span&gt;0đ&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Tổng thanh toán: &lt;span&gt;&lt;?php echo wc_price($original_total); ?&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt; &lt;button&gt; Bấm để mua deal sốc &lt;/button&gt; &lt;div&gt;Đang thêm...&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .deal-soc-bundle { border:1px solid #eee; padding:20px; margin:20px 0; background:#fafafa; border-radius:8px; } .bundle-title { margin:0 0 15px; color:#d32f2f; font-size:20px; } .bundle-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; margin-bottom:20px; } .bundle-item { text-align:center; padding:10px; border:1px solid #ddd; border-radius:6px; background:#fff; } .bundle-item img { width:80px; height:80px; object-fit:contain; } .bundle-item label { display:block; margin-top:8px; font-size:14px; } .bundle-item input[type="checkbox"] { margin-right:5px; } .bundle-summary { text-align:right; font-size:16px; } .original-price { text-decoration:line-through; color:#999; } .save-amount { color:#d32f2f; font-weight:bold; } .deal-price { color:#28a745; font-size:20px; font-weight:bold; }