The Posts module is one of the most powerful modules of Uncode, thanks to which you can create many combinations of layouts and features. In this article, you find special functions of the Posts module that can help you when you create your eCommerce websites:

▶  

• WooCommerce Sorting Filter
• WooCommerce Widgets Filter
• Secondary Featured Image
• Dynamic and special WooCommerce queries

WooCommerce Sorting Filter

From Uncode 2.3.0, when using the Posts module it's possible to activate the WooCommerce Sorting Filter. This practical filter allows to sort the current product selection according to some parameters: 'Sort by latest', 'Sort by popularity', 'Sort by average rating', 'Sort bt price: low to high', and 'Sort by price: high to low'.

To activate the default WooCommerce Sorting Filter when using the Posts module follow these steps:

• Open the Posts module settings, and in General → Build Query → Post Types set Product, screenshot ;
• Navigate to the Module tab, and activate the options Filtering, Extra Filters, and Woo Sorting. Please note that each of these options is dependent on the previous one, so if you don't see them it's because you have to activate them in this order, screenshot ;
• Optionally, it's possible to activate the Woo Sorting Count to show the WooCommerce result count text.

Note. Please note that the WooCommerce Sorting Filter doesn't work with possible custom order Posts module options. For example, this filter is not compatible with the Posts → Single → Custom Order option.

WooCommerce Widgets Filter

From Uncode 2.3.0, when using the Posts module it's possible to activate the Widgets Filtering. The Widget Filtering is nothing more than a Content Block that is connected to the Posts module, here you can insert Widgets or simple contents.

Important: Please note that although the Page Builder allows you to insert in the Content Block, that you will use as Widgets area, any type of module, the Widgets Content Block is designed to be used with simple Widgets. Our support is therefore offered for the use of simple Widgets. In fact, in the official demo, we never promote the use of other Page Builder elements. Support is not offered if you insert in the Content Block an additional Posts module, a Media Gallery module, modules that make massive use of JavaScript, or that require a nested Grid System structure.

How to set up a Widgets Content Block

To activate the Widgets Content Block when using the Posts module follow these steps:

• Create a new Content Block, insert a Row element, and insert the Widgets you need in the Columns. Note that you can use both the WordPress Widgets, both the WooCommerce Widgets, screenshot ;
• Open the Posts module settings, navigate to the Module tab, and activate the options Filtering, Extra Filters, and Widgets Filtering. In the Widgets Content Block option select your newly created Content Block. Please note that each of these options is dependent on the previous one, so if you don't see them, it's because you have to activate them in this order, screenshot .

Collapsible Widgets

You have probably noticed that from Uncode 2.2.3, it is possible to collapse Widgets on mobile. This way, the Widgets take up less space, and the user can selectively choose which one to open when viewing your site from his mobile device. Please find this option within each Widget, screenshot .

To make the layout even more compact on mobile devices, we have prepared a special (and optional) code that removes the default vertical gap between the Uncode' Rows. If you are interested in removing the vertical gap between Rows on mobile devices, please navigate to Row → Extras → Extra Class Name, and insert this simple code mobile-no-inner-gap tablet-no-inner-gap, screenshot .

If you want to add a top border to the first widget on mobile devices, please navigate to Your (first) Widget → Extras → Extra Class Name, and insert this simple code mobile-first-collapse-widget, screenshot .

If you want to remove the possible extra bottom spacing of the last widget on mobile devices, please navigate to Your (last) Widget → Extras → Extra Class Name, and insert this simple code mobile-last-collapse-widget, screenshot .

Secondary Featured Image

From Uncode 2.3.0, when using the Posts module it's possible to show a Secondary Feature Image when the user hovers the mouse over one of the thumbnails. This option is generally combined with eCommerce websites to show a second image or a specific product detail.

To activate the Secondary Featured Image when using the Posts module follow these steps:

• Open the editing page of your single Blog Post, Portfolio Item, or Product. In the Secondary Feature Image option set your image, screenshot ;
• Open the Posts module settings, and in the Block tab activate the Secondary Image, screenshot .

Dynamic and special WooCommerce queries

From Uncode 2.3.0, when using the Posts module it's possible to create special queries for groupings products like the Related and Up-Sells Products, and grouping products by special WooCommerce attributes such as On-Sale, Best Selling, Top Rated, Featured, and Cross-Sells.

Please note that basically, these new options replace the WooCommerce modules used by the older versions of Uncode. In fact, with these new methods, it's possible to use the Posts module's many options to create any layout for your products.

Related and Up-Sells Products

When you are on a Single Product Page it's possible to use the Posts module to create Related Products or Up-Sells products groups, related to the main product on that page. Related Products are products from your store that share the same categories as the current product while Up-sells Products are products that you recommend instead of the currently viewed product.

To activate the Related or Up-Sells Products when using the Posts module follow these steps:

• Open the Posts module, and in the tab General activate the options Dynamic Query → Dynamic Query Type, and select the Related or the Up-Sells option, screenshot .

Note on Up-Sells. If you have set a Posts module with Up-Sells option but in a particular product there are no Up-Sells, and you want to hide the Row where the module is contained, you can insert in the Row → Extra the CSS class hide-if-no-upsells.

On-Sale, Best Selling, Top Rated, Featured, and Cross-Sells

While creating your eCommerce website, you may need to create product groupings based on specific attributes of your WooCommerce products. For example, you may need to create a section with your on-sale products on your homepage, or a page with your featured products. Thanks to the Posts module, you can set a special query that allows you to group your products according to WooCommerce attributes (On-Sale, Best Selling, Top Rated, Featured, and Cross-Sells).

To activate a special attribute query when using the Posts module follow these steps:

• Open the Posts module, and in the tab General activate the option Build Query and select an option in the Product Attribute dropdown, screenshot .