How to Add Filters to WooCommerce and Custom Posts

Add filters to WooCommerce and Custom Posts Featured Image

Just imagine how an actual customer experience looks like in a retail store. Most people don’t know what exactly they want in the first place. They like to see collections of items and then evaluate their options by narrowing down their selection. This is the ultimate experience.

Why do you need to add filters to WooCommerce and Custom Posts?

If you’re running an online store or using custom post types, you need to make sure that your users are able to easily find what product or post they are looking for. Having a search field on your website is a great help, but not nearly enough.

Just imagine how an actual customer experience looks like in a retail store. Most people don’t know what exactly they want in the first place. They like to see collections of items and then evaluate their options by narrowing down their selection. This is the ultimate experience.

Now, you should ask yourself as an online store runner. Does your website have this capability? Do you let your customers play with their options and narrow down their preferences?

Booking.com has a huge database but it is easily searchable by humans with the help of filters

Jupiter X is not only giving you an easy-to-setup and fully customizable platform to sell your products on, but it also offers comprehensive Woocommerce features to amplify your customer’s shopping experience even further.

Jupiter X comes bundled with a plugin called JetSmartFilters so you can add filters to WooCommerce and custom posts. This tiny and powerful plugin uses powerful AJAX filters so your customer can find the right WooCommerce products and custom posts they’re looking for.

Who needs to add filters to WooCommerce and Custom Posts?

It’s a must for pretty much anyone running an e-commerce website or custom post types.

  1. Any online store based on Woocommerce
  2. Listing websites such as real estate, car rentals, etc.
  3. Websites with custom post types

Features

Speed

JetSmartFilters is created based on AJAX technology, which allows the filters to work without refreshing the page, making them even faster. So, users can work with options and filters seamlessly without having to refresh or reload the page.

7 Smart Filter Variations

There are several filter types you can choose from based on your need. Everything is built on Elementor, so you can easily modify, customize, and add filters to WooCommerce and custom posts.

9 Filters and Pagination Widgets

Further improve your visitor’s experience with these versatile filters and pagination widgets:

Highly customizable WooCommerce and Custom Post Filters

JetSmartFilters is built upon the Elementor plugin, therefore it is extremely customizable, just like any other Elementor widget. You can easily drag and drop the filter widgets to the page and start customizing their elements until it matches your desired style and theme. With Jupiter X, it’s that easy to add filters to WooCommerce and custom posts!  

Official plugin website

Documentation

How to Add Amazing Visual Effects to Your Content with Jupiter X

Add Amazing Visual Effects to Your Content with Jupiter X Featured Image

Visual effects such as parallax, sticky elements, unfolding contents, hotspots, web particle animation, and more. are helpful in almost every kind of website. E-commerce websites, for instance, can present their products better with hotspots on product images.

Landing pages can tell better and shorter stories – which translates to less bounce rate – with sticky elements or unfolding content. Parallax effect is also quite handy when creating eye-catching content. Normally, you would spend extra for different plugins. But with Jupiter X, they are all included for free in one plugin called JetTricks.

Add Amazing Visual Effects to Your Content with Jupiter X 1

Different Ways to Add Amazing Visual Effects to Your Content with Jupiter X

To make your content more useful and interesting to read, the rich library of visual effects available in JetTricks plugin is at your disposal. There are numerous cases where you can use these effects, but here are some of them:

1. Parallax effect is everywhere and it can be used to add a 3D depth to your content. Use it to create your static pages more dynamic and captivating! Parallax Effect Demo

2. Sticky elements are great in creating a custom scrolling experience. Make an important part of your content fixed while the rest scrolls down. Sticky Elements Demo

3. Unfolding columns and view more content effects are what you see in most introductory landing pages. Offering a long description does no good to your page bounce rate. By hiding a chunk of it and make a section optional to read, you can make your pages more effective. Unfolding column demo and View more content demo

4. Hotspot on images is a great addition to your online shop. You can also use it for more descriptive and interactive images across your website. Hotspot on Images Demo

5. Your pages don’t have to be boring. Add some smooth loop animations to your page backgrounds or banners to grab the attention of your site visitors and keep them interested. Loop Animations Demo

6. Use tooltips to create more informative yet less crowded pages. Perfect for eCommerce and product landing pages. Tooltips Demo

Easy Customisation

Working with visual effects in JetTricks is as easy as using Elementor editor! Every change you make is instantly available for preview and deeply customizable. There are also limitless possibilities and combinations you can try when you add amazing visual effects to your content with Jupiter X.

Add Amazing Visual Effects to Your Content with Jupiter X 2
You can use any JSON code to create particles with unlimited characteristics.

How it works

Jupiter X comes bundled with the JetTricks plugin for free. It’s deactivated by default, but you can activate it via the plugin manager in your Jupiter X control panel. When activated it, adds its settings to the existing Elementor elements such as columns, heading, an image, or completely new elements such as view more element and unfolding element.

So, what are you waiting for? You can now add amazing visual effects to your content with Jupiter X, so start vamping up your site today.

Documentation

Meet Jet Engine! Your New Super Power To Create Custom Post Types With Jupiter X

One of the key factors when assessing a WordPress theme’s customizability is the number of post types it offers to its users. Post types enable you to build different types of content on your website. Literally, everything you build into your website should be hosted by a post type.

Posts, pages, and attachments are some WordPress native post types that are readily available upon WordPress installation. Based on the WordPress theme you use, you may have custom post types to create a wider range of content on your website. Some of the usual custom post types themes offer are portfolio, employees, testimonials, client, products, and sliders.

The Problem with Pre-built Custom Post Types

Custom post types are usually built into a theme’s core. It can increase the theme’s size and affect its speed and performance. You may have come across themes that offer custom post types you never use. You may have noticed that they just occupy some space in your WordPress dashboard navigation and reduce your websites admin’s speed. And this is one of the reasons the most customizable themes are the slowest ones, too!

So, is it possible to think about ultimate customizability with an infinite number of post types without affecting the theme’s speed and performance?

YES! Jupiter X, for the first time, turned many of the features that are commonly offered as post types to elements to save users a lot of time and effort. So, instead of creating posts in the WordPress dashboard, you can visually create elements such as employees, clients, and testimonials within Elementor and see the results in real-time.

Your WordPress dashboard sidebar is now free of post type items. You can activate the plugins like Raven and JetElements to access these elements only if you need them. If you don’t need them, you won’t have to import them and you can enjoy your theme at its highest performance.

Is that all?! Are we bound to elements and post types that Jupiter X offers?!

I’m happy to say ‘NO’ this time! 😀 Jupiter X recently added another member from the great Jet plugins family to the arsenal of plugins it offers to its users for free: JetEngine!

What is JetEngine?

JetEngine enables you to create new post types, taxonomies, and custom fields without any programming experience. You are no longer limited to post types built into your theme. You can simply build your own post type, add custom meta fields, customize its appearance and layout, and use them wherever you want.

Imagine: You don’t like the Team Member element in Jupiter X elements library to showcase your team member or you have a wide range of services with special meta fields and design needs. Or let’s say you want to build a website for a client with a wide range of products and you don’t want to add all of the content by yourself. You can simply create custom post types with Jupiter X and use them in your or your client’s website.

What’s more is that there is no coding involved and you will create the custom post types using Elementor page builder, for which you formerly needed to have good PHP skills!

What does JetEngine offer?

JetEngine offers special widgets for pulling dynamic content from the posts and displaying them in your custom post types.

Dynamic field

Display the meta content from a defined source and customize its appearance however you want.

Dynamic image

Display dynamic featured images in your custom post type and customize its appearance.

Dynamic repeater

Display dynamic repeaters in your custom post types using a defined source and enjoy infinite customizability.

Dynamic link

Add dynamic links to any custom post type.

Dynamic terms

The best way for showcasing dynamic taxonomies added to any posts or pages when creating a template with Elementor is using Dynamic Terms widget, that’s specifically cut for these purposes.

Dynamic meta

Display the publication date, information about the author, and/or the number of comments by adding Dynamic Meta widget to the template.

Listing grid

Use eye-catching Grid, Masonry and Justify layouts to display custom posts types and customize its appearance the way you want.

How to create custom post types with Jupiter X?

Let me quickly summarize how to create custom post types with Jupiter X. For a custom post type you need to create:

Post type

From the WordPress navigation bar, try:

JetEngine > Post Types > Add New

In the upcoming page, set the general settings about the custom post type first. For example, if you want to set this post type to public or private, change its appearance in WordPress navigation, or choose the sections you want to be available in the single page, and so on.

Then, you should define the meta fields you want in your custom post type. This can be a custom text, date, time, media, selector, or many other things.

A listing that uses that post type

Second, you need to create a listing in which your post type will be used. For that, try:

JetEngine > Listings > Add New

You can choose the post type you just created and then give its listing a name. Then, click on ‘Create Listing Item’

You will then be taken to the Elementor editor mode where you can create the layout of the listing for your post type however you want, just like your usual building experience with Elementor.

And that’s it! You just created a custom post type with the meta options you wanted and then created a listing where that custom post type can be used. You can now call your custom post inside your page using Listing Grid element:

You can define up to 6 columns for your listing grid within the Listing Grid element.

How to create custom post types with Jupiter X?

In this short post, we introduced the JetEngine plugin and showed you how to create custom post types with Jupiter X. If you want a more thorough explanation of the plugin, you can check the official documentation as well as the video tutorial below. Have fun and let me know if you have any questions regarding this new Jupiter X power ball!

Meet JetTabs! The Best Way to Organize Your Content

Jupiter X comes with a great page builder named Elementor and it has powerful features that let you create advanced layouts and designs. But unfortunately, it lacks one hell of a feature: Nested elements inside the tabs and accordions.

If you’re not using Jupiter X, you will have to design the complex layouts inside your tabs and accordions using HTML and CSS, and put the code directly inside the tab or accordion content.

Fortunately, we came up with the best way to organize content with Jupiter X. You can now benefit from a bundled plugin called Jet Tabs, which adds the following features to your website — totally free of charge!

  • Accordion ( Advanced Accordion lets you add complex layouts inside its content)
  • Image Accordion
  • Switcher (Toggle between two complex contents)
  • Tabs

All of these elements are capable of showing and/or hiding part of your content. Indeed, it’s the best way to organize content for seamless user experience. Now, let’s take a closer look.

JetTabs is a premium plugin that’s free to use for Jupiter X users. It’s good to know that all of the elements added to your website when you install this plugin (except the Image Accordion) will use the Elementor Block Templates, which is also free in the standard version. You don’t need to pay for the Elementor Pro to benefit from it.

Accordion

Not to be confused with Elementor’s Accordion, this element is Classic Accordion. Classic Accordion widget is the perfect tool for adding content templates built with Elementor or adding your text to every accordion item. You can use this widget in your FAQ page or show the long text content in a more appropriate way.

After adding the classic Accordion element, you can add your items, titles, and icons then set the active element.
For adding the accordion items content, you can add simple text or tabs. It’s also possible to set a section template as accordion content.

In General, the process involves creating your complex content in a block template using Elementor, then assigning the template to the accordion items in the Classic Accordion Settings.

Check out the JetTabs documentation to get more information about the best way to organize content with Jupiter X.

Image Accordion

Image Accordion is a fancy element that lets you showcase your content or categories in a stylish way. You can also use this element to highlight your gallery categories, and so on.

You just need to add the Image Accordion element your page. After that, you can simply add your images with title and description. And in case you would like to add a call-to-action button, it’s possible as well.

There’s a cool option that allows you to change the open and close animation:

Content tab >  Settings > Show Effects

You can see more examples in the JetTabs documentation.

Switcher

Switcher can be considered as a Toggle element, too. The Switcher widget is the perfect asset for you if you need to display two different content blocks and show them under different circumstances. It’s quite practical to use, and it helps you show your site content in a creative way.

Now, there are two items that you can assign your section templates to and set the switch items effect as well.

Check this page out for more information about the Switcher element.

Tabs

And finally, the Tabs! It’s a very useful element, indeed. Tabs is a powerful element that allows you to add your section templates to each tab section. It’s customizable and very easy to use.

First, define your tab contents as a section template in Elementor Templates.

After adding your sections and content, you can assign them into your Tabs element.

Also, in case you would like to add simple text as your tab content, you can change the “content-type” drop-down field to “Editor”.

Feel free to play with the style and design options to get your awesome tab to work exactly the way you imagined.

Now that you and Jet Tabs introduced to each other, it’s time to install it for free on your website, so you can take advantage of the best way to organize content with Jupiter X.

Just follow up these steps:

  1. From WordPress left menu, go to Jupiter X.
  2. From the control panel left menu, go to Plugins.
  3. Next to JetTabs, click on Activate button.
  4. A new pop-up window will appear. click on the Continue button.
  5. After a couple of seconds, a new pop-up window will appear. Click on OK button.
  6. JetTabs plugin is now installed and activated on your website. It will be displayed above in the Active Plugins section.

In case you’re concerned about the compatibility of this plugin with your website features, you should know that:

JetTabs is Multilingual-ready.

Like any other Elementor plugins, you can freely use it on your multi-language website.

Easy-to-use, No Coding Skills Needed.

You can personalize everything without adding any codes. It’s fully customizable.

Compatible with RTL websites

It’s optimized for right-to-left websites.

Responsive layout

You can create vertical and horizontal layouts without having to worry about responsive challenges.

You can also check out our official bundled plugin overview page to access the plugin author website and community, in case you experience any issues with it.

Watch this video to learn how you can easily organize your content using Jupiter X and JetTabs:

Meet JetWooBuilder! The Ultimate Tool to Create Unique Product Page Templates With Jupiter X

JetWooBuilder is a great new feature in Jupiter X that allows you to create WooCommerce Single Product page templates and WooCommerce Product Archive templates with Elementor live page builder’s multiple dynamic content widgets.

You can create unique product page templates with Jupiter X using lots of special widgets and assign it to any product you need. JetWooBuilder is very simple to use. Anyone, from beginners to expert developers, can create attractive and professional-looking WooCommerce Single Product pages without ever touching a single line of code.

Like many other amazing features in Jupiter X, JetWooBuilder is a plugin that can easily be activated through Jupiter X plugin manager.

Customizability

With JetWooBuilder, you can create any layout and design using Elementor page builder and assign it to a product or create an archive template for Shop in your website. So, the options are limitless.

JetWooBuilder Overview – 

Check out samples here.

Powerful Global Widgets For WooCommerce Online Store

Some global widgets in JetWooBuilder can be used for showcasing products and their taxonomies on a custom page.

This widget displays the WooCommerce Product Categories in a Grid layout on the pages built with Elementor.

With this widget, you’ll display the products in a beautiful grid layout. Note that products should be created with featured images, descriptions, and prices in place, so you can set up the widget in the most fitting form.

Using this widget, you’ll showcase the WooCommerce products into stylish list layouts.

This widget allows you to display the taxonomy categories or tags for the WooCommerce products in the form of attractive tile layouts.

Creating a Single Product Page Template

With JetWooBuilder you can create a new or use a pre-designed single product template using dynamic WooCommerce widgets and set it for WooCommerce products.

The layouts that can be used are:

Left-side Product Image 1

Left-side Product Image 2

Right-side Product Image

Centered Product Image

The JetWooBuilder documentation will give you more information on how to create unique product page templates with Jupiter X.

Creating Product Archive Template

Another great feature is creating the Product Archive template to use for the Shop page or any other product layouts displaying related products, cross-sells or products in the shortcode.

Using special, easy-to-use WooCommerce widgets, you can build such archive layouts:

Products Grid with Left Sidebar

Products List with Left Sidebar 1

Products List with Left Sidebar 2

Products List with Right Sidebar

Find more details about creating archive templates in the JetWooBuilder documentation.

Other Features

There are numerous options you’ll discover once you start experimenting with this amazing Shop builder. Aside from that, you can create Categories Loop template, set advanced appearance settings of the widgets, define widget margins and padding, use entrance animation, change the background for the whole widget, and so much more.

When users search for a specific product, you can use the Archive template to show the relevant items they’re looking for. The Archive template will also allow you to display items using shortcode, or with Upsells or Cross-sells widgets in Elementor-built single product templates.

How to Create Unique Product Page Templates With Jupiter X

Watch this video to learn how you can easily create templates for your online store using Jupiter X and JetWooBuilder: