WooCommerce related products

How To Display WooCommerce Related Products With Elementor?

Want to boost your WooCommerce website conversions by helping your customers find the perfect product that best fits their needs? Learn how to display WooCommerce related products on each of your product pages and instantly increase customer satisfaction and sales with ease. 

WooCommerce related products

WooCommerce related products are additional recommendations that come along when your customers view a product or item on your store website. These related WooCommerce products are intended to help in the use of the original product and these both usually act as complementary to each other. 

So when you display related products on your website, it works as a marketing strategy that makes the store visitors stay a little longer, explore your website more and buy more products. 

In this blog, we will walk you through the many different ways you can effortlessly display WooCommerce related products using Elementor, one of the most popular and easy drag and drop page builder for WordPress. 

Does Displaying Related Products In eCommerce Stores Help Your Business? 

But before we get into the steps of displaying WooCommerce related products, let’s try to understand how showcasing these recommendations help your business. 

🎯 Of course, first off, your users will become interested in checking out other similar products in your store and hence will spend a greater amount of time exploring your website. Thus, skyrocketing engagement rates as well as SEO score. 

🎯 But not only that, your customers will become more prone to buying the related products that go along or compliment with the items they have already chosen to purchase. You may also introduce new or uncommon products to customers without breaking a sweat.  

🎯 You will be able to promote popular items or products on sale with ease – again, increasing conversion rates with ease.

This will instantly help to create a more efficient, and usually pleasant, shopping experience for users as they will not have to search for relevant items individually. And most importantly, the average order value of your WooCommerce store will increase exponentially. 

Types Of WooCommerce Related Products: Up-Sells & Cross-Products

So now, let’s talk about WooCommerce related products – what they are and how to set them on your WordPress website with just a few clicks. When it comes to setting related products on your website, you can choose among the following types: 

WooCommerce related products

✅ Cross-products: In the online retail business, cross-products usually mean a similar product or one that goes with the original product already bought. They are items that are useful in complementing the item that a shopper is contemplating buying. The goal is that your customer will buy the item that they were planning to buy originally as well as the cross-sell item(s), increasing your average order value.

For example, if your customer is planning to buy a notebook from your store, you can display all the other stationery items on your site to get your users to buy more. 

✅ Up-sell: Other the other hand, with up-sells you can recommend related products to your customer that he can purchase instead of the item that they are currently thinking of purchasing (usually one that’s more profitable for you). In other words, an up-sell is literally an upgraded product for the customer to buy. And so, similar to cross-products, up-sells also boost your average order value.

In an example of up-sells, we can say that if the customer is planning to purchase a notebook from your website, you can show them a deal where notebooks of higher quality come along with stationary as a package. That way, your customer can buy everything he needs at once.  

✅ Tags and categories: And finally we come to tags and categories – the simplest methods of displaying WooCommerce related products on your store website. The concept is to link all related products into specific categories by setting proper tags together.

Display WooCommerce Related Products Using Elementor Widgets

Now that we clearly understand what WooCommerce related products are, let’s dive right into the several methods of displaying them on your eCommerce website using Elementor.

🛍️ Boost eCommerce Store Sales Using Elementor’s Product-Related Widget

First off, Elementor PRO brings you a completely customizable Related Products widget for your eCommerce store. As the name suggests, this useful element gives you full flexibility to display all WooCommerce related products with just a few clicks. 

The first step to using this widget is to set up a Single Product page within your editor using Elementor PRO templates. To do so, from your WordPress website dashboard, head over to the Templates tab that comes along when you install and activate Elementor.

WooCommerce related products

When you click on the ‘Add New’ button on the top, a popup window will appear on your screen where you can set the type of template you want to use. Here, choose your template type to be ‘Single Page’ and give a custom name for it. And then, hit the ‘Create Template’ button.

Afterward, you will be redirected to your Elementor editor where you will find another popup window displaying all of Elementor’s available templates for a ‘Single Product’ page. Choose the page template that appeals to you the most and simply click ‘Insert’ to get started. 

WooCommerce related products

By default these ‘Single Product’ templates will come along with the ‘Related Products’ widget on your page. You can easily customize the widget’s content and style settings, and display the related products on your website with the slightest effort. 

You will also be able to move the ‘Related Products’ section as needed and add other Elementor widgets to or around it, to increase the page’s functionality even further. 

WooCommerce related products

Once you’re happy with the modifications, publish the web page. Instantly your single product page will go live for all your website users and customers to explore through and buy products from. And that’s it – it’s that simple. 

🛍️ Use Essential Addons’ Woo Product Gallery To Categorize Products 

Next up, we have an excellent widget from Essential Addons For Elementor – Woo Product Gallery, that will let you organize your products in separate categories. You will be able to display all related products in a gallery that will instantly find their desired products easily. 

The EA Woo Product Gallery enables you to show your WooCommerce related products in a beautiful layout making your website look more interactive and vibrant. 

Note: You must have the plugin Essential Addons installed and activated into your WooCommerce store website to use this amazing widget for Elementor.

Simply type ‘Woo Product Gallery’ under the ‘Elements’ tab on your editor and then drag and drop the widget into your web content.

WooCommerce related product

All you have to do then, is configure and customize the widget to your liking and to match your store aesthetics from the ‘Content’ and ‘Style’ tabs. 

So let’s begin with the ‘Content tab’ which gives you five sections to design or customize your WooCommerce product gallery. 

WooCommerce related product

You will be able to set up the layout of the product gallery from 4 different styles using the Woo Product Gallery. But most importantly, you can add sources for your products with different filtering options in the product gallery.

Here, you can set up as many categories as needed for all your products. This is where your products will get categorized into different sections which will help your users find related products or products under the same category with ease. 

WooCommerce related product

You will be able to add many more customizations using Elementor’s default features with just a few clicks. And when you are done, simply publish the page. 

Here’s an example of how your product gallery will increase your customer’s experience if you were the owner of an accessories store. Your customers will be able to simply click on the categories and see all the related products at once. 

WooCommerce related products

🛍️ Display All Related Products Using Woo Product Collections

Finally, as our last widget that helps to display WooCommerce related products to your customers, we have the Woo Product Collections, again from Essential Addons. This is another element that will help you organize your collection of related products using the given WooCommerce tags, categories, and attributes. 

Note: Again, you must have the plugin Essential Addons installed and activated into your WooCommerce store website.

Similar to how you use Elementor page builder to drag and drop all other elements onto your editor, you can also look for ‘Product Collections’ on the editor’s ‘Element’ search bar. 

Once you have set the widget in place, you can select the collection type from ‘Category’, ‘Tags’ and ‘Attributes’, as you need and your users will be redirected to specific pages.

Then simply select the category of your choice that you want to display and add a background image to highlight the focus of the category. Again, if we use the jewelry store as your WooCommerce store example, this is how the product collection will look. 

WooCommerce related product

You can then add many more customization to your categories as well as add more categories to your store. And once you publish your web page, the collections will be active for anyone to navigate through. When a user clicks on any of the collections, he will be redirected to the page as shown below for the ‘Pearl Collection’. 

WooCommerce related products

All other categories and tags will also be listed on the web collection page to increase your users’ effectiveness and efficiency further. 

Increase Sale Conversions With WooCommerce Using Elementor

And with that we have come to the end of our ultimate guide on how to display WooCommerce related products on your store website using Elementor editor and dedicated widgets for it. 

WooCommerce related products

As you can see, Elementor and Essential Addons make it very easy to create a stunning online store and display WooCommerce related products, and that too without any coding. Try it out for yourself, and let us know of your experience by commenting below. Also, feel free to reach out to our support team if you need any assistance.

For similar guides on WooCommerce store development, updates about the latest Elementor addons, web design tutorials, tips and tricks and more, subscribe to our blog or join our friendly Facebook community.

optimize website layout

Best Practices To Optimize Website Layout With Elementor

The last thing any web creator wants is a frustrated user leaving their website due to a cluttered layout that is difficult to navigate through. It is important to believe that most minor details in website design can significantly impact the bounce rates, conversion, and more. So, in this blog, we bring you the ultimate best practices to optimize website layouts using Elementor. Continue reading “Best Practices To Optimize Website Layout With Elementor”

Elementor Academy

Elementor Academy: Everything You Need To Know

Are you new to the world of Elementor and still figuring out how to create powerful websites using its features? Now, you have nothing to worry about. Because, the most popular WordPress drag and drop page builder Elementor, has introduced its official web page for all of its educational content – Elementor Academy

Elementor Academy

Elementor Academy: Official Home For All Educational Content

Whether you are starting off with your very first WordPress website or you are a pro developer in the business for years, getting all related resources in an organized place with tailor-made content is a blessing for anyone who wants to learn web building in detail. And to empower web creators worldwide, Elementor page builder brings you just that. 

Elementor Academy

Along with providing you with necessary widgets and elements for your website content, Elementor now brings you Elementor Academy – a web home for all educational content and learning materials, in all formats and types. 

🗓️ When Did Elementor Launch Its Academy?

Elementor had organized documentation and blogs to help users with detailed information about their products, from the very beginning. However, it launched an official academy with courses, video tutorials, webinar materials in a wider range of topics this 13th September’21

It has everything from short how-to video tutorials to full courses in various topics including web design, performance, marketing solutions, and more.

🚀 Who Can Benefit Most From Elementor Academy?

Built to bring you a thorough and comprehensive learning experience, the academy is categorized by topic and level of expertise to help both beginners and advanced learners, equally. 

Elementor Academy

Not just regarding the page builder itself and WordPress, the Academy brings you course and learning materials for other topics such as WooCommerce, marketing, SEO optimization, and much more. And so, anyone who wants to learn more on how to build and grow their WordPress websites will be immensely benefited from Elementor’s new academy. 

So, now let’s dive in, and find out how you can use Elementor Academy to expand your knowledge, improve your skills, and become better at web designing.

What To Expect In Elementor Academy: Courses, Guides & More

So you might be wondering what you will actually find at the Elementor Academy that’s different from regular knowledge bases. And to answer your question very simply, it has knowledgeable materials not only related to Elementor widgets but for WordPress, in general. 

Elementor Academy

Apart from that, you will find tutorials and guides in any format that you prefer: 

Elementor Courses

✅ Guides & Tutorials

✅ How-to Video Tutorials

✅ Webinars From Experts

💡 Learn The Basics Of WordPress Web Building Using Elementor

At the very beginning of Elementor Academy, you will come across a section completely dedicated to the basics of web building – whether it’s building a comprehensive website, just a landing page, or simply improving the SEO scores of your current website. The Academy’s Basic Elementor Courses contain everything you need to get started.

Elementor Academy

You can get the following Elementor courses for web creators: 

🎯 Getting Started With Elementor (Core)

🎯 Building A Portfolio Website (PRO)

🎯 Web Performance Optimization 

These fundamental Elementor courses come with video tutorials and are specially curated for different levels of Elementor users – beginners and for experts comfortable using Elementor PRO. Each course comes with an overview that lets the learners know what they will be gaining knowledge about, as well as prerequisites are required to take part in the course. 

And at the end of each course landing page, you will find tags for other Elementor courses related to the topic you have just taken. 

✅ Brush Up On Your Web Building Skills Following Guides By Topic

Elementor Academy

Following up on the tags, we have to mention Elementor Academy’s organized section on learning various different web-building skills topic-wise. You will see there are around 10 topics on Elementor and 5 on growing your business to the next level.

You can select educational content based on your interests and needs for your level of web building. Then, once you click on a topic, you will be redirected to the landing page that is solely dedicated to all courses, guides and tutorials, a wide video tutorial collection, and even more, including webinars and related widgets. 

Elementor Academy

And the best part? You will be able to filter out each type of material by clicking on the tabs listed top of the banner, as shown below, for better navigation 

🎓 Enroll In Courses & Learn From WordPress & Elementor Experts

Now let’s talk about the courses that Elementor Academy offers to its pupils – and there are more than just the few we mentioned earlier. In fact, as of now, there are 5 courses with dedicated video tutorials created by the very people who develop Elementor. 

If you are a long-time Elementor user or someone who is just learning the basics, you will be delighted to know that these dedicated teachers have developed certain working methodologies which can greatly benefit Elementor users.

Elementor Academy

Get Specialized Guides & Tutorials On Specific Web Building Topic

Next up we have guides and tutorials. The Elementor Academy provides hundreds of short, yet detailed and straightforward, video tutorials to help you out in any and every step of your web building process. 

From videos on tips and tricks to video tutorials about almost all of Elementor’s widgets and how to use them on your website listed under the guides and tutorial sector of the academy. Some of these tutorials also come with links to related blogs that can help you get a better idea of the topic you want to learn about. 

🎞️ Watch Over 100 Video Tutorials On Web Building From A To Z

Elementor Academy

By now you must have realized that the academy at Elementor comes with hundreds of videos on almost any and every topic. And truly, there are multiple Elementor video tutorials on each topic which you will be able to pick from. Just choose the topic that you want to learn about and start watching the videos. 

By the end of the long list of video tutorials, we believe you will have become a pro at web building on WordPress using Elementor, and have taken your business to newer heights of success. 

🎬 Attend Recorded Webinars By Experts To Understand In Depth

And finally, the Elementor Academy comes with recorded webinars where WordPress and Elementor experts discuss and talk about each aspect of website building. Unlike the video tutorials, these are made longer and in a way that two expert web creators discuss and share their knowledge with the world of learners. 

Elementor Academy

Become An Expert In Web Building With Elementor Academy

And with that, we came to the conclusion of our own guide for using Elementor Academy to become a great web creator for WordPress. But to give you some additional information, we would have to mention that the academy has a search bar that helps you navigate through the hundreds of guides and video tutorials available. 

We must also mention that you will be able to find a separate ‘Help Center’ from where you can easily access all of Elementor’s knowledge base and learn further when required.  

Elementor Academy

We hope this blog was helpful to understand what Elementor Academy brings to the table and how you can easily become a WordPress or Elementor expert by following all guides. Let us know of your experience by commenting below. 

If you want to learn web building with Elementor further, you can also check out our blog on the best Elementor tutorials you’ll find on the internet. The blog will help you find all the right resources and educational sources such as blogs, YouTube videos, and much more.  Or read how to use a custom font, size, color & style in Elementor page builder to become a PRO at customization. 

To find more useful blogs, tips and tricks, or the latest news and updates, subscribe to our blog. Or get in touch with us by joining our friendly Facebook community of web creators, like you. 

Elementor template

Best Elementor Templates from October + Black Friday Template [2023]

With the end of spooky October, we stepped into the month of the biggest sales of the year – November. It’s a time when store owners, marketers, and bloggers are busy getting their websites fully prepared to make massive sales and big revenue. And to help make your website building effortless, we are back with yet another list of 10+ ready and stunning Best Elementor templates from Templately

best Elementor template

This time, we are here to inform you of all the latest Elementor template packs that were released this October. Not only that, we will also be sharing our massive collection of exclusive website templates created just for the upcoming Black Friday & Cyber Monday to ensure you have a powerful website prepared for the biggest sale season of the year.

But before we dive into our list of the best Elementor templates released last month, check out this blog on scary good Halloween template packs from Templately, if you have not already. 

Table of Contents

Best Elementor Templates To Create Stunning Sites

This past month, the biggest Elementor templates library, Templately, brought to you 10 completely new template packs to help you instantly build websites with high conversion rates that will take your business to the heights of success. 

Elementor Template Pack

Engaging Website Templates For Personal Portfolios

Let’s start off with the must-have personal website templates. This October, Templately has introduced 3 exceptionally stunning Elementor templates to help you build powerful portfolios where you can effortlessly showcase all your skills and experiences and kickstart your own businesses or careers, and that too without any coding. 

Tony Forleo: A Powerful Portfolio Site For Rising Entrepreneurs

best elementor templates

First up, we have Tony Forleo, a highly professional-looking personal website for rising entrepreneurs who want to make heads turn and catch clients’ eyes with ease. With already more than 2K downloads this Elementor template pack is the most popular of the month. 

Designed and developed for business owners, entrepreneurs, and freelancers, you can use this starter Elementor template pack to create any section of your WordPress website with just a few clicks and no codes. 

You’ll be able to instantly grab attention from website visitors with a stunning new Home Page template with dynamic designs. And then you can easily keep them engaged and interested with 6 more fully responsive and functional landing pages where you can detail out your business objectives, services, latest news, and more.

SleekResume: A Unique Website Template To Display Your Resume

best Elementor template

Next up, we have the highly-rated SleekResume – another Elementor template for personal websites. In striking contrast to the previous template pack, this premium pack comes with more bold colors and designs to help you set the tone. 

It’s a perfect template pack, with 5 ready and customizable landing pages, to help anyone kickstart their careers and attract recruiters with ease by creating strong resumes, portfolios, and CVs. 

Wattson Sparks: A Personal Website Template Just For Electricians  

Best Elementor template

And finally, on our list of personal website templates, we have Wattson Sparks – a completely free portfolio Elementor template created just for Electricians and any mechanics who can provide electrical solutions. 

With a soothing color palette and simple designs, this template pack is built to help you highlight your talent, showcase projects you have worked on, and offer your expertise and services.

Responsive Templates For Successful Business Sites 

Now let’s step into the best Elementor template by Templately released in October to help you create modern and stylish websites and take your stores and companies to the next level. Regardless of what your business type may be, we have you covered with 3 different and equally beautiful template packs that you can use separately or mix and match sections from to build a successful business website.

Shake A Leg: A Dynamic Template Pack For Your Dance Studio

best Elementor template

Let’s start this section with a fun and color Elementor template from Templately with dynamic designs, perfect to get your dance studio website started – Shake A Leg. It’s a single landing page template with bright colors, interactive call-to-action buttons, and engaging testimonial sections to build credibility – everything you need to get your dance studio or blog going among dancers and learners. 

Best Elementor Templates from October + Black Friday Template [2023] 1

EleCeramics: Elegant Elementor Templates For Online Ceramic Stores 

best Elementor template

Taking a completely different route, we have EleCeramics – an elegant and aesthetic template pack created for Ceramic store sites, online pottery shops, and home decor websites.

With a total of 7 landing pages and 2 blocks, this Elementor template includes two dedicated Shop and Gallery Pages just to grab your customer’s attention and display timeless pieces of clay, China or Ceramic art, pottery, and decors with ease. You get, and exclusive testimonial sections to add social proof and credibility to your website with ease. 

Herbs N Spice: Perfect Template To Create A Best Selling Spice Shop 

best Elementor template

And next, we have an Elementor template pack that can help you set up the best-selling grocery store website dedicated to selling spices and organic ingredients. The template’s named Herbs N Spice, and with its soothing colors, it is perfectly suitable to create an online spice shop that puts the focus on your products. 

Create Websites With Diverse Elementor Templates

And like always, Templately understands the need to provide creative Elementor templates to help you create diverse websites of any type to help you on all your new ventures. And so this October, we have added the following: 

AppMart: A Responsive Landing Page For Your App Websites

best Elementor template

And next, we have a fully customizable and responsive Elementor template pack that is ready to help you create a stunning app landing page. If your software company has developed an application that you want to build a website for, AppMart is the one for you. 

Featuring a very soothing color palette, this aesthetically pleasing app landing page template pack comes with 5 fully customizable, attractive templates which you can implement on your website. And the best part is that, while your application is full of high-performing codes, Templately templates require no extra coding at all. 

GameInfo: A News Portal Elementor Site For Sports & Gaming

best Elementor template

Sports fans out there know that the Cricket T20 World Cup competition is going on this time of the year, with viewers and supporters trying to keep up with the latest news from around the world. So now would be the perfect time to create a buzzing sports news portal online that gives buzzing new updates. 

And to help you do exactly that, Templately brings you its informative and attractive template pack, GameInfo. It comes along with 6 landing pages that are best suited to highlight sports news, gaming information, sports coverage, and video lights. 

WebIndex: A Webinar Template Pack To Grab High Reach

best Elementor template

And to end the list of best Elementor templates released this October, we have WebIndex – a stunning pack with striking colors, dynamic designs, responsive call-to-action buttons, and much more. 

If you’re planning to host an online seminar (or webinar as most say these days), or event, this template will be most suitable for you as you will be able to list event timelines with dates and months, add your team members, speakers, and more. 

And with that, we conclude the list of the 10 best Elementor templates brought to you from Templately this October. But we cannot leave without showing you all the stunning templates we have specially built to help you create a Black Friday Sales website that will not fail. To learn more, keep on reading. 

Bonus: 8+ Highly-Rated Black Friday & Cyber Monday Elementor Templates 

best Elementor template

To generate more revenue and earn the maximum profit, this holiday sale season you need an interactive and high converting website landing page. But not to worry because Templately brings you several ready Elementor Black Friday & Cyber Monday templates to help you skyrocket sales this holiday season with a fully functioning website guaranteed not to break.

To list a few, some of the most popular and highly rated templates for Black Friday and Cyber Monday are: 

🎯 BFriday                 🎯 BlackNov         🎯FlashFriday

🎯 Black Esale          🎯 EleCyber           🎯CyberSell

🎯 CrunchDeal         🎯 Cyber Dealz     🎯 CyberCred

Take A Look At Some Stunning Deals Templates Here

But these are just some of the best Elementor template packs from Templately to help you kickstart any type of WordPress website in just a few clicks; we are constantly trying to add more, so stay tuned!

If you try out any of the templates listed here or from our massive library in Templately, and let us know of your experience in the comments below. Don’t forget to subscribe to our blog or join our Facebook community.

  • 00Days
  • 00Hours
  • 00Mins
  • 00Secs

Wait... before you go!

Checkout now to Save