YOOtheme Pro 4.5 – Live Search, WooCommerce Filter and Refined Lightbox Gallery
Today we are thrilled to introduce YOOtheme Pro 4.5, and it's huge! It brings live search, videos everywhere, a refined lightbox gallery, a WooCommerce Filter element and tons of other page builder improvements. This update is a game-changer for product catalogs and eCommerce shops. Let's get right into it!
Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.
Here is the official trailer for YOOtheme Pro 4.5!
Live Search
Today, we are bringing back the search! We just unlocked a completely new search experience for your site with Live Search. It combines AJAX search results with the power of the YOOtheme Pro page builder. Results will be shown as you type and get more precise as you continue typing. All you need to do is create a template for the Live Search and load the results dynamically into the page builder layout. You can even have different layouts for the default and mobile header. We are so excited, Live Search makes this release a game-changer for your product search.
Search Layouts
But there's more, it comes with so many layout options! You can search directly in the header and show the live results in a dropdown, or click a search icon to open the dropdown with the search and the results. It will look just like your menu dropdowns. Alternatively, you can show the search and its results in a full-width dropbar or a modal window. And there are more options to refine them even further. The search field itself can expand to fill the available space in the header, and you can show an optional search icon on the left or right. Of course, everything can look completely different in the mobile header.
Search Filter
By default, search results contain any post or page. But on websites like a product catalog or a movie database, you would want to only search through relevant post types and not, for example, blog posts. That's why we added an option in WordPress to limit the search by any post type, and in Joomla to pick a filter from the smart search.
Updated YOOtheme Pro Theme Packages
With all these new options you can bring a whole new search experience to your site. And guess what, we are bringing Live Search to all our YOOtheme Pro theme packages! The result is amazing, take a look yourself.
So, the search is back, and we love it. Now let's talk about our video update.
Videos Everywhere
Videos are a powerful tool to deliver immersive experiences and make your website more memorable. And now we are bringing videos everywhere. We streamlined all our most-used elements, Panel and Overlay, Grid and Gallery, and both Slider elements. They now all have a video field, and for more interactivity even hover image and hover video fields. By the way, the focal point option also applies to videos.
But the best part is, you can now create mixed galleries with images and videos using dynamic content. Simply select images and videos in a Subform field in Joomla or a Repeater field in WordPress and map them to an image field in any of these elements. YOOtheme Pro will automatically render the video as well.
By the way, the Add Media button supports videos as well, so now you can add images and videos in a batch.
Finally, the YOOtheme Pro customizer will show a video preview in the media manager, video field and in multiple item elements. Hovering the preview will play the video.
So, go get some videos on your site and make it even more engaging. That's it for the video update. Next is the lightbox gallery.
Refined Lightbox Gallery
We are so excited the lightbox gallery reached a new level. Slide between your gallery images and videos with a smooth slide, fade, or scale animation. Instead of a previous/next navigation, show a vertical thumbnail or dot navigation, and, optionally, add a counter for the current slide.
By default, images and videos in the lightbox are responsive and always fit the viewport. But now, if their height exceeds the viewport, the mouse cursor will display a zoom-in icon. Clicking it will only constrain the image by its width, allowing you to scroll the image up and down, perfect for any shop. Click it again to zoom out.
All controls will automatically change their color so they look great on any image or video.
Hide all controls after a short delay or keep them visible all the time. Finally, choose whether clicking the background will close the lightbox.
All these refinements will help you build an amazing lightbox gallery for your products.
Speaking of products, next up is our huge WooCommerce update.
WooCommerce Filter Element
Do you see where this is going? Search, videos, lightbox gallery – they are all important for a great eCommerce shop. But one thing is missing – a great products filter. Not anymore! YOOtheme Pro 4.5 comes with a new Products Filter element for WooCommerce.
Now you can show all the product filters in a dropdown menu. Style them as pills, tabs or buttons. Arrange them with the product ordering, result count and the active filters in a horizontal layout. There are so many options. Show the filters in a dropbar, display a parent icon and the active filter count in parenthesis or as superscript, and add a clear all button for the active filters.
But that's not all. Instead of a dropdown menu, you can also show a toggle button that opens all filters in a dropdown, dropbar, or an offcanvas dialog, each with its own options. Choose between different styles for the filter toggle, show an optional icon and display active filters together with other filters. You can even define a breakpoint to switch between the filters in the dropdown menu and the toggle button, so the filters will look great on any device.
And don't forget, you can template all product archives with the YOOtheme Pro page builder and its elements. Together with the new Products Filter element you can create stunning product pages for your WooCommerce shop.
WooCommerce Update
But there's more. Since our last update, we improved the WooCommerce integration in various aspects. The Products element can show a pagination when loading custom products.
You can now use dynamic conditions to adjust the My Account template for all its subpages, meaning the Login, Lost Password, Reset Link Sent and Lost Password Confirmation pages, as well as the Checkout page with its Order Received subpage.
Set the number of columns for the cross-sell products on the Cart page.
And in the style customizer choose a two-column layout for the Cart and Order pages showing the item totals on the right and add an optional grid divider for the My Account page.
That's it for WooCommerce. Next are element improvements in the page builder.
Slideshow and Sliders
Slideshows and sliders are the latest must-have for product archives! They let customers swipe through different product images right on the overview page without having to visit the single product page. To achieve this, we added some cool new features to the Slideshow and Slider elements.
There is a new option to link the whole slideshow instead of the single slides, and you can show the dot or thumbnail navigation only on hover.
Thanks to UIkit, all slideshow and slider navigations will automatically adjust their color for each slide depending on the image behind. So you can now mix light and dark images, and the navigation will always match the background. Simply wow!
Finally, to make the Slideshow and Overlay Slider elements more consistent, the Slideshow now allows you to link either the entire overlay or just its title, while the Overlay Slider can display the navigation, such as the dot navigation, above the image or video.
Expand Elements and Content
You know how you can expand the height of an Image element to fill the available column space? Well, now this option is also available for the Overlay, Slideshow and both slider elements. So you can match the height of the other column no matter how many elements it has.
Additionally, the Overlay, Gallery, Overlay Slider and Slideshow elements can expand the content in the overlay to push the link to the bottom.
Button Dialog
This is a small one, but you will love it! The Button element has a new dialog text field. So instead of opening a link, you can show content, like a size guide, in a modal window or an offcancas sidebar.
That's it for the element improvements, now let's take a look at the dynamic content update.
Copy Template
Working with templates in YOOtheme Pro is pretty easy. But with YOOtheme Pro 4.5 it just got easier. You can now copy templates with just click and use them for other pages. No need to save the layout in the library and import it again. What a time-saver!
Request Source
Next, we added new fields for the browser request to the global site source. This is great because you can use them in a dynamic condition to adjust the layout depending on the URL. For example, if you link to the same category page but with a different article order, you can show different headlines, like Latest Articles and Popular Articles or change the layout altogether.
Regular Expressions for Dynamic Conditions
To make dynamic conditions even more powerful, you can now use regular expressions. For example, match menu item ids /Itemid=(220|250)/ in the URL query or, for search engine friendly links, /new-in|bestsellers/ strings in the URL path. By the way, you can now show an element only if dynamic content is empty, for example, to show a different headline if there are no search results.
Teaser Field Fallback
Next up, there is a small update for the teaser field. By default, the teaser field shows the excerpt field if it has content, otherwise the intro text. If there is also no intro text, it will display the content as a fallback. So if on the single post page you map both, the teaser and the content field, to show them in different styles, and the article has no intro text, the content will be shown twice. To prevent this, we added an option to disable the content fallback in the teaser field. By the way, if you use the content length option, you can now preserve words so they are not truncated.
Further Improvements
Of course, YOOtheme Pro 4.5 also comes with further improvements and fixes.
Fitting all markers on the Map element has never been easier. Instead of defining the center position and zoom level manually, there is now an option to fit all markers with just a click.
In WordPress, all archive templates have an option to set the number of posts per page, so now you can uninstall the Posts per Page plugin.
In YOOtheme Pro linked panels always changed their style on hover. Now adding a hover style in Panel, Grid and Panel Slider elements is optional.
There is a new Horizontal Justify layout for the mobile header, just like for the default header.
Finally, there are new options in the style customizer. Set an item line effect for the Nav and Tab components or a sibling effect for the Nav, Subnav, Thumbnav and Iconnav components.
We also fixed longstanding caching issues in WordPress. First, the cache folder with all its images is preserved during a theme update. And second, 3rd party plugins can no longer break the generation of cache images.
The Skip to main content link is finally translatable and its link style is fixed.
As always, for the full list of features and fixes, check out the changelog.
Next Steps
Wow, YOOtheme Pro 4.5 is a huge update. It unlocks an entirely new search experience with Live Search. Together with videos everywhere, a refined lightbox gallery, the Products Filter element for WooCommerce, improved slideshows and sliders and so much more, you have everything you need for a great product catalog or an eCommerce shop.
And… Surprise! Next up is a shop theme package which will show you all new features in action.
Now go ahead and take YOOtheme Pro 4.5 for a test drive. As always, we are looking forward to your feedback, so let us know what you think in the comments below.