What's New in Elementor Pro 3.6- Page Transition, Woocommerce Notices, Purchase Summary Widget and more

What’s New in Elementor Pro 3.6- Page Transition, Woocommerce Notices, Purchase Summary Widget and more

Elementor has released an update for the Pro version of the plugin and in this article we are going to discuss what’s new in Elementor Pro 3.6.

This version of the premium Elementor plugin introduces new features and widgets that will let you highlight your brand across the site.

And on top of this, it will improve the overall shopping experience.

Keeping this in mind, it is important to know that Elementor Pro 3.6 update is for the premium version of the plugin.

And this means if you are using Elementor Pro then only you will get access to these new features and improvements.

In case you are not using Elementor Pro and want to give it a try then you can do that by clicking the link below

What’s new in Elementor Pro 3.6 update- New widgets and features

Elementor Pro 3.6 was released on 31st Jan 2022 and it comes with features like

  • Page Transition
  • Woocommerce Purchase Summary Widget
  • Woocommerce Notices widget
  • New Layout options for Add to Cart
  • Performance improvements

And more.

Below are all the the topics we have covered in this article on Elementor Pro 3.6 and you can navigate to the section of your choice by clicking the links below.

Page Transition Experiment in Elementor Pro 3.6

While browsing the internet you must have come across sites that display a loading animation or brand assets such as a logo when navigating from one page to another. or when displaying output.

This feature is known as page transition and it helps boost brand recognition.

Before the Elementor Pro 3.6 update, there was no option available in the plugin that allowed you to add this feature.

And as a result of this you had to rely on third party plugins.

Now this has changes in Elementor Pro 3.6 update and a new Page Transitions experiment has been introduced which will allow you to add this feature.

Page transition experiment in Elementor Pro 3.6 update
Page transition experiment in Elementor Pro 3.6 update

Before we move forward, it is important to know that Page Transitions is currently under on going experiment. However is active by default.

Here we will recommend you test this feature first on a staging site before implementing it on a LIVE site.

Keeping this in mind, you will find the Page Transitions option in the Elementor Site Settings.

And to navigate to it, the first step is to visit the Elementor editor and then click the burger icon on top left.

Burger icon in Elementor side panel
Burger icon in Elementor side panel

On doing so it will show you the Elementor Site Settings option.

Elementor Site Settings option
Elementor Site Settings option

Here you will have to click Site Settings and it will show you all the settings included.

The next step is to scroll down to the bottom until you find Page Transitions option.

Page Transition in Elementor Pro 3.6
Page Transition in Elementor Pro 3.6

And clicking it will show you all the associated settings.

Page Transitions settings in Elementor Pro 3.6
Page Transitions settings in Elementor Pro 3.6

Now here the first set if settings that you will come across is Background and Entrance animation.

Background and Animation settings in Page Transitions in Elementor Pro 3.6
Background and Animation settings in Page Transitions in Elementor Pro 3.6

Using the background you can set the color or the page behind the animation and you get to choose from 2 options

  • Classic
  • Gradient
Background color settings  in Page Transitions in Elementor Pro 3.6
Background color settings in Page Transitions in Elementor Pro 3.6

Classic is selected by default and it will allow you to choose a single color for the background.

On the other hand, selecting gradient will show you additional options to choose colors.

Here you can pick one depending on your requirements.

After the background option in Page Transitions, the next setting that you will come across is the Entrance Animation.

And using it you can set the Entrance Animation for the page transition.

Entrance animation in Page transitions in Elementor Pro 3.6
Entrance animation in Page transitions in Elementor Pro 3.6

As you can see this is basically a dropdown and here you can select an option as per your design needs.

On selecting an animation from this dropdown, it will show you additional settings to choose Exit Animation and Animation Speed.

Additional animation settings in page transitions in Elementor Pro 3.6
Additional animation settings in page transitions in Elementor Pro 3.6

These options are followed up by a Preview Page Transition button , clicking which will show you the page transition.

Preview Page Transition in Elementor Pro 3.6
Preview Page Transition in Elementor Pro 3.6

Moving on,

In case you are looking to add animations, brand assets or an image to the Page Transition then you need to click the Preload tab.

And it will show you a Type dropdown followed by a Preview Page Transition button.

Preloader tab in Elementor Pro 3.6 page transitions
Preloader tab in Elementor Pro 3.6 page transitions

Here you need to click the Type dropdown and you will get the option to add

  • Animation
  • Icon
  • Image
Type drop down in Elementor Pro 3.6 page transitions
Type drop down in Elementor Pro 3.6 page transitions

On selecting any of these options it will show you related settings and after configuring you can preview the page transition..

Once you are done, click Update to save the changes.

New Woocommerce Purchase Summary widget

When it comes to running a successful online store, building trust with the users go a long way.

Often the reputation of an online store is associated with the quality of the product it sells and after service.

However, being transparent at step plays an important role as well.

Keeping this in mind, Elementor has introduced a new Purchase Summary widget using which you can create a purchase summary page for Woocommerce store.

This page will be shown to the user right after they checkout and will contain summary of their order.

It is important to know that you will find the Woocommerce purchase summary widget in the Elementor side panel under the Woocommerce section.

New Woocommerce purchase summary widget in Elementor Pro 3.6
New Woocommerce purchase summary widget in Elementor Pro 3.6

When you add this widget to a page, it will automatically fetch all the necessary information and you will get a ready to publish page.

Demo order summary page in Elementor Pro 3.6
Demo order summary page in Elementor Pro 3.6

If you have been following Blogging Unplugged and have read our article on Elementor Pro 3.5 then you must be familiar with the fact that the new order summary widget works in a similar way to the Woocommerce widgets released in that update.

And this means the widget automatically creates the barebones of the page and all you have to do is customize / design it to make it look your own.

Keeping this in mind, it is important to know that the order summary page that you see above is missing some information such as Billing and Shipping address.

And the reason behind that is we haven’t provided that information while creating this dummy order.

Moving on,

The new Woocommerce purchase summary widget let you customize every aspect of the page and you will be able to change the labels and headings using options in the Content tab.

Content Tab in purchase summary widget in Elementor Pro 3.6
Content Tab in purchase summary widget in Elementor Pro 3.6

To customize / make this page fit your design / branding, you need to head over to the Style tab where you will find all the related settings.

Style Settings for new purchase summary widget in Elementor Pro 3.6
Style Settings for new purchase summary widget in Elementor Pro 3.6

Apart from this, a new purchase summary option has been introduced in Woocommerce shop pages configuration in Elementor Pro 3.6.

Purchase Summary option in Woocommerce page setup in Elementor Pro 3.6
Purchase Summary option in Woocommerce page setup in Elementor Pro 3.6

And using this option you will be able to select and set a Purchase Summary page for your Woocommerce store in just a few clicks.

It is important to know here that the default Woocommerce page setup does not give you the option to add a Purchase Summary page.

And this means you will get this option in Elementor only.

New Woocommerce Notices widget in Elementor Pro 3.6

Online shopping is a part of our life now and when buying products you must have noticed that on taking any action you get a very subtle notification.

For example, when you add or remove a product from the cart it lets you know that you have taken an action.

These notifications play an important role in keeping the users informed and thus improving the user experience by providing feedback.

Before Elementor Pro 3.6, there was no easy way available to customize these notifications and in this update a new Woocommerce widget has been introduced that will give you complete control over where these notifications are displayed on a page and its styling.

Keeping this in mind, you will find the new Woocommerce Notices widget under Woocommerce section in the Elementor side panel.

New Woocommerce Notices widget in Elementor Pro 3.6
New Woocommerce Notices widget in Elementor Pro 3.6

When you will add this widget to a page, it will over-ride the default Woocommerce notifications that appear in the header area.

Default Woocommerce Notifications
Default Woocommerce Notifications

On adding this widget to a page, you will see a message like the screenshot below.

Add new Woocommerce notices widget on a page in Elementor Pro 3.6
Add new Woocommerce notices widget on a page in Elementor Pro 3.6

Now to customize the notifications you will have to click the Woocommerce Settings link and it will take you to the Woocommerce Shop pages option in the Site Settings.

New Woocommerce Notices customization options in Elementor Pro 3.6 site settings
New Woocommerce Notices customization options in Elementor Pro 3.6 site settings

Here you are required to select a Notice type by clicking the (+) icon.

There are 3 types of notices in Woocommerce and here you get the option to select one or more to customize.

  • Error
  • Messages
  • Information
Select a Woocommerce notice type in Elementor Pro 3.6 update
Select a Woocommerce notice type in Elementor Pro 3.6 update

On selecting a notice type(s), it will show you a new tab with the notice name containing all the customization options.

Customization options for Woocommerce Notices in Elementor Pro 3.6
Customization options for Woocommerce Notices in Elementor Pro 3.6

As you can see you get the option to change color, typography, background color and more.

Once you are done making changes, click Update.

And you Woocommerce notices are now fully customized.

Custom Woocommerce Notices in Elementor Pro 3.6
Custom Woocommerce Notices in Elementor Pro 3.6

Before making these changes, the Woocommerce notices were appearing on the top in the header area.

And now these are at the very bottom.

New layout option in Add to Cart widget

If you have been using Elementor to create Woocommerce site then you must be familiar with the Add to Cart or Custom Add to Cart widget.

In case you are not then let me tell you, it lets you add an add to cart button which is dynamically connected to a product.

In Elementor Pro 3.6 update, the custom Add to Cart widget has received an improvement where a new layout option has been introduced using which you will be able to select a layout as per your needs.

New layout options in custom add to cart widget in Elementor Pro 3.6
New layout options in custom add to cart widget in Elementor Pro 3.6

This layout setting gives you 3 options to choose from

  • Inline
  • Stacked
  • Auto
Layout options in custom Add to Cart widget in Elementor Pro 3.6
Layout options in custom Add to Cart widget in Elementor Pro 3.6

Depending on your requirements you can one.

Performance Improvements in Elementor Pro 3.6

In this version of the plugin, the Improved CSS loading experiment has been extended to include Woocommerce and theme builder widget.

According to Elementor, turning on this Experiment will reduce the CSS by 126kb.

Along with this elementor-section-wrap has been removed by adding it to DOM output experiment.

You can read more about it here.

This concludes everything included in the Elementor Pro 3.6 update. If you have liked what you have read and want to give Elementor Pro a try then you can do that by clicking the link below.

Get started with Elementor Pro 3.6

  • To get started with Elementor Pro 3.6, the first step is to visit Elementor and then click Choose your Plan or Pricing on the homepage.
Pricing tab on the Elementor homepage
Pricing tab on the Elementor homepage
  • Doing this will show you 2 options for your site creation. The first one is the Elementor Cloud Website and the second one is the Pro plugin. Here Cloud Website is selected by default and if you just want to get Elementor Pro then you need to select plugin.
Select Web creation path in Elementor
Select Web creation path in Elementor
Elementor Cloud Website pricing page
Elementor Cloud Website
  • If you are just looking to buy Elementor Pro then click Plugin and will show you all the Elementor Pro plans.
Elementor Pro Plans
Elementor Pro Plans
  • Here you need to select a plan based on your requirement and it will take you to the checkout page where you will have to create a free Elementor account and pay.
Create an account on Elementor and pay
Create an account on Elementor and pay

And that’s it, now you have the Elementor Pro plugin and the next step is to download and install it on your site.

What’s new in Elementor Pro 3.6 Update – Video

What’s New in Elementor Pro 3.6 Update- Page Transitions Experiment, Purchase Summary and Woocommerce Notices widget

Having said that,

I hope you will find this article helpful and now know all about the Elementor Pro 3.6 update.

In case you have any queries regarding this then feel free to get in touch.

To stay up to date with our content, we recommend subscribing to our YouTube channel and email list. Also, don’t forget to join our Facebook group.

6 Comments

  1. Lisa | Sassy Boss says:

    Thanks for this thorough overview, very informative.

  2. Such a great, informative post! Thank you so much for sharing these awesome updates. 🙂

  3. Saima sumar says:

    Love how detailed this article is. Ultimate guide for elementor pro 3.6

Leave a Reply

Your email address will not be published. Required fields are marked *