YOOtheme Pro 2.5 – Introducing the WooCommerce Builder
Today's the day WooCommerce users have been waiting for! YOOtheme Pro 2.5 adds the much anticipated WooCommerce Builder. Now you can not only design your shop with dedicated WooCommerce elements in the builder, but also load any product field into the existing YOOtheme Pro elements. This unique feature from YOOtheme Pro gives you endless possibilities for your shop. But that's not all, besides WooCommerce we added advanced filtering for all custom sources and a new related posts field. Do I have your attention? Then let's dive right in.
Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.
WooCommerce Elements
YOOtheme Pro 2.5 introduces 18 new WooCommerce elements to the page builder which allow you to fully customize your entire WooCommerce shop. Simply create templates for the shop and single product pages as well as the categories and tag archives and arrange the new elements within your layout using page builder sections, rows and columns. The elements load the partial WooCommerce template files like the product price, rating or the add to cart button and have all the general element settings. And of course, you can mix them with all the other YOOtheme Pro elements or any WooCommerce widget.
The Products element is even more powerful. It renders the WooCommerce products shortcode which is why it can be used on any page and has all the available shortcode options. For example, you can display on sale, best rated or best selling products right on your home page and filter them by category, tags or SKU.
Here is an overview of all the new elements together with their description and pages they can be used on.
| Element | Page | Description |
|---|---|---|
| Add to Cart | Product | Display the add to cart button |
| Product Information | Product | Display the additional information of all the product attributes |
| Product Description | Product | Display the short or long description of the product |
| Product Images | Product | Display product images |
| Product Meta | Product | Display the SKU and product category linked to the category page |
| Product Price | Product | Display the product price |
| Product Rating | Product | Display the product rating with a link to reviews |
| Product Tabs | Product | Display the product description, additional information and reviews in tabs |
| Product Stock | Product | Display the product stock |
| Product Title | Product | Display the product title |
| Products | Any Page | Display a products grid with the add to cart button |
| Related Products | Product | Display related products with the add to cart link |
| Upsell Products | Product | Display upsell products with the add to cart link |
| Woo Notices | Product, shop and frontpage | Display the cart notice |
| Woo Pages | Any Page | Display the cart, checkout, account or order tracking page |
By the way, breadcrumbs, pagination and reviews do not have separate elements since this functionally is already available in YOOtheme Pro. The updated Breadcrumbs element works just like the WooCommerce breadcrumbs while the product reviews can be shown using the Comments element.
WooCommerce Sources
Everything to this point is what you would expect from a common page builder. But YOOtheme Pro has the groundbreaking feature of mapping content into any YOOtheme Pro element. And it's now available for WooCommerce! You can show your products in slideshows, sliders, galleries or any other YOOtheme Pro element, including all their custom fields.
Here is a list of all product fields available in addition to the common post fields.
| Name | Type | Description |
|---|---|---|
| SKU | Single | Render the stock keeping unit |
| Price | Single | Render the product price |
| Stock | Single | Render the product stock |
| Rating | Single | Render the product rating with a link to reviews |
| On Sale | Single | Is 1 if the product is on sale, or 0 if not. Use with dynamic conditions to display on sale products only. |
| Total Sales | Single | Render the number of sales |
| Add to Cart Link | Single | Render the add to cart link |
| Add to Card Text | Single | Render the add to cart link text |
| Additional Information | Single | Render additional information of the product like weight, dimensions or attributes with a link to their archives |
| Attributes | Multiple | Render product attributes with the name and value fields |
| Product Gallery | Multiple | Render the product gallery with url, alt and caption fields |
| Upsell Products | Multiple | Render the upsell products |
| Cross-Sell Products | Multiple | Render the cross-sell products |
But when should I use the WooCommerce sources and not the WooCommerce elements? Well, first, with dynamic content you can map the product fields into any YOOtheme Pro element and make use of all its features. And unlike most WooCommerce elements that can only be used on the products pages, with custom sources you can map the products anywhere on your site. So you can mix both techniques to get the best result.
WooCommerce CSS
Since WooCommerce elements and sources still render partial WooCommerce template files, we had to either override these files or customize their CSS. We decided to leave the template files as they are to make YOOtheme Pro update-proof even if WooCommerce updates its template files. Instead, we completely reworked the WooCommerce CSS in every detail. All the different product types and states as well as the WooCommerce widgets will look great in your shop.
We also added new WooCommerce options to the style customizer, so you can easily change the look of your shop without writing any code. Here you will find different style options like font, color and margins for the product price, title and rating. Of course, you can set them differently for the shop and single product pages.
Some UI components in WooCommerce were rarely used in our demo websites, which is why we made some extra effort and optimized them in all our styles. These include the badge, form range, navbar and search toggles, form focus as well as the card badge. While this sounds like a small thing, it was a huge workload for our designers who had to test and update the components in almost 40 styles. But we think it's worth it because we really care about the quality in our style library.
WooCommerce Settings
As the icing on the cake we added the quantity to the cart menu item. You can show the cart quantity in brackets or as a badge and of course use an icon instead of the text for the cart menu item.
Variable products can now show the lowest price instead of the price range. What's really cool is that they adjust their price, stock and description depending on the chosen variation.
If the products are on sale, you can show the sale price before or after the regular price. Additionally, products have an option to set the number of columns for the gallery thumbnails.
Balou and Tech Space Rebuilt with WooCommerce
To show you the full potential of YOOtheme Pro 2.5 we have completely reworked our two eCommerce theme packages: Balou and Tech Space. We converted their content structure to WooCommerce and created new layouts and templates for all the WooCommerce pages. They are now fully functional shops. Just install the demo package and start adding your own products.
Balou
Tech Space
That's all for WooCommerce. Now let's look at all the other features.
Advanced Filtering for Custom Sources
YOOtheme Pro 2.5 comes with huge improvements to filter custom sources. Before you could only limit custom sources by categories and tags showing only posts from all selected terms. Now you can set the logical operator to match at least one of the terms, none of the terms or all terms. This gives you more control over how the terms are compared and which posts are loaded.
| Operator | Description |
|---|---|
| Match One (OR) | Display posts from at least one of the selected terms |
| Match None (NOR) | Display posts from terms other than selected terms |
| Match All (AND) | Display posts from all selected terms |
Filter Custom Sources by User
We added another filter option for custom sources. In addition to filtering posts by taxonomies like categories or tags, you can also filter them by user.
Related Posts Field
If you are using dynamic content, you may have been waiting for this feature – the related posts field. Up until now, to load posts from the same category you had to pick them manually. Now all posts have a related posts field by default and the relationship is not just limited to categories. You can set the logical operators for how the posts relate – to categories, tags, users or any other custom taxonomy and even exclude upsell and cross-sell products. Of course, it goes without saying that the current post is excluded.
Limit Templates by Language
With YOOtheme Pro 2.5 you can limit the template assignment by language which is very useful for multilingual sites.
What's New Landing Screen
From now on YOOtheme Pro shows a What's New dialog after an update showing all its highlights. It's a common software practice, and we hope this way no one will miss the new features and can start using them right away. The information is loaded from the local news.md file in the YOOtheme Pro theme folder and is only shown once after the update. To show it again, click the button next to the Changelog in the YOOtheme Pro About panel.
Menu Improvements
The header and toolbars are now also available as menu positions. It is a nice shortcut to publish menus without having to create modules.
If you do use menu modules, you can also set options for their navbar items in the Layout → Header panel which was not possible before.
Additionally, menu modules can be rendered as a nav, subnav or iconnav on any position.
Last but not least, we added an option in Joomla to pick an image for the menu item to the Navbar Items panel, so it is just like in WordPress.
Socials Element
The Socials element also got a small update. You can now either use one of the icons available in the UIkit icon library or pick a custom image. We also updated the icon list and added icons for Discord, TikTok and Twitch. In addition, social icons can now be aligned vertically.
Sneaked into 2.4
Some smaller features sneaked into YOOtheme Pro 2.4 since they were needed for our DevStack theme package. And here is a quick walk-through.
We added a menu divider option for all menus – the menu positions, the Nav element and the menu modules and widgets.
Multiple items elements can have a different link text for each item.
Buttons in all YOOtheme Pro elements have a new full width option.
We added a new animation option to the Grid and Gallery elements. Before the element animation always applied to the items. Now you can select whether to animate the element itself or its items.
Additionally, the filter animation in the Grid and Gallery elements can be disabled.
Finally, custom posts in WordPress can be ordered by Post Order which corresponds to the Article Order in Joomla. This requires the free WordPress Post Types Order plugin which allows you to order posts using drag and drop.
Further Improvements
YOOtheme Pro 2.5 comes with even more improvements and fixes. For example, you no longer need to add a REST API base slug for custom post types in WordPress. We solved the long-standing issue in Joomla where the YOOtheme installer plugin got uninstalled together with Widgetkit or ZOO. The menu accordion option now works in the modal and offcanvas layouts and the navbar text items can no longer be closed by click if in hover mode. For the full list of features and fixes, check out the changelog.
Next Steps
YOOtheme Pro 2.5 not only introduces the long-awaited WooCommerce builder, but it also brings great refinements for dynamic content. So what's next? All we can say is that we started looking into improving the menus, if you know what that means? 😉
Now go ahead and try YOOtheme Pro 2.5 yourself. As always we are looking forward to your feedback, so let us know what you think in the comments below.
