Thủ thuật wordpress, Bài Viết, Tất cả bài viết, Woocommerce

Hướng Dẫn Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce

Đăng vào Tháng 3 26, 2025Tháng 4 7, 2025 bởi admin

admin

26/03/2025

6 Phút đọc

80 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Mục Tiêu Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce

Hướng dẫn cách sử dụng Advanced Custom Fields (ACF) để tạo trường tùy chỉnh hiển thị combo bán hàng trên trang sản phẩm của WooCommerce. Bài viết cũng sẽ chỉ bạn cách tích hợp AJAX để thêm các sản phẩm vào giỏ hàng một cách nhanh chóng khi người dùng chọn sản phẩm từ combo, nâng cao trải nghiệm mua sắm và tăng khả năng bán hàng.

Hướng Dẫn Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce

1. Đăng Ký Nhóm Trường ACF Cho Sản Phẩm Thường Mua Cùng

Để tạo trường tùy chỉnh cho việc lựa chọn các sản phẩm thường mua cùng, bạn sẽ cần đăng ký một nhóm trường ACF. Đoạn mã dưới đây sẽ giúp bạn làm điều này:

if (function_exists('acf_add_local_field_group')) :
    acf_add_local_field_group(array(
        'key' => 'group_related_products',
        'title' => 'Sản phẩm thường mua cùng',
        'fields' => array(
            array(
                'key' => 'field_related_products',
                'label' => 'Chọn sản phẩm liên quan',
                'name' => 'related_products',
                'type' => 'relationship',
                'post_type' => array('product'),
                'filters' => array('search'),
                'return_format' => 'object',
            ),
            array(
                'key' => 'field_related_discount_type',
                'label' => 'Loại giảm giá',
                'name' => 'related_discount_type',
                'type' => 'select',
                'choices' => array(
                    'percent' => 'Giảm theo %',
                    'fixed' => 'Giảm số tiền cố định',
                ),
                'default_value' => 'percent',
            ),
            array(
                'key' => 'field_related_discount_value',
                'label' => 'Mức giảm giá',
                'name' => 'related_discount_value',
                'type' => 'number',
                'append' => 'VNĐ hoặc %',
            ),
        ),
        'location' => array(
            array(
                array(
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'product',
                ),
            ),
        ),
    ));
endif;

if (function_exists('acf_add_local_field_group')) :

acf_add_local_field_group(array(

'key' => 'group_related_products',

'title' => 'Sản phẩm thường mua cùng',

'fields' => array(

array(

'key' => 'field_related_products',

'label' => 'Chọn sản phẩm liên quan',

'name' => 'related_products',

'type' => 'relationship',

'post_type' => array('product'),

'filters' => array('search'),

'return_format' => 'object',

array(

'key' => 'field_related_discount_type',

'label' => 'Loại giảm giá',

'name' => 'related_discount_type',

'type' => 'select',

'choices' => array(

'percent' => 'Giảm theo %',

'fixed' => 'Giảm số tiền cố định',

'default_value' => 'percent',

array(

'key' => 'field_related_discount_value',

'label' => 'Mức giảm giá',

'name' => 'related_discount_value',

'type' => 'number',

'append' => 'VNĐ hoặc %',

'location' => array(

array(

'param' => 'post_type',

'operator' => '==',

'value' => 'product',

));

endif;

Giải thích:

related_products: Trường này cho phép chọn các sản phẩm liên quan để hiển thị trên trang sản phẩm.
related_discount_type: Trường này cho phép chọn kiểu giảm giá (theo % hoặc giảm cố định).
related_discount_value: Mức giảm giá cho sản phẩm liên quan (có thể là VNĐ hoặc %).

Xem thêm: Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

2. Hiển Thị Sản Phẩm Thường Mua Cùng Trên Trang Sản Phẩm

Sau khi đã đăng ký trường ACF, bạn cần hiển thị sản phẩm thường mua cùng trên trang sản phẩm WooCommerce. Đoạn mã dưới đây sẽ giúp bạn thực hiện điều này:

function muathemewpgiare_display_related_products() {
    if (!is_singular('product')) return;

    global $post;
    $related_products = get_field('related_products', $post->ID);
    if (!$related_products) return;

    ob_start(); ?>
    <div class="muathemewpgiare_wrapper">
        <h3>🔥 Mua Combo Tiết Kiệm Hơn</h3>
        <div class="muathemewpgiare_slider">
            <?php foreach ($related_products as $product) :
                $product_obj = wc_get_product($product->ID);
                $price = $product_obj->get_regular_price();
                $discount_type = get_field('related_discount_type', $post->ID);
                $discount_value = get_field('related_discount_value', $post->ID);

                if ($discount_type === 'percent') {
                    $discount_price = $price - ($price * $discount_value / 100);
                } elseif ($discount_type === 'fixed') {
                    $discount_price = $price - $discount_value;
                } else {
                    $discount_price = $price;
                }

                $product_image = wp_get_attachment_image_src(get_post_thumbnail_id($product->ID), 'full');
                $product_url = get_permalink($product->ID);
                $product_name = $product_obj->get_name();
                $product_sale_count = get_post_meta($product->ID, '_product_sales', true); 
                $product_price_display = wc_price($discount_price); 
                ?>
                <div class="product-small box">
                    <div class="box-image">
                        <div class="image-zoom">
                            <a href="<?= $product_url; ?>" aria-label="<?= esc_attr($product_name); ?>">
                                <img width="300" height="300" src="<?= esc_url($product_image[0]); ?>" alt="<?= esc_attr($product_name); ?>" />
                            </a>
                        </div>
                    </div>

                    <div class="box-text text-center">
                        <div class="skill-set">
                            <ul>
                                <li>
                                    <div class="skill-set__detail">
                                        <div class="skill-set__bar" style="background-color: #ff6d6d;">
                                            <div class="skill-set_fire"></div>
                                            <span class="skill-set_percentage">
                                                Đã bán <?= $product_sale_count ? $product_sale_count : '0'; ?>
                                            </span> 
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="title-wrapper">
                            <p class="name product-title">
                                <a href="<?= $product_url; ?>"><?= esc_html($product_name); ?></a>
                            </p>
                        </div>

                        <div class="price-wrapper">
                            <span class="price">
                                <span class="woocommerce-Price-amount amount">
                                    <bdi><?= $product_price_display; ?></bdi>
                                </span>
                            </span>
                        </div>

                        <div class="muathemewpgiare_checkbox_wrapper">
                            <input type="checkbox" class="muathemewpgiare_checkbox" data-price="<?= $discount_price; ?>" value="<?= $product->ID; ?>">
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <p><strong>Tổng tiền: <span id="muathemewpgiare_total_price">0</span></strong></p>
        <button id="muathemewpgiare_select_all" class="button">Chọn tất cả</button>
        <button id="muathemewpgiare_buy" class="button">🛒 Mua Combo</button>
    </div>
    <?php
    echo ob_get_clean();
}
add_action('woocommerce_after_single_product_summary', 'muathemewpgiare_display_related_products', 15);

function muathemewpgiare_display_related_products() {

if (!is_singular('product')) return;

global $post;

$related_products = get_field('related_products', $post->ID);

if (!$related_products) return;

ob_start(); ?>

<h3>🔥 Mua Combo Tiết Kiệm Hơn</h3>

<?php foreach ($related_products as $product) :

$product_obj = wc_get_product($product->ID);

$price = $product_obj->get_regular_price();

$discount_type = get_field('related_discount_type', $post->ID);

$discount_value = get_field('related_discount_value', $post->ID);

if ($discount_type === 'percent') {

$discount_price = $price - ($price * $discount_value / 100);

} elseif ($discount_type === 'fixed') {

$discount_price = $price - $discount_value;

} else {

$discount_price = $price;

}

$product_image = wp_get_attachment_image_src(get_post_thumbnail_id($product->ID), 'full');

$product_url = get_permalink($product->ID);

$product_name = $product_obj->get_name();

$product_sale_count = get_post_meta($product->ID, '_product_sales', true);

$product_price_display = wc_price($discount_price);

<a href="<?= $product_url; ?>" aria-label="<?= esc_attr($product_name); ?>">

</a>

</div>

<ul>

<li>

Đã bán <?= $product_sale_count ? $product_sale_count : '0'; ?>

</span>

</div>

</li>

</ul>

</div>

</p>

</div>

</span>

</div>

<input type="checkbox" class="muathemewpgiare_checkbox" data-price="<?= $discount_price; ?>" value="<?= $product->ID; ?>">

</div>

<?php endforeach; ?>

</div>

<button id="muathemewpgiare_buy" class="button">🛒 Mua Combo</button>

</div>

<?php

echo ob_get_clean();

}

add_action('woocommerce_after_single_product_summary', 'muathemewpgiare_display_related_products', 15);

Giải thích:

Các sản phẩm liên quan được hiển thị dưới dạng danh sách lưới.
Giá giảm được tính toán dựa trên kiểu và mức giảm giá đã được thiết lập trong ACF.
Mỗi sản phẩm có checkbox để người dùng lựa chọn mua kèm, cùng với hiển thị tổng tiền của các sản phẩm đã chọn.

3. Xử Lý AJAX Để Thêm Sản Phẩm Vào Giỏ Hàng

Đoạn mã dưới đây sử dụng AJAX để thêm các sản phẩm liên quan vào giỏ hàng khi người dùng nhấn nút “Mua Combo”:

function muathemewpgiare_add_to_cart() {
    check_ajax_referer('muathemewpgiare_nonce', 'security');

    if (!isset($_POST['products']) || !is_array($_POST['products'])) wp_die();

    foreach ($_POST['products'] as $product_id) {
        WC()->cart->add_to_cart($product_id);
    }
    wp_send_json_success(['message' => 'Sản phẩm đã được thêm vào giỏ hàng!']);
}
add_action('wp_ajax_muathemewpgiare_add_to_cart', 'muathemewpgiare_add_to_cart');
add_action('wp_ajax_nopriv_muathemewpgiare_add_to_cart', 'muathemewpgiare_add_to_cart');

function muathemewpgiare_add_to_cart() {

check_ajax_referer('muathemewpgiare_nonce', 'security');

if (!isset($_POST['products']) || !is_array($_POST['products'])) wp_die();

foreach ($_POST['products'] as $product_id) {

WC()->cart->add_to_cart($product_id);

}

wp_send_json_success(['message' => 'Sản phẩm đã được thêm vào giỏ hàng!']);

}

add_action('wp_ajax_muathemewpgiare_add_to_cart', 'muathemewpgiare_add_to_cart');

add_action('wp_ajax_nopriv_muathemewpgiare_add_to_cart', 'muathemewpgiare_add_to_cart');

4. Thêm Styles và Scripts

Để cải thiện giao diện và xử lý hành động người dùng, bạn cần thêm styles và scripts vào trang sản phẩm:

function muathemewpgiare_enqueue_scripts() {
    if (!is_singular('product')) return;

    wp_add_inline_style('woocommerce-inline', "/* CSS code cho layout và style */");
    wp_add_inline_script('jquery-core', "/* jQuery code để xử lý việc chọn checkbox và AJAX */");
}
add_action('wp_enqueue_scripts', 'muathemewpgiare_enqueue_scripts');

function muathemewpgiare_enqueue_scripts() {

if (!is_singular('product')) return;

wp_add_inline_style('woocommerce-inline', "/* CSS code cho layout và style */");

wp_add_inline_script('jquery-core', "/* jQuery code để xử lý việc chọn checkbox và AJAX */");

}

add_action('wp_enqueue_scripts', 'muathemewpgiare_enqueue_scripts');

5. Đoạn code update hoàn chỉnh

Các bạn chỉ cần coppy, bỏ toàn bộ code dưới đây vào funtion.php là được nhé, xong rồi chỉ cần trải nghiệm thôi nè.

🚫 Bạn cần đăng nhập để xem nội dung này!

Kết Luận

Bằng cách sử dụng ACF, WooCommerce, và AJAX, bạn có thể dễ dàng tạo ra tính năng sản phẩm thường mua cùng với các tùy chọn giảm giá linh hoạt, giúp người dùng chọn các sản phẩm liên quan và mua chúng kèm nhau. Đây là một cách tuyệt vời để tối ưu trải nghiệm người dùng và tăng doanh thu cho cửa hàng WooCommerce của bạn. Nếu các bạn thấy hay, có thể mời mình 1 ly cafe nhé, bên mình sẽ ra thêm nhiều bài viết chức năng hay dành cho các bạn nhé. STK MBANK 0766734539 LE TRUNG HOANG nhé

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng Dẫn Thêm Mã Script Vào Theme Flatsome Một Cách Khoa Học

Một website tốt không chỉ đẹp – mà còn phải hiểu được chính mình.Để hiểu, bạn cần dữ liệu. Và dữ liệu đến từ đâu?Từ...
Top theme WordPress bất động sản đẹp, chuyên nghiệp và dễ dùng nhất 2025

Trong thời đại mà mọi khách hàng đều “google trước khi gọi”, một website bất động sản đẹp chính là “mặt tiền online” không thể...
🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
WordPress 6.8 có gì mới? Đánh giá chi tiết & thực tế sau khi trải nghiệm bản cập nhật mới nhất

Tóm tắt nhanh: WordPress 6.8 ra mắt với hàng loạt cải tiến về hiệu suất, bảo mật và trải nghiệm người dùng. Trải nghiệm thực...
Theme WordPress thời trang đẹp, chuẩn SEO, giá rẻ cho shop quần áo online

Bạn đang tìm kiếm một theme WordPress thời trang vừa đẹp mắt, dễ dùng lại chuẩn SEO và thân thiện với mobile? Nếu bạn đang...
Có nên chèn sản phẩm vào trong bài viết website WordPress không?

Bạn đang xây dựng website WordPress cho doanh nghiệp hoặc cá nhân và băn khoăn: Có nên chèn sản phẩm vào trong bài viết website...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Flash sale kho theme wordpress giải phóng Miền Nam 30/4

Mục LụcMục Tiêu Code Tạo Sản Phẩm Thường Mua Cùng Với ACF và WooCommerce1. Đăng Ký Nhóm Trường ACF Cho Sản Phẩm Thường Mua Cùng2....
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 5 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Sharecode Bộ Công Cụ Tool Đếm Ký Tự Phân Tích SEO Nâng Cao

Bạn đang tìm kiếm một công cụ phân tích nội dung mạnh mẽ, giao diện hiện đại, tích hợp AI và các tính năng SEO...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Flatsome vs Woodmart – Nên Chọn Chủ Đề Nào Cho Website Của Bạn?

Flatsome và Woodmart là hai cái tên nổi bật trong thế giới theme WordPress bán hàng chuyên nghiệp. Nhưng nếu bạn đang bắt đầu xây...
Cách Để Website Hiển Thị Nổi Bật Trên Google

Bạn từng thấy một số website xuất hiện nổi bật trên Google với tiêu đề hấp dẫn, phần mô tả rõ ràng và nhiều liên...
Theme WordPress Giá Rẻ Đáng Tin?

Bạn đang cân nhắc mua một theme WordPress giá rẻ? Có thể bạn đã thấy hàng trăm lời mời gọi như “theme WordPress chuẩn SEO...
Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...