Blog

Upon installation, WooCommerce creates a few pages such as Shop, Cart, Checkout, etc.

Since the default WooCommerce pages have a fixed layout, there is no way to edit these pages using Elementor, so it’s necessary to create a new page following the instructions below.

Everything works fine until the moment you want to make some changes to these pages and realize there is no option to do it or available settings in the Customizer or WooCommerce Blocks are limited for your needs.

WooCommerce Customization Options in the Customizer

Create your Shop page using Elementor and Elementor Addons by WPZOOM

Using Elementor and our free Elementor Addons plugin you can easily create a Shop page with WooCommerce products and customize it as you want.

Start by creating a new page, assign a dedicated page template, then click on the blue button Edit with Elementor:

Assuming that the Elementor Addons by WPZOOM plugin is installed, you will see a widget called Woo Products in the WPZOOM category:

After adding the widget to the page, you can adjust its settings as you want: you can choose the number of products shown per page, customize details like the button, etc.:

Now that you have managed to display your WooCommerce products using Elementor, you can build any type of Shop page you want.

For example, you can organize your products in separate categories:

The Play icon in a slide from the homepage slideshow is added by the Video Lightbox feature.

To remove it or replace the existing video, simply click on the [Edit this slide] link and you will be taken on the editing page of that slide:

Find the Video Lightbox tab below the editor and leave empty both fields in this area: Self-hosted video and YouTube / Vimeo.

Make sure to click on the blue button to save/update your changes.

You can repeat the same steps for other slides from the slideshow.

Note: For a more comprehensive article on this topic, check out our guide on  How to Increase the PageSpeed Score .

WP Rocket – One plugin to rule them all

To make your Inspiro site fly, we recommend adding the WP Rocket plugin. This concatenates your CSS and Javascript files resulting in fewer files to load and at a reduced size. It also enables WordPress Cache, which is a process to reduce the number of requests to your website’s database. This makes your website significantly faster by serving static versions of your content and pages to visitors.

So head over to wp-rocket.me and download this useful plugin.

Caching will be automatically enabled once the plugin is activated:

The CSS and JS optimization can be enabled in the File Optimization tab:

Jetpack settings

If you install the Jetpack plugin you can also serve images from a global CDN which will help them load faster. Turning on Lazy Loading also prevents the images from being loaded on the page unless they are within the viewport – further improving loading times.

Elementor font settings

Navigate to Elementor > Settings and make a couple of additional tweaks if you have not done so already. That should remove Roboto and Roboto Slab from being loaded unnecessarily and provide a speed boost.

After purchasing and installing the Inspiro theme, you will receive a license key which can be found on the Licenses page.

Copy the License Key, then add it to the WPZOOM > Theme License + Quick Start > License tab.

Unlike older versions of the Inspiro theme, we decided in version 7.0 to switch from Beaver Builder to Elementor as our preferred page builder. This decision was mainly influenced by the huge popularity gained recently by Elementor.

Specifically for this theme and future ones, we’ve also developed a new plugin called Elementor Addons by WPZOOM. The plugin includes several custom widgets and many templates to extend the free version of the Elementor. Some of the widgets like Pricing Table or Directors are unique and work great with any theme.

Everything you see in the demo of the Inspiro PRO theme is achievable using the free version of Elementor and our free plugin called Elementor Addons by WPZOOM

Inspiro doesn’t require Elementor PRO, but we highly recommend purchasing it. The price starts from $49 and you receive a lot of features.

Loading Elementor Templates

If you haven’t loaded the demo content of the theme and want to start building your website from scratch, one of the starting points would be importing a layout.

Click on the blue W icon (WPZOOM Library) in Elementor to load one of the pre-built Inspiro templates.

Choose one of the pre-built templates and click on Insert Template.

Use the Right Page Templates

Choosing the right Page Template for pages that you’re building using Elementor is very important. Make sure to choose a page template that’s created specifically for a Page Builder:

– Page Builder (Without Page Title)
– Page Builder (Transparent Header, Without Title)

The page template can be changed both when editing the page or when using the Elementor editor. Click on the “Settings” icon from the left-bottom corner, then look for “Page Layout” option:

If you’re new to the Elementor page builder, this Getting Started guide could be of help.

If you haven’t used Elementor before, we recommend you to start here.