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.
In your dashboard, click on Pages, then click on Add New to create a new page. Like the image shown above, give your page a title.
For the page layout, select Blank Page from Template. You can get this option from the Page Attributes menu on the right side. Once you are done, hit the Publish 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
Step-1:
First, on the blank page, make a 3 section window.
Step-2:
Drag and drop the Scroll Navigation widget from Element Pack into the middle section. The widgets will make your header menu.
Step-3:
However, Name your menu bar as you like. The widget has a wide customization menu. You can change its appearance easily from here.
Step-4:
The section width distribution can be edited from the layout option. However, for the header area, I’ve selected a good width distribution.
Step-5:
Inserting Inner Section on the right corner beside the navigation menu.
Step-6:
Dragging and dropping WooCommerce mini-cart by Element Pack on the left inner section.
Step-7:
And, Search widget on the right inner section.
Step-8:
Also, adding Image widget on the left corner of the header area.
Step-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
Step-1:
It’s time to show your visitor the first batch of products. Add WooCommerce Slider under the header.
Step-2:
The slider widget is also developed by Element Pack. It brings out the charm of your product with its pixel-perfect smooth graphics. It is an essential tool for your WordPress custom product page. The widget has many uses as it has a customizable option provided by developers. You can change the slider’s dimension, animation speed, and type, minimum height, and colors. Once you are done with it, let’s see the complete hero section.
Have a good look at the finishing product. This complete hero section has a minimal but elegant design. Note that, you must create your hero banner according to your targeted audience. If the visitors aren’t caught with the first look, they won’t stay on the page. This is your first step to success on your WooCommerce custom product page.
Learn more about WordPress
Selim Rana
The BdThemes team builds WordPress plugins trusted by 3M+ users worldwide. We write about web accessibility, WCAG compliance, and inclusive design.