Flatsome Theme 3.18 update – Complete Walkthrough

In this guide, we’ll walk through the exciting new features of the Flatsome 3.18 release. From improved shipping notifications to enhanced product displays, this update packs a lot of great options to improve your WooCommerce store. Let’s dive in!

 •


New Features in Flatsome Theme 3.18

The latest update introduces an exciting range of enhancements designed to make managing your WooCommerce site smoother and more efficient. Here’s a quick overview of the most impactful improvements:

Improved UX Builder Enhancements

The UX Builder, a favorite among Flatsome users, just got even better with the 3.18 update. This update introduces a more intuitive interface and enhanced responsiveness, making it easier than ever to design and edit pages seamlessly. Key usability improvements simplify layout adjustments, style customizations, and real-time change previews, helping you work more efficiently and effectively.

Advanced WooCommerce Integrations

The 3.18 update takes Flatsome’s WooCommerce compatibility to the next level. Dynamic product pages now feature expanded customization options, allowing you to tailor them to your store’s needs. Performance enhancements ensure smoother handling of larger product catalogs, improving the experience for both store managers on the backend and customers on the frontend.

Design and Performance Updates

The 3.18 update brings refined layouts and new design elements, helping you give your website a fresh, modern appearance. Additionally, Flatsome has introduced speed optimizations to ensure faster loading times, enhancing the user experience while improving your SEO rankings.

Step-by-Step Guide to Using Flatsome 3.18

1. Enable Free Shipping Notification

The new Flatsome 3.18 adds a free shipping notification to the mini-cart, cart page, and checkout.

  • Go to Flatsome Theme Options > Header.
  • Click on the cart settings gear.
  • Enable Free Shipping Notification.
  • Ensure you’ve set up free shipping in WooCommerce Shipping Settings with a minimum purchase amount.

2. Cross-Sell Options in the Cart

You can now highlight cross-sell products in the cart to encourage more purchases.

  • Connect products in WooCommerce by going to the Linked Products section.
  • In Cart Settings, enable Show Cross-Sells to display linked products inside the cart.

3. Quantity Input for Cart Items

Allow customers to adjust product quantities directly inside the cart.

  • In Cart Settings, enable the Quantity Input option.
  • Customers can increase or decrease product amounts easily.

4. Sticky Footer for the Mini-Cart

Make the “View Cart” and “Checkout” buttons sticky at the bottom of the mini-cart for better visibility.

  • Go to Flatsome Theme Options > Header.
  • Scroll to Cart Settings and enable the Sticky Footer option.

5. Adjust Cart Drawer Width

Customize the width of your cart drawer for a better user experience.

  • Head to Header > Cart Settings.
  • Set the Drawer Width (e.g., 600px) to adjust how wide the cart slide-out is.

6. Product Gallery: Slider to Fade Effect

Change the default slider in product galleries to a fade effect.

  • If using UX Builder, select Product Gallery and change the effect to Fade.
  • Otherwise, go to Theme Options > WooCommerce > Product Page, and set the gallery type to Fade.

7. Pagination for Products and Blogs

Add pagination to blog posts and product listings in your UX Builder.

  • Open the UX Builder and set your product row to show 4+ items.
  • Enable Pagination, and choose between Load More, Pagination Links, or Previous/Next buttons.

8. Accordion and Tab Anchors

Link to specific accordions or tabs from external pages using custom anchor links.

  • Create an accordion, add an anchor in its settings (e.g., “test”), and link to it externally by appending #test to your URL.

9. Google FAQ Structured Data

Improve your SEO with structured data for FAQ accordions.

  • In the Accordion Settings, toggle the Structured Data option on for FAQs.

10. Pjax Functionality for Faster Navigation

Enable Pjax for a smoother navigation experience with AJAX loading.

  • Go to Flatsome Theme Options > Advanced > Content Delivery and enable AJAX Pagination for shop, blog, and other sections.

11. Maintenance Mode with Role-Based Exclusion

Keep your site under maintenance while allowing specific users to access it.

  • Go to Flatsome Advanced Settings and enable Maintenance Mode.
  • Set a Bypass Key (e.g., ?SE) for access while logged out.

12. WhatsApp Contact Option

Add a WhatsApp button in the header for direct customer communication.

  • Open Header in UX Builder, click Contact Element, and input your WhatsApp number with country code.

13. Color Picker for Sections and Columns

Easily choose colors for sections and columns in your site using the new Color Picker feature in UX Builder.

The Flatsome 3.18 update is loaded with powerful features to enhance your site’s functionality, design, and performance. By leveraging these updates, you can deliver a better shopping experience for your customers while simplifying your workflow.

Discover everything Flatsome 3.18 has to offer and take your WooCommerce store to the next level. For expert advice and tutorials, visit Seb de la Web and stay ahead in your eCommerce journey.

Continue learning

flatsome designs

200+ Free Designs

Get for free

Need a custom design? Hire Seb today

Get the #1 All In One Design Agency for Flatsome

Hire Seb & Tas