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

What we need to setup our flower online shop

Install WordPress

Most of web hosting, they provides the easy way to install WordPress via admin panel. Below is an example of InterServer web hosting.

cpanel install wp
Install WordPress from Softaculous at cPanel
install button
On Softaculous, click on Install button
setup install wp
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 Woocommerce plugin, we can turn WordPress to 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
Woocommerce - Setup Wizard

Once you skip the setup wizard, it will redirect to Woocommerce home at the backend.

skip setup wizard
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.

woo creates 4 pages
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.

woo pages
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 woo 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.

shop site
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

change homepage setting
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
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 product woo
Add new products to our shop
add product 1
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
Duplicate products as much as you want

Default templates from Hello theme

We will look at the default templates from 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 (youdomain.com/shop/). You should see something like below. This is our shop page using Hello theme.

default shop page 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.

single prod hello theme
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.

add to cart hello theme
Click on View cart button for viewing the cart page

Below is the Cart page from Hello theme.

cart page 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 hello theme
Checkout page from Hello theme

Create new shop page

Create new template by Theme builder

Navigate to Templates>Add New

The 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
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
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
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
Choose Simply Nature templates

Then we choose a home template and click on Import Templates button.

choose home
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 to page
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(yourdomain.com), you should see the shop page shows up as your frontpage of your site now.

choose home
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 title product lists on shop
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.

featured prod settings
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.

feature products
Add featured products to your shop page

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.

setup_shop_with_products
Shop page after adding some widgets

Summary

In Part 1, we setup theme and necessary plugins. With help of Starter templates and Elementor Pro plugins, we have the structure of our online shop 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.