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.

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.

On doing so it will show you the 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.

And clicking it will show you all the associated settings.

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

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

• Classic
• Gradient

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.

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.

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

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.

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

• Animation
• Icon
• Image

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.

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.

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.

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.

Apart from this, a new purchase summary option has been introduced in Woocommerce shop pages configuration 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.

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

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

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.

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

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

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.

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.

This layout setting gives you 3 options to choose from

• Inline
• Stacked
• Auto

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.

• 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.

• In case you are about to start your very own WordPress blog or website and looking for a reliable web hosting solution that includes all the essential features then you can opt for Elementor Cloud (includes Elementor Pro) and for that you need to scroll a little and click Buy Now

• If you are just looking to buy Elementor Pro then click Plugin and will show you all the 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.

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

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.