How to set up Flower shop with Elementor Pro - Part 1
Home » BLOG » WordPress » How to set up Flower shop with Elementor Pro – Part 1

How to set up Flower shop with Elementor Pro – Part 1

category:  WordPress
A flower shop is a good example of starting an online shop. Clients can choose flowers, ribbons, and more options to build their own bouquets. For shipping, clients can choose to pick up their flower bouquet by themselves or ask the shop to deliver the flower bouquet to the destination for them.Today, we will set up the flower online shop using Elementor Pro. Let’s get started!

What we need to setup our flower online shop

Install WordPress

Most web hosting provides an easy way to install WordPress via the admin panel. Below is an example of InterServer web hosting.
Install WordPress from Softaculous at cPanel
On Softaculous, click on Install button
Follow the instruction and install WP on your domain or subdomain

Install Hello theme and plugins

Install Hello theme and Elementor plugin

Once WP is installed, you will install Hello theme which is a free theme from Elementor. Then activate it. Once the theme is activated, it will ask you to install and activate the Elementor plugin (free version). Go ahead, install and activate the Elementor plugin (free version).

Install WooCommerce and Elementor Pro plugins

Next, we will install Woocommerce and Elementor pro plugins. With the WooCommerce plugin, we can turn WordPress into an online shop easily. Because we want to use Elementor for building the shop for us, we do need the Elementor pro plugin. If you don’t have the Elementor pro yet, please just read on and see how flexible Elementor pro gives you to control your shop from start to the end.

Install Starter Templates plugins

Finally, we install Starter Templates plugin. This plugin offers the starter templates with Elementor. It will make us start the shop faster.

Install Yoast Duplicate Post plugin

We install Yoast Duplicate Post plugin for duplicating the products for our demo. This plugin can clone any pages and posts as well.

Setup WooCommerce (Skip Wizard)

Once you activate Woocommerce, it will redirect to setup wizard. You can continue setup from the wizard or skip the setup. You can always come back to setup the store details anytime you want. I will skip the setup by clicking on Skip setup store details at the bottom of setup form.
Woocommerce – Setup Wizard
Once you skip the setup wizard, it will redirect to Woocommerce home at the backend.
Woocommerce Home at the backend

Default WooCommerce pages

Once Woocommerce is activated, you will see four new pages created by Woocommerce. Those pages are Cart, Checkout, My account and Shop.
Woocommerce creates four pages for you
Another places you can check what required pages are needed from Woocommerce. Simply navigate to WooCommerce>Status>WooCommerce pages section.
required WooCommerce pages
For some reasons, you don’t have all default WooCommerce pages. You can create them at WooCommerce>Status>Tools>Create default WooCommerce pages.
Create default WooCommerce pages if they are missing

Visit Site and Visit Store links

You will see two menus at the WP dashboard. One is Visit Site and anther one is Visit Store.
Store page and Frontpage
For Visit Site link, it is a frontpage or home page of your site. You can change the settings at Settings>Reading
Home page setting
For Visit Store link, it is a shop page of your site. You can change the settings at Woocommerce>Products.
Shop page setting

Add the products

Now, we are actually working on our shop. Before designing the shop, we will add some products, product categories and product tags. So our shop will have some content to show on the pages when we are building the pages.
Add new products to our shop
Add new product to online store
  1. Enter product name
  2. Enter product description
  3. Choose simple product for Product data
  4. Enter regular price at General tab
  5. Enable manage stock at product level and Enter Stock quantity at Inventory tab
  6. Add new Product category as Bouquet Cate 1
  7. Add new Product tag as roses
  8. Add Product image
  9. Click on “Publish” button to make the product item visible on publish.
Now, your new product is created. We will need more products in order to see how the product items alignment on the shop page and categories page.We will duplicate the product we created by navigate to Products>All Products>at your new product>select Duplicate. I create Bouquet Cate 1 and Bouquet Cate 2 for product categories. Also, I create Roses and Lily for product tags. Then I duplicate the products and add the products to each category. Each category has 4 products.The duplicate feature is created by Yoast Duplicate Post plugin.
Duplicate products as much as you want

Default templates from Hello theme

We will look at the default templates from the Hello theme for our store. Later on, we will change the look and feel with Elementor Pro and Starter Template plugin.

Visit Shop page

Visit Store link ( You should see something like below. This is our shop page using Hello theme.
Shop page from Hello theme

Visit a single product page

Click on a product from the shop page, you will see the single product page below.
A single product page from Hello theme

Visit Cart page

Next, click on “Add to cart” button on the single product page. Your product will be added to the cart. Click on “View cart” button to view the cart page.
Click on View cart button for viewing the cart page
Below is the Cart page from Hello theme.
Cart page from Hello theme

Visit Checkout page

Click on Proceed to checkout button, you will see the checkout page below.
Checkout page from Hello theme

Create new shop page

Create new template by Theme builder

Navigate to Templates>Add NewThe shop page is a placeholder for a post type archive for products. So that every theme may render the page differently. If you don’t know what post type archive is, don’t worry you still can continue with this tutorial.Learn more about Template Hierarchy for WordPress to understand post type archive template.
Create New Shop page using Theme builder from Elementor Pro
We don’t use the starter templates from Elementor library. Instead, we will use the starter templates from starter templates plugin. So you just close the Elementor library popup.
Elementor Library

Choose Stater templates for creating new shop page

We don’t use Elementor library because I like the templates from Starter templates plugin better.At Theme builder>New Shop page>Edit with Elementor, you will see the screenshot below. Click on Stater templates icon.
Using Starter Templates plugin
I choose Simply Nature templates. Click on it then you will see all templates under Simply Nature templates.
Choose Simply Nature templates
Then we choose a home template and click on Import Templates button.
Choose Home template
Now, in Elementor page editor, you will see the home template is imported to your page. Click on “Publish” button. Then you will have to choose “All Product Archives” as the condition. Because the shop page is a post type archive. Next, you will click on “Save & Close” button.
Add condition of the new template – Where do you want to display your template?
Congrats! your new shop page is created. This new template will be used for your shop page. You don’t need to change anything at the existing shop page which is located at Pages>All Pages>Shop.

Change shop page to be the frontpage

Now, we will set our shop page to be the frontpage. To do that, navigate to Settings>Reading>Your homepage displays>Choose A static page>Choose Shop as Homepage. Then hits “Save Changes” button.Visit your domain name(, you should see the shop page shows up as your frontpage of your site now.
Shop page as frontpage

Customize the shop page

Edit the template at Theme Builder

We go back to Theme Builder where we create our new shop template and edit the template by choosing “Edit with Elementor“.On the page editor, you will see the widgets for Product Archive and Woocommerce. You should try those widgets and see what the widgets can do.

Add widgets on the template

In our case, we try Archive Title and Archive Products widgets on our shop template. The result is below.
Add widgets on the shop template

Set the featured product

We want to show the featured products on our shop as well. So we go back to Products>All Products. And set the featured product by clicking on star icon. I set 3 featured products as showing below.
Set featured product at Products setting

Add featured products to our shop page

Go back to Theme builder>New shop page>Edit with Elementor. Then drag Products widget under WooCommerce to your shop page.At Query section, you select Featured as your source. This setting will filter your product data.
Add featured products to your shop page
Note: You should play around with the widgets and see what they look like. In this tutorial, I don’t cover every single widget from Elementor Pro. This tutorial aims to give you an idea of how to create an online shop using Elementor Pro.

Final result from Part 1

Here is my shop page after I add some widgets and remove some default widgets from the starter templates that we imported earlier.
Shop page after adding some widgets


In Part 1, we set up the theme and necessary plugins. With help of Starter templates and Elementor Pro plugins, we have the structure of our online shop in less than one hour.In Part 2, we will change the theme style. We will set the colors and fonts in one place using Elementor.Tutorial on how to set up a flower shop with Elementor Pro