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!
Most web hosting provides an easy way to install WordPress via the admin panel. Below is an example of InterServer web hosting.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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
Experienced WordPress and PHP developer living in Chiang Mai, Thailand. Many years of experience in all aspects of WordPress website creation, including design, plugins, and implementation. Ready to assist your business growth. Let's talk! Email: AppleRinquest@gmail.com