Flower shop is a good example for starting a online shop. Clients can choose flower, ribbon and more options to build their own bouquet. For shipping, clients can choose to pick their flower bouquet by themselves or ask the shop delivers the flower bouquet to the destination for them.
Today, we will setup the flower online shop using Elementor Pro. Let’s get started!
What we need to setup our flower online shop
Install Hello theme and plugins
Install Hello theme and Elementor plugin
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
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.
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
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.
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 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.
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
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.
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.