Build an WooCommerce Custom Product Page using Elementor plugin

Do you want to build an WooCommerce custom product page using Elementor on your own? In that case, this blog is for you.

Nowadays, WooCommerce is a fast-spreading wildfire in the internet world. Not long after 4G internet was first introduced, people rapidly converted their stores into online stores. For you to easily and successfully create your store, I will show you how in this tutorial.

Setting Up An WooCommerce Custom Product Page

In this tutorial, I’m focusing on creating the custom product page. I’m not mentioning the installation procedure of buying a domain, setting up WordPress, and Elementor. However, you can easily learn these from this blog.

Things you need first before proceeding:

A Domain
WordPress
Elementor Plugin
WooCommerce Plugin

Once you setup the plugins and signup for it, let’s begin the main tutorial on the WooCommerce custom product page. Note that, I’m using Rooten theme for this tutorial. However, you can use any themes for your page. But I’m using it because it’s fast and lightweight.

Also, I’m using Element Pack Pro combining with Elementors own widgets. Element Pack has a lot of amazing widgets and its easy to use.

Setting Up An WooCommerce Custom Product Page

In your dashboard, click on Seiten, then click on Neu hinzufügen to create a new page. Like the image shown above, give your page a title.

For the page layout, select Blank Page von Vorlage. You can get this option from the Page Attributes menu on the right side. Once you are done, hit the veröffentlichen. button. Now, let’s move onto the next part for creating your WooCommerce custom product page.

Crafting the Landing Page

The landing page is what you see as the first page of a website. It has most of the information you need to show your visitors. Today, we are going to create this landing page for your store.

The landing page has many sections. To make an attractive landing page, each section is necessary. Let me show you how to make WooCommerce custom product landing page.

Hero Section of Your Custom Product Page

Well, first things first. Let’s start with the hero section. I think the image above has already picked your interest. However, creating this thing is easy. Just follow the steps.

Forging the Header

Schritt 1:

First, on the blank page, make a 3 section window.

Schritt 2:

Ziehen Sie per Drag & Drop die Scroll-Navigation Widget von Element Pack into the middle section. The widgets will make your header menu.

Schritt 3:

However, Name your menu bar as you like. The widget has a wide customization menu. You can change its appearance easily from here.

Schritt 4:

The section width distribution can be edited from the layout option. However, for the header area, I’ve selected a good width distribution.

Schritt 5:

Inserting Innere Sektion on the right corner beside the navigation menu.

Schritt 6:

Dragging and dropping WooCommerce mini-cart by Element Pack on the left inner section.

Schritt 7:

And, Suche widget on the right inner section.

Schritt 8:

Also, adding Bild widget on the left corner of the header area.

Schritt 9:

With that, the header area is now completed. It is a little tricky to create this header area for your WooCommerce custom product page. But once you get it, you can make a unique header for yourself.

Completing The Hero Section