How to set up Flower shop with Elementor Pro – Part 1 | Freelance WordPress and PHP Developer

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

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

CMS: WordPress
WordPress theme: Hello theme
WordPress plugins: Elementor, Elementor Pro, Woocommerce, Starter Template s, Yoast Duplicate Posts

Install WordPress

Most web hosting provides an easy way to install WordPress via the admin panel. Below is an example of Inter S erver web hosting.

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.

Once you skip the setup wizard, it will redirect to 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.

Another places you can check what required pages are needed from Woocommerce. Simply navigate to WooCommerce>Status>WooCommerce pages section.

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.

For Visit Site link, it is a frontpage or home page of your site. You can change the settings at Settings>Reading

For Visit Store link, it is a shop page of your site. You can change the settings at Woocommerce>Products.

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.

Enter product name
Enter product description
Choose simple product for Product data
Enter regular price at General tab
Enable manage stock at product level and Enter Stock quantity at Inventory tab
Add new Product category as Bouquet Cate 1
Add new Product tag as roses
Add Product image
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.

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 (youdomain.com/shop/). You should see something like below. This is our shop page using Hello theme.

Visit a single product page

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

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.

Visit Checkout page

Click on Proceed to checkout button, you will see the checkout page below.

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.

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.

I choose Simply Nature templates. Click on it then you will see all templates under Simply Nature templates.

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

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

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.

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.

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.

setup_shop_with_products — Shop page after adding some widgets

Summary

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

Support with Card

Support with PayPal

Your support helps keep this blog running! Secure payments via Paypal and Stripe.