Flatsome là theme bán hàng phổ biến nhất cho Woocommerce hiện nay với khả năng tùy biến cao và rất dễ sử dụng kể cả với người mới tìm hiểu về Wordpress. Theo số liệu thống kê tính đến 27/09/2023, theme này đã bán được 224.267 key bản quyền – luôn dẫn đầu trong danh sách theme bán hàng bán chạy nhất trên Themeforest. Ngoài ra, số lượng website sử dụng trái phép (phiên bản nulled) không có thống kê nhưng tôi nghĩ chắc phải gấp hàng chục lần con số trên.
Trong khi hầu hết các nhà phát triển Wordpress khác thiết kế nhiều theme dành cho đa mục đích sử dụng, đa lĩnh vực ngành nghề khác nhau, thì nhóm phát triển Flatsome chỉ tập trung vào xây dựng 1 theme duy nhất là Flatsome và tối ưu theme này cho mọi nhu cầu sử dụng. Có nghĩa là, ngoài mục đích chính là làm website bán hàng Woocommerce, bạn cũng có thể tùy chỉnh Flatsome để làm web giới thiệu công ty, blog cá nhân, trang tin tức,… Tất cả đều được tối ưu để mang lại trải nghiệm người dùng tốt nhất.
Nội dung chính:
Ưu điểm của Flatsome Theme
Với những bạn pro về Wordpress hoặc đã dùng quen Flatsome rồi thì chắc không quan tâm phần này đâu. Bởi vậy mình sẽ tóm tắt một số điểm nổi bật của theme này cho những bạn mới:
- Nhà phát triển UX Themes xây dựng sẵn một thư viện giao diện mẫu (Flatsome Studio) bao gồm hàng trăm template trình bày Sản phẩm, Danh mục, Bài viết, Mega Menu, Banners, Sliders, Contact Form, Testimonials, Logo đối tác, Footer,… nói chung là gần như đầy đủ mọi thứ cho một website bình thường. Chỉ cần 1 click chuột import là bạn có ngay một bản sao của demo trên web của mình.
- Việc tùy chỉnh bố cục, nội dung các thành phần trên website (bao gồm cả header và footer) trở nên cực kỳ dễ dàng với UX Builder – công cụ trình bày nội dung trực quan hỗ trợ kéo, thả với các layout được lập trình sẵn trong theme. Bạn không biết code vẫn có thể tạo ra một trang web hoàn toàn responsive.
- Code được tối ưu tốt cho seo, có sẵn lazy load ảnh, preload trang, tốc độ tải cực nhanh.
- Tích hợp sẵn với 2 plugin tốt nhất hiện nay là Yoast SEO và Rank Math.
- Trên trang chủ UX Themes có hướng dẫn sử dụng cực kỳ chi tiết. Ngoài ra, cộng đồng người dùng theme Flatsome ở Việt Nam rất đông đảo, có nhiều blog chia sẻ các đoạn code dùng riêng cho Flatsome vô cùng tiện ích.
- Chỉ cần biết cơ bản về HTML và CSS thì bạn có thể tinh chỉnh gần như là mọi thứ về giao diện.
Nói chung để biết theme bán hàng này tuyệt vời như thế nào thì tốt nhất bạn tự tải về cài đặt rồi trải nghiệm. Hoặc bạn có thể tham khảo một số mẫu website làm từ Flatsome sau đây:
- noithattamanh.com.vn
- dogothanhtung.vn
- dogophamgia.com
- xuonggoanlac.com
- dogongocanh.vn
- khacdauviettin.com
- viettinlaw.com
- bacsihien.com
Download Theme Flatsome mới nhất
Kể từ thời điểm ra mắt lần đầu tiên năm 2013 cho đến nay, theme này đã trải qua hàng trăm lần cập nhật lớn nhỏ khác nhau nên để không bị mất các thay đổi sau mỗi lần cập nhật lên phiển bản mới thì các bạn nên tạo child-theme để sử dụng.
Nhà phát triển đã cho ra mắt phiên bản Flatsome v3.17.7 ngày 13/09/2023 vẫn tập trung vào cải thiện hiệu suất, nhưng nổi bật nhất chính là Lottie, một định dạng ảnh động mã nguồn mở mới, được đánh giá có thể thay thế GIF trong tương lai.
Theo thông báo, các bạn cần phải cập nhật ngay lên bản 3.17.6 vì “bản này chứa một biện pháp bảo mật nâng cao. Chúng tôi khuyên bạn nên cập nhật trang web của mình kịp thời để được bảo vệ tối ưu”.
Điểm nổi bật của Lottie
Lottie là một định dạng ảnh động hoạt hình dựa trên JSON giúp cải thiện sự tương tác và chất lượng của các thiết kế. Cấu trúc vector của Lottie cho phép người dùng chia tỷ lệ hoạt ảnh mà không làm giảm chất lượng cũng như không làm tăng kích thước tệp.
- Dung lượng của nó nhỏ hơn 6 lần so với GIF và nhỏ hơn so với SVG.
- Tăng mức độ tương tác với người dùng lên gấp 10 lần.
- Cải thiện độ tải trang lên gấp 10 lần.
Trước đây các web có các element ảnh dạng vector có animation đa số dùng SVG thì giờ đây có thể thay thế bằng Lottie. Việc có thêm ảnh động giúp website trông sinh động và thu hút hơn.
Nếu bạn đã có sẵn các file SVG mà muốn chuyển đổi thành Lottie thì có thể sử dụng công cụ này.
Bạn có thể tìm hiểu thêm thông tin về định dạng Lottie ở đây: lottiefiles.com
Các builder khác mình cũng thấy cập nhật hỗ trợ upload định dạng .lottie này rồi. Mặc dù hiện giờ builder với block editor đã khá mạnh mẽ, tuy nhiên cộng đồng Flatsome vẫn phổ biến nhất và chúng ta cũng đã khá quen thuộc với UX-Builder rồi.
Tính năng mới trên phiên bản Flatsome 3.17.7
- Cải tiến thiết kế chống tràn nội dung ngoài body
- Cải tiến tính năng lazy-load ảnh
- Sửa lỗi đính kèm bài đăng khi tải hình ảnh lên trong UX Builder.
- Sửa lỗi sao chép dưới dạng Shortcode trên các thành phần của trang sản phẩm tùy chỉnh.
- Sửa lỗi không tự động chuyển slide trên di động
- Sửa lỗi không chuyển hướng đến sản phẩm khi nhấp vào biến thể trong UX Builder.
- Sửa lỗi hiển thị hình ảnh trong một số trường hợp trên Wordpress 6.3
- Sửa lỗi thụt lề trong menu thả xuống.
- Và một số lỗi khác (hơi khó dịch nên bạn đọc changelog tiếng Anh ở dưới cho chuẩn nhé)
- Thay đổi: Vô hiệu hóa Ajax nút thêm vào giỏ hàng trên các trang sản phẩm combo (gói sản phẩm – composite products)
- Cập nhật: File ngôn ngữ.
Ngoài những tính năng mới kể trên thì phiên bản Flatsome 3.17 này cũng có những cải tiến rất đáng chú ý mà mình tin chắc rằng các bạn sẽ phải cập nhật nó ngay và luôn. Một trong những điểm cần phải nói là danh sách Google Fonts và ngôn ngữ cũng được cập nhật.
Lưu ý rằng:
Bản cập nhật mới này yêu cầu bạn đang sử dụng Wordpress phiên bản từ 5.4.0 trở lên và WooCommerce cũng phải từ phiên bản 4.7.0 trở lên. Tốt nhất là bạn nên duy trì thường xuyên cập nhật Wordpress và WooCommerce lên các phiên bản mới nhất để tăng hiệu suất và bảo mật cho website.
Nếu bạn chỉnh sửa nội dung bằng UX Builder thì nó cũng cần nhiều RAM với CPU hơn, nói chung là chậm hơn so với trước đây. Nhưng điều này chỉ ảnh hưởng đến quản trị viên website còn bên ngoài frontend hiệu suất website vẫn tốt, khách hàng load web nhanh như một cơn gió.
Flatsome v3.17.7 Full Changelog
--- 3.17.7 (13.09.23) ---
NEW: WooCommerce 8.1 compatibility.
ENHANCEMENT: Body overflow prevention.
ENHANCEMENT: Don't lazy-load images with high fetch priority.
FIXED: Attach post when uploading images in UX Builder.
FIXED: Copy as Shortcode on custom product page product elements.
FIXED: Don't auto play sliders on mobile after scrolling if not enabled.
FIXED: Don't redirect to product when clicking on swatches in UX Builder.
FIXED: Image lazy-loading failed in some cases on WordPress 6.3.
FIXED: Non-bullet styled list item indentation in UX Block menu dropdown.
FIXED: Removed padding on text with color inside square and circle Text Box elements.
FIXED: Responsive Stack gap with "0" as value.
CHANGED: Disabled ajax add to cart on composite products.
UPDATED: Language files.
--- 3.17.6 (06.08.23) ---
This release contains an enhanced security measure. We recommend updating your sites promptly for optimal protection.
--- v3.17.5 (04.08.23) ---
FIXED: Resolved an issue where the header cart item element was not updating in some cases.
FIXED: Toggling of sticky-hide-on-scroll active class.
FIXED: Banner zoom long hover style.
UPDATED: Language files.
--- v3.17.4 (11.07.23) ---
NEW: WooCommerce 7.9 compatibility.
ENHANCEMENT: Improved WCML multi-currency support.
FIXED: Google map Pegman & buttons placement.
FIXED: Live search not showing results in some cases.
FIXED: Sticky section on mobile.
CHANGED: Copy as Shortcode: replaced navigator API with a prompt for reliability.
UPDATED: Language files.
--- v3.17.3 (23.06.23) ---
FIXED: Scroll-to link with full URLs not navigating in some cases.
FIXED: Icons alignment in the admin menu dropdown.
FIXED: Apply Coupon button color.
UPDATED: Language files.
--- v3.17.2 (15.06.23) ---
NEW: WooCommerce 7.8 compatibility.
UPDATED: Google Fonts list.
UPDATED: Language files.
--- v3.17.1 (31.05.23) ---
NEW: Lottie link options.
NEW: Swatches/product: Disable deselect option.
ENHANCEMENT: Improved no menu assigned message in Vertical Menu.
ENHANCEMENT: Various CSS improvements.
FIXED: Catalog sidebar sticky mode option visibility.
FIXED: flatsome-header-sticky event triggered more than once.
FIXED: Left and right bounce in animations didn't start in some cases.
FIXED: PHP 8.1 deprecated warning.
FIXED: Scroll-to with numbers only.
FIXED: Scroll-to with special chars.
FIXED: Single product pricing currency in Safari.
FIXED: Swatches/shop: text-right alignment.
FIXED: WP Rocket integration script version.
UPDATED: Language files.
DEV: Added flatsome_admin_menu_items_enabled filter.
--- v3.17.0 (25.04.23) ---
NEW: Lottie Element (Bodymovin), a powerful and flexible way to integrate Lottie animations.
NEW: AJAX add to cart buttons on single product page & quick view (optional).
NEW: Lazy load Instagram feeds (optional).
NEW: Header element Secondary Menu.
NEW: Implemented native CSS-based sticky columns for enhanced performance.
NEW: Integrated dynamic per-page load offset calculation for optimized scroll-to experience.
NEW: Sticky sidebar/column mode option.
NEW: Swatches/shop: Reset limited swatches option.
NEW: Auto open & scroll to accordion item per URL hash.
NEW: Auto-scroll to tab per URL hash.
NEW: Slider: Responsive slide width.
NEW: Refactored follow links for enhanced customization, addition, and reordering capabilities.
NEW: Refactored share links for enhanced customization, addition, and reordering capabilities.
NEW: Refactored sticky column JavaScript (enhanced & developed in-house).
NEW: Lottie Path: Set the source path or upload a file for your Lottie animation.
NEW: Lottie Animation Speed: Adjust the animation speed to suit your needs.
NEW: Lottie Autoplay: Toggle autoplay for your Lottie animations.
NEW: Lottie Mouse behavior: Set the animation behavior on mouse events.
NEW: Lottie Triggers: Choose from multiple trigger options for your animations: none, on hover, on click, or on scroll.
NEW: Lottie Start at X% Viewport (scroll): Define the animation start point based on the viewport percentage when scrolling.
NEW: Lottie Finish at X% Viewport (scroll): Define the animation end point based on the viewport percentage when scrolling.
NEW: Lottie Play in Reverse: Enable playing the animation in reverse.
NEW: Lottie Start Animation at X%: Set the starting point of the animation.
NEW: Lottie End Animation at X%: Set the ending point of the animation.
NEW: Lottie Player Controls: Provide users with built-in player controls for the Lottie animations.
NEW: Added 'Offset Type' option on scroll-to.
NEW: Added 'Offset Value' option for customizing scroll-to value.
NEW: Yoast & Rank Math: make primary term active category in WooCommerce widget.
ENHANCEMENT: Centering the canvas in UX Builder.
ENHANCEMENT: Combined post date and author into a single string for translation purposes.
ENHANCEMENT: Improved customizer sortable enabled/disabled state style.
ENHANCEMENT: Improved various translation strings.
ENHANCEMENT: Infinite scrolling in conjunction with Facet WP.
ENHANCEMENT: Menu link element can now use mailto:, sms:, ... protocol links.
ENHANCEMENT: Replaced jQuery waypoint with a more efficient method for better performance.
ENHANCEMENT: Separated blog post shortcode links to image and title.
ENHANCEMENT: Scroll hierarchy when dragging over it in UX Builder.
ENHANCEMENT: Swatch flex spacing & added size variables.
ENHANCEMENT: UX Blocks: Hide from nav menus selection.
ENHANCEMENT: Various CSS improvements.
FIXED: Attach events to duplicated elements in UX Builder.
FIXED: Edit with UX Builder button in Gutenberg not visible in some cases.
FIXED: Focus duplicated element correctly in UX Builder.
FIXED: Sorting multi select controls in UX Builder.
FIXED: Multi select controls showing all terms or tags in UX Builder in some cases.
FIXED: Issue where the $.block overlay was appearing over the header in some cases.
FIXED: Mobile logo left positioning in conjunction with desktop center logo positioning.
FIXED: Portfolio tag breadcrumbs going outside of the container.
FIXED: Potential XSS within UX Builder.
FIXED: Prevent native drag on elements in UX Builder.
FIXED: Refined scroll-to positioning for WooCommerce notices (e.g., on the checkout page) for a better user experience.
FIXED: Replaced WooCommerce deprecated methods.
FIXED: Search lightbox and shortcode button dimensions on mobile.
FIXED: Tabs: Lazy load issue in other than the first tab with animated content element.
FIXED: Blog posts href on button element.
FIXED: Unknown format specifier on tab title in some cases.
FIXED: WordPress 6.2 deprecations.
UPDATED: Google Fonts list.
UPDATED: Language files.
DEV: Added flatsome_follow_links filter.
DEV: Added flatsome_share_links filter.
DEV: Added flatsome_shortcode_${tag}_social_links filter.
DEV: Deprecated flatsome_swatches() in favor of swatches().
DEV: Updated Tooltipster to 4.2.8 + migrate.
Note: Minimum required WooCommerce version 4.7.0.
Note: Minimum required WP version 5.4.0.
--- v3.16.8 (30.03.23) ---
NEW: Support for Instagram access tokens (Instagram Basic Display).
NEW: Select connected Instagram account from select list in UX Builder.
CHANGED: Remove old Instagram scrape method.Lưu ý khi cập nhật Flatsome theme lên 3.17.7
Đây là lời khuyên của mình dành cho các bạn không nắm quá nhiều kĩ thuật về code, ít nhất là đọc hiểu lỗi khi debug. Nếu website của bạn xây dựng từ các phiên bản Flatsome cũ hơn (từ 3.15.7 trở xuống) thì lưu ý nhé.
Bởi vì từ bản update 3.16 của Flatsome thay đổi rất nhiều core + template, chính vì vậy nếu như các bạn cảm thấy website mình cần phải update lên 3.16 để sử dụng các tiện ích mở rộng của Flatsome thì hãy update. Còn không thì mình khuyên đừng update, hoặc thuê 1 bạn kỹ thuật vào fix các lỗi từ template.
Vừa rồi mình thử update lên flatsome bản 3.16 thì 1 số shortcode mình viết mới (dựa trên core của flatsome) đã không chạy và báo lỗi. Mình đã vào file core đọc và update lại cho shortcode của mình.
Thấy cải tiến của nó có nhiều cái lợi nhưng vẫn có kha khá cái bất cập. Đáng ra thì nó nên làm theo dạng extension, nhưng không, nó thay core luôn.
Các bạn trước đây đã từng custom template của nó thì đừng hoang mang khi update nhé, hãy vào core đọc và tra cứu xem những thay đổi trong template (Hoặc đơn giản hơn là bật debug lên xem) rồi thay bằng core mới là được.
Chúc các bạn thành công với cập nhật mới của flatsome nhé.
Các file chia sẻ theme Flatsome trên mạng đều dính Shell?
Thực tế nếu các bạn tải theme Flatsome từ các nguồn không đủ uy tín đều có khả năng dính shell vì bộ mã nguồn của theme có tới gần 2000 files nên rất khó để biết kẻ xấu có chèn mã độc hay không. Giải pháp duy nhất chúng ta có thể làm là hạn chế nguy cơ bị dính mã độc bằng cách kiểm tra cẩn thận trước khi sử dụng bằng cách quét mã độc bằng virustotal và plugin Wordfence.
File theme Flatsome mình chia sẻ ở đây là mua chung của 1 nhóm bạn. Mình đã sử dụng và chia sẻ nhiều năm nay chưa bao giờ có sự cố gì nên các bạn có thể hoàn toàn yên tâm sử dụng.
Ngoài ra, trong file functions.php của theme đã được chèn thêm 1 đoạn code lách bản quyền như sau:
update_option( get_template() . '_wup_purchase_code', '*******' );
update_option( get_template() . '_wup_supported_until', '01.01.2050' );
update_option( get_template() . '_wup_buyer', 'Licensed' );Sau khi cài đặt và tùy chỉnh mọi thứ trên website thì các bạn có thể xóa đoạn code này khỏi file functions.php để tối ưu hơn tốc độ cho trang web. Bởi vì Flatsome sử dụng API để kiểm tra License key định kỳ theo cronjob. Khi đặt mã này trong functions.php thì khi bất kỳ một tương tác nào đến website là nó sẽ liên tục cập nhật vào database.
Tất nhiên nếu xoá code này đi thì theme sẽ trở thành chưa được kích hoạt. Bạn sẽ nhìn thấy thông báo yêu cầu license key hiển thị trong trang quản trị. Và tính năng Flatsome Studio sẽ không dùng được nên bạn không thể import demo mới. Lúc nào cần thì lại sửa file functions.php và thêm lại đoạn code trên để kích hoạt theme thì sẽ dùng được Flatsome Studio như bình thường.
Tải về:
Pass giải nén: dovanphuong.com (nếu có)
Phiên bản cũ hơn: flatsome-v3.15.7.zip (bản này khá ổn định, nếu đang dùng tốt các bạn không cần thiết phải nâng cấp lên phiên bản mới nhất đâu)
Đây là bản đã kích hoạt sẵn bản quyền rồi nên bạn chỉ việc tải về và dùng thôi.
