Share Code Thêm Icon Trước Tab Flatsome + AJAX Load Sản Phẩm

Nay rảnh rồi admin theme mới xin share code icon cho tab custom Tabs WooCommerce dành riêng cho theme Flatsome cực đẹp, tối ưu và cực kỳ nhẹ cho website WordPress bán hàng.. Bộ code này giúp hiển thị tab danh mục sản phẩm hiện đại kèm icon trước tên tab, hỗ trợ AJAX load sản phẩm không reload trang giúp trải nghiệm người dùng mượt hơn rất nhiều.

Điểm đặc biệt là admin có thể tự thêm icon cho từng tab trực tiếp ngay trong UX Builder mà không cần sửa code thủ công. Chỉ cần nhập tên tab và link icon và chọn danh mục sản phẩm là hệ thống tự động hiển thị giao diện hoàn chỉnh.

Code được tối ưu riêng cho:

• WooCommerce

• Flatsome Theme

• Website điện mặt trời

• Nội thất

• Máy lạnh

• Thiết bị điện

• Website bán hàng chuyên nghiệp

Tính năng nổi bật:

• Thêm icon trước tên tab

• AJAX load sản phẩm siêu mượt

• Không reload trang

• Responsive mobile đẹp

• Hover hiệu ứng hiện đại

• Tùy chỉnh dễ dàng

• Không ảnh hưởng tab Flatsome mặc định

• Tối ưu SEO và tốc độ tải trang

Cách hoạt động

Admin chỉ cần :

• up icon vào thư viện để lấy link icon

• tên tab

• danh mục sản phẩm

Cách làm như sau

Thêm code này vào fuction

/*
|--------------------------------------------------------------------------
| [phongvt_icon_tab]
|--------------------------------------------------------------------------
*/

add_shortcode('phongvt_icon_tab', 'phongvt_icon_tab_func');

function phongvt_icon_tab_func(){

    ob_start();

    $tabs = get_field('solar_tabs');

    if(!$tabs) return;

    ?>

    <div class="phongvt-icon-tab-wrap">

        <div class="phongvt-icon-tabs">

            <?php foreach($tabs as $index => $tab):

                $cat = $tab['product_cat'];

                if(!$cat) continue;

            ?>

            <div class="phongvt-icon-tab <?php echo $index == 0 ? 'active' : ''; ?>"
                 data-cat="<?php echo $cat->term_id; ?>">

                <span class="icon">

                    <?php

                    // ICON IMAGE
                    if(is_array($tab['tab_icon'])){
                        echo '<img src="'.$tab['tab_icon']['url'].'" alt="">';
                    }

                    // ICON HTML
                    else{
                        echo $tab['tab_icon'];
                    }

                    ?>

                </span>

                <span class="name">
                    <?php echo $tab['tab_name']; ?>
                </span>

            </div>

            <?php endforeach; ?>

        </div>

        <div id="phongvt-icon-products"></div>

    </div>

    <script>

    jQuery(function($){

        function loadProducts(cat_id){

            $('#phongvt-icon-products').html(
                '<div class="phongvt-icon-loading">Đang tải...</div>'
            );

            $.ajax({
                url:'<?php echo admin_url('admin-ajax.php'); ?>',
                type:'POST',
                data:{
                    action:'load_phongvt_icon_products',
                    cat_id:cat_id
                },
                success:function(res){

                    $('#phongvt-icon-products').html(res);

                }
            });

        }

        // LOAD FIRST TAB
        let first = $('.phongvt-icon-tab.active').data('cat');

        if(first){
            loadProducts(first);
        }

        // CLICK TAB
        $(document).on('click','.phongvt-icon-tab',function(){

            $('.phongvt-icon-tab').removeClass('active');

            $(this).addClass('active');

            let cat = $(this).data('cat');

            loadProducts(cat);

        });

    });

    </script>

    <?php

    return ob_get_clean();

}

Thêm css vào css bổ sung

/* tabs */
.tabbed-content .nav{
    display:flex;
    justify-content:center;
    gap:34px;
    flex-wrap:wrap;
    margin-top:25px;
}

/* item */
.tabbed-content .nav > li > a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    color:#444 !important;
    font-size:17px;
    font-weight:500;
    transition:.3s ease;
    position:relative;
    background:none !important;
    border:none !important;
    text-transform:none;
}

/* xóa gạch active */
.tabbed-content .nav > li.active > a:after{
    display:none !important;
    content:none !important;
}

/* xóa border bottom nếu có */
.tabbed-content .nav > li.active{
    border:none !important;
}

.tabbed-content .nav > li.active > a{
    border:none !important;
    box-shadow:none !important;
}

/* icon */
.tabbed-content .nav > li > a i,
.tabbed-content .nav > li > a svg,
.tabbed-content .tab-icon{
    width:18px;
    height:18px;
    object-fit:contain;
    opacity:.7;
    transition:.3s ease;
}

/* hover */
.tabbed-content .nav > li > a:hover{
    color:#009245 !important;
}

.tabbed-content .nav > li > a:hover i,
.tabbed-content .nav > li > a:hover svg,
.tabbed-content .nav > li > a:hover .tab-icon{
    opacity:1;
    transform:translateY(-1px);
}

/* active */
.tabbed-content .nav > li.active > a{
    color:#009245 !important;
    font-weight:600;
}

/* line active */
.tabbed-content .nav > li.active > a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:2px;
    background:#009245;
    border-radius:20px;
}

/* mobile */
@media(max-width:768px){

    .tabbed-content .nav{
        gap:18px;
    }

    .tabbed-content .nav > li > a{
        font-size:14px;
    }

}

 

cách thêm icon vào rất đơn giản như sau

B1 sét tab cấu trúc như hình

B2 tiêu đề tab điền có dạng

Link hình | Tiêu đề Tab

chúc các bạn thành công