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

🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Đăng vào Tháng 4 25, 2025 bởi admin

25/04/2025

7 Phút đọc

66 Lượt xem

Đánh giá

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 cài quá nhiều plugin? Vậy thì bạn không thể bỏ qua những đoạn code Flatsome tùy chỉnh cực hay dưới đây. Đây là giải pháp đơn giản, nhẹ nhàng, dễ thực hiện và cực kỳ hiệu quả dành cho người dùng mọi cấp độ – từ mới làm web đến các developer.

Tại sao nên sử dụng đoạn code tùy chỉnh cho theme Flatsome?

Flatsome là một trong những theme bán hàng mạnh nhất trên nền tảng WordPress, được đánh giá cao nhờ tốc độ, khả năng tùy biến mạnh mẽ với UX Builder. Tuy nhiên, nếu chỉ sử dụng mặc định hoặc cài quá nhiều plugin, website của bạn sẽ:

Tải chậm, ảnh hưởng đến trải nghiệm người dùng và SEO
Giao diện cứng nhắc, thiếu tính cá nhân hóa
Khó tối ưu hành trình mua hàng, giảm chuyển đổi

Giải pháp ở đây là: sử dụng các đoạn code Flatsome đơn giản nhưng hiệu quả, giúp bạn tùy chỉnh website đúng ý, nhẹ hơn và đẹp hơn mà không cần phải dùng thêm plugin.

Danh sách 10+ đoạn code Flatsome phổ biến và hữu ích nhất

1. Ẩn tiêu đề trang mặc định trong Flatsome

Nếu bạn sử dụng UX Builder để thiết kế trang, tiêu đề mặc định có thể khiến giao diện trông kém thẩm mỹ.

add_filter('flatsome_page_title', '__return_false');

1	add_filter('flatsome_page_title', '__return_false');

2. Tắt hiệu ứng phóng to hình ảnh sản phẩm

Flatsome tích hợp tính năng zoom hình ảnh sản phẩm, nhưng trên mobile có thể gây phiền hoặc lỗi giao diện.

add_action( 'after_setup_theme', 'remove_zoom_feature', 100 );
function remove_zoom_feature() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}

add_action( 'after_setup_theme', 'remove_zoom_feature', 100 );

function remove_zoom_feature() {

remove_theme_support( 'wc-product-gallery-zoom' );

}

3. Tùy chỉnh nút “Thêm vào giỏ hàng” thành “Mua ngay”

Tăng chuyển đổi bằng cách thay đổi nội dung nút, kích thích hành động mua hàng nhanh hơn.

add_filter('woocommerce_product_single_add_to_cart_text', function() {
    return 'Mua ngay';
});

add_filter('woocommerce_product_single_add_to_cart_text', function() {

return 'Mua ngay';

});

4. Tự động thêm sản phẩm vào giỏ hàng và chuyển tới giỏ

Giúp rút ngắn hành trình mua hàng – phù hợp cho các shop đơn giản hoặc flash sale.

add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_cart' );
function redirect_to_cart() {
    return wc_get_cart_url();
}

add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_cart' );

function redirect_to_cart() {

return wc_get_cart_url();

}

5. Xóa tab mô tả sản phẩm không cần thiết

Nếu bạn không sử dụng tab mô tả, hãy ẩn đi để giao diện gọn hơn.

add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );
function remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );
    return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'remove_product_tabs', 98 );

function remove_product_tabs( $tabs ) {

unset( $tabs['description'] );

return $tabs;

}

6. Thêm nút cuộn lên đầu trang (Scroll to top)

Đơn giản nhưng rất hữu ích cho người dùng khi cuộn xuống nội dung dài.

<a href="#" class="scroll-top">Lên đầu</a>
<style>
.scroll-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    display: none;
    background: #000;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}
</style>
<script>
document.addEventListener('scroll', function() {
    const scrollTopBtn = document.querySelector('.scroll-top');
    if (window.scrollY > 300) {
        scrollTopBtn.style.display = 'block';
    } else {
        scrollTopBtn.style.display = 'none';
    }
});
</script>

<style>

.scroll-top {

position: fixed;

bottom: 40px;

right: 20px;

display: none;

background: #000;

color: #fff;

padding: 10px;

text-decoration: none;

}

</style>

document.addEventListener('scroll', function() {

const scrollTopBtn = document.querySelector('.scroll-top');

if (window.scrollY > 300) {

scrollTopBtn.style.display = 'block';

} else {

scrollTopBtn.style.display = 'none';

}

});

</script>

7. Tăng tốc độ website bằng cách tắt Emoji của WordPress

Emoji được WordPress load theo mặc định và gây chậm nhẹ – đoạn code dưới sẽ tắt nó.

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

1 2	remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'wp_print_styles', 'print_emoji_styles' );

8. Thêm Breadcrumb chuẩn SEO bằng Yoast SEO

Breadcrumb giúp Google hiểu rõ cấu trúc website hơn, tốt cho SEO.

add_action( 'flatsome_before_breadcrumb', function() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb('<p class="breadcrumbs">', '</p>');
    }
});

add_action( 'flatsome_before_breadcrumb', function() {

if ( function_exists('yoast_breadcrumb') ) {

yoast_breadcrumb('<p class="breadcrumbs">', '</p>');

}

});

Lưu ý: Bạn cần cài plugin Yoast SEO và bật tính năng Breadcrumbs trong phần cài đặt của plugin.

9. Chặn bình luận spam có chứa link

Cách đơn giản để ngăn những bình luận spam chèn link.

add_filter('preprocess_comment', 'block_spam_links');
function block_spam_links($commentdata) {
    if (strpos($commentdata['comment_content'], 'http') !== false) {
        wp_die('Bình luận của bạn có chứa link và bị từ chối.');
    }
    return $commentdata;
}

add_filter('preprocess_comment', 'block_spam_links');

function block_spam_links($commentdata) {

if (strpos($commentdata['comment_content'], 'http') !== false) {

wp_die('Bình luận của bạn có chứa link và bị từ chối.');

}

return $commentdata;

}

10. Thêm icon Zalo và Hotline nổi góc phải

Tăng khả năng tương tác và hỗ trợ khách hàng nhanh chóng.

<div class="contact-fixed">
  <a href="tel:0909999999">Gọi ngay</a>
  <a href="https://zalo.me/0909999999">Chat Zalo</a>
</div>
<style>
.contact-fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #f3f3f3;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.contact-fixed a {
    display: block;
    margin-bottom: 5px;
    color: #000;
    text-decoration: none;
}
</style>

</div>

<style>

.contact-fixed {

position: fixed;

bottom: 10px;

right: 10px;

background: #f3f3f3;

padding: 10px;

border-radius: 5px;

box-shadow: 0 0 5px #ccc;

}

.contact-fixed a {

display: block;

margin-bottom: 5px;

color: #000;

text-decoration: none;

}

</style>

Cách sử dụng đoạn code đúng cách

Không nên chèn trực tiếp vào file functions.php của theme gốc, vì sẽ mất khi cập nhật theme. Bạn nên:

Sử dụng child theme nếu bạn hiểu kỹ thuật cơ bản.
Hoặc cài plugin Code Snippets để thêm từng đoạn một, dễ bật tắt và quản lý.

Kết luận

Việc sử dụng các đoạn code Flatsome tùy chỉnh là cách thông minh để nâng cấp website mà vẫn giữ tốc độ tải nhanh, cấu trúc chuẩn SEO và giao diện thân thiện với người dùng. Không cần phải là lập trình viên, bạn hoàn toàn có thể tự thao tác với hướng dẫn ở trên.

Hãy lưu bài viết này lại, thực hành từng đoạn và cảm nhận hiệu quả rõ rệt chỉ sau vài phút. Nếu bạn đang muốn website hoạt động tối ưu, nhanh, gọn và dễ dùng hơn – đây chính là bước khởi đầu.

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!

10 Mẫu Tiêu Đề SEO Cực Hút Click

Viết tiêu đề SEO như thế nào để người dùng phải nhấp vào bài viết của bạn ngay lập tức?Đây là câu hỏi quan trọng...
Chèn icon trong bài viết SEO là lợi hay hại

Trong quá trình tối ưu nội dung chuẩn SEO, nhiều người viết thường sử dụng icon (emoji, biểu tượng hình ảnh nhỏ) với mong muốn...
Top Những Sai Lầm Khi Viết Tiêu Đề SEO – Tránh Ngay!

Mục LụcTại sao nên sử dụng đoạn code tùy chỉnh cho theme Flatsome?Danh sách 10+ đoạn code Flatsome phổ biến và hữu ích nhất1. Ẩn...
Top 10 Framework JavaScript Phổ Biến Nhất 2025 – Bạn Phù Hợp Với Cái Nào?

Chào bạn, người đang tìm kiếm công cụ phù hợp để phát triển web trong năm 2025! Nếu bạn đang phân vân giữa các framework...
Tự Học JavaScript Từ Con Số 0: Lộ Trình Học, Tài Nguyên, Mẹo Học Dễ Nhớ

Nếu bạn là sinh viên CNTT, hay đơn giản là một người mới bắt đầu học lập trình, thì JavaScript chính là lựa chọn lý...
Tất tần tật về ngôn ngữ lập trình javaScript

Chào mừng bạn đến với bài viết chuyên sâu về JavaScript – ngôn ngữ lập trình không thể thiếu trong mọi trang web hiện đại....
JavaScript SEO: Cách Giúp Website JS Nặng Trình Vẫn Lên Top Google

Khi nói đến việc phát triển website hiện đại, JavaScript đã trở thành công cụ chủ lực. Tuy nhiên, một trong những thách thức lớn...
JavaScript Là Gì? Và Vì Sao Website Thời Nay Không Thể Thiếu Nó?

Nếu ví một trang web là một cơ thể sống, thì HTML là khung xương, CSS là quần áo và ngoại hình, còn JavaScript chính...
Bật tính năng đánh giá sản phẩm WooCommerce chỉ với vài dòng code

Nếu bạn đang sử dụng WooCommerce để xây dựng website bán hàng và muốn bật tính năng đánh giá sản phẩm cho tất cả sản...
Cách Chống Spam Bình Luận Trong WordPress Hiệu Quả Và Chuyên Nghiệp [2025]

Mục LụcTại sao nên sử dụng đoạn code tùy chỉnh cho theme Flatsome?Danh sách 10+ đoạn code Flatsome phổ biến và hữu ích nhất1. Ẩn...
Ưu điểm và Nhược điểm của Plugin Nulled WordPress

Trong quá trình xây dựng website bằng WordPress, chắc hẳn bạn đã từng nghe đến cụm từ “plugin nulled WordPress” hay còn gọi là plugin...
Mua Theme WordPress Chính Hãng – Tìm Hiểu Các Loại Theme Hàng Đầu Cho Website Của Bạn

Khi bắt đầu xây dựng một website, việc chọn lựa theme phù hợp là bước đầu tiên cực kỳ quan trọng. Theme không chỉ giúp...
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ể...
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...