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ó)

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

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

Tạo file functions.php:

<?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' );
}

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:

Thiết kế Website chuẩn SEO & tối ưu doanh số

Ftechx thiết kế trọn gói từ giao diện, hosting đến hệ thống thanh toán tự động.

Tư vấn qua Zalo Xem bảng giá

// [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' => '',
        'items'   => '',
        'discount_percent' => 15,
    ), $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 '';

    $main_price = $main_product->get_price();
    $bundle_price = $main_price;
    $original_total = $main_price;

    ob_start(); ?>
    <div class="deal-soc-bundle">
        <h3 class="bundle-title">Chọn mua kèm deal sốc</h3>
        <div class="bundle-grid">
            <!-- Sản phẩm chính -->
            <div class="bundle-item">
                <?php echo $main_product->get_image('thumbnail'); ?>
                <p><?php echo wp_trim_words($main_product->get_name(), 5); ?></p>
                <strong><?php echo wc_price($main_price); ?></strong>
                <input type="checkbox" checked disabled>
                <small>(Bắt buộc)</small>
            </div>

            <!-- Sản phẩm mua kèm -->
            <?php foreach ($items as $item):
                $price = $item->get_price();
                $original_total += $price;
            ?>
            <div class="bundle-item">
                <?php echo $item->get_image('thumbnail'); ?>
                <p><?php echo wp_trim_words($item->get_name(), 5); ?></p>
                <strong><?php echo wc_price($price); ?></strong>
                <label><input type="checkbox" class="bundle-check"> Đã chọn</label>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- Tổng tiền -->
        <div class="bundle-summary">
            <p>Tổng tiền: <span class="original-price"><?php echo wc_price($original_total); ?></span></p>
            <p>Tiết kiệm: <span class="save-amount">0đ</span></p>
            <p><strong>Tổng thanh toán: <span class="deal-price"><?php echo wc_price($original_total); ?></span></strong></p>
            <button class="btn-deal-soc">Bấm để mua deal sốc</button>
            <div class="loading-msg" style="display:none">Đang thêm...</div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

Bước 3: Thêm CSS Cho Giao Diện

Thêm đoạn CSS sau vào file style.css của Child Theme:

.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;
}
.btn-deal-soc {
    background: #d32f2f;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}
.btn-deal-soc:hover {
    background: #b71c1c;
}