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

WooCommerce elements

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

WooCommerce sources

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.

WooCommerce CSS

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.

WooCommerce style options

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 style variations

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.

WooCommerce settings cart brackets

WooCommerce settings cart badge

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.

WooCommerce settings variable product

WooCommerce settings lower price

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 e-commerce 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 Shop

Balou

Tech Space Shop

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

Advanced filtering for custom sources

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.

Filter by user

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.

Related articles field

Limit Templates by Language

With YOOtheme Pro 2.5 you can limit the template assignment by language which is very useful for multilingual sites.

Limit by language

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.

What's new landing screen

The header and toolbars are now also available as menu positions. It is a nice shortcut to publish menus without having to create modules.

Menu positions

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.

Menu style

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.

Navbar item image

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.

Social element

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.

Menu dividers

Multiple items elements can have a different link text for each item.

Item link text

Buttons in all YOOtheme Pro elements have a new full width option.

Full width button

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.

Animate items

Additionally, the filter animation in the Grid and Gallery elements can be disabled.

Disable animation

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.

Related

Comments (79)

YOOtheme Pro is the most powerful Joomla and WordPress theme and page builder. It offers developers and designers everything they need to create business, ecommerce, blog, and personal websites visually.

By providing your email, you agree to our Privacy Policy.

Copyright © YOOtheme. All rights reserved.