In this tutorial I’ll show you how to build a free online cosmetics store using WordPress and WooCommerce. We will be using Astra’s Starter Templates, Elementor Page Builder and customizer to create and edit this webshop.
Siteground will be used to register a domain name and web hosting. Via this provider we will install the SSL certificate and Email account. After the installation, I’ll guide you through the basic settings in WordPress, and show you how to create products.
Furthermore, I’ll go through the WooCommerce settings, and show you how to configure taxes, shipping, payment gateways and how to manage and process orders. Therefore, we use additional plugins like WooCommerce services and WooCommerce PDF Invoices & Packing slips.
Down below you can find an overview of this video and links to valuable external sources. If you want to skip parts of this video, then go to the timestamps. If this eCommerce tutorial for beginners was helpful to you? Like this video and subscribe for future content.
Overview
1): Register domain name and web hosting at Siteground
2): Install WordPress, SSL certificate and Email Account
3): Overview and change basic settings in WordPress
4): Install Astra’s Cosmetics Store theme and aligned plugins
5): Change website with customizer and elementor page builder
6): Create product page and cover upsells and cross-sells
7): Configure WooCommerce settings, taxes and shipping
8): Create a payment provider account & install payment gateways
9): Perform a test order / manage and process orders
External links
(55% discount)
Country & State abbreviations
Timestamps:
00:00:00 Introduction
00:00:07 Sneak preview
00:02:31 Reduce playback speed
00:03:02 Overview tutorial
00:04:09 Explanation domain name & web hosting
00:04:49 Siteground services
00:05:26 Register domain name & web hosting
00:08:04 Install WordPress & SSL Certificate
00:09:54 WordPress dashboard overview
00:11:22 Change site title and tagline
00:13:16 Change user information
00:13:51 Change permalink structure
00:14:29 Explanation Astra Theme
00:15:31 Explanation Elementor Page Builder
00:15:43 Install and Import starter template
00:17:15 Create WooCommerce default pages
00:17:46 Edit menu section
00:19:00 Edit with customizer
00:19:31 Change website logo
00:20:54 Change site icon / favicon
00:21:23 Change typography
00:22:36 Change colors
00:24:19 Edit buttons
00:24:53 Change header layout
00:26:20 WooCommerce store notice
00:27:43 Change shop product structure
00:28:31 Change WooCommerce product image settings
00:29:15 Edit WooCommerce checkout settings
00:29:59 Edit with Elementor
00:30:26 Change header visual
00:30:59 Add header title
00:32:36 Add text component
00:32:59 Edit CTA button
00:34:32 Add social media icons
00:35:28 Change background overlay
00:36:09 Responsive mode (mobile, tablet, desktop)
00:36:42 Change product component
00:37:32 Install essential addons plugin
00:38:25 Drag & drop product grid element
00:40:10 Edit footer section
00:41:52 Change copyright text
00:42:45 Configure contact page
00:44:35 Delete pre-made products
00:45:28 Create simple product
00:46:36 Change currency options
00:47:54 Manage product inventory
00:49:42 Change measurements
00:50:10 Add upsells & Cross-sells
00:50:50 Add review
00:51:12 Set product image
00:52:19 Add product categories
00:53:32 Enter product tags
00:54:09 Change sidebar & content layout
00:55:28 Create variable product
00:56:11 Enter product attributes
00:57:25 Create product variations
01:00:45 Create grouped product
01:03:04 Upsells & cross-sells
01:04:32 Change WooCommerce settings
01:06:03 Configure geolocation
01:08:56 Manage comments section
01:10:30 Customer account creation
01:12:26 Change privacy policy settings
01:13:00 Change email settings (templates)
01:14:13 Change email header image
01:16:15 Create coupons
01:19:18 Configure Taxes
01:20:05 Tax-inclusive and tax-exclusive
01:23:10 Configure standard rates
01:24:58 Explanation reduced rates
01:25:15 Explanation zero rates
01:25:25 Install WooCommerce services
01:26:35 Configure shipping settings
01:27:43 Configure free shipping above certain amount
01:28:55 Install WooCommerce Flexible Shipping
01:30:34 Shipping based on price or weight
01:32:37 Install WooCommerce PDF invoices & packing slips
01:35:56 Explanation payment provider
01:36:37 Create Stripe account
01:39:19 Connect stripe account to WooCommerce
01:39:26 Install WooCommerce Stripe plugin
01:41:25 Make a test order / payment
01:43:16 Manage and process orders
01:45:06 Conclusion
Hey , I tried to add a page of that cosmetics store to my site .
And instead of the products section it’s showing me that text –
[products limit="8" columns="4"]
Can you please help me ?
which plugin send message to customer abour order ordered with details
Hey man thanks for this video… love from India
Very good job. Its my first time creating a website and im starting with no info at all. Your video is very detailed and easy to understand. Thank you very much and keep going. Love from Albania. 🥰
I could listen to you all day long!
Thanks for sharing with us
Hello how I can work in proportions or in mobile or iPad mode.
I've worked on the theme but I don't know it looks great in mobile mode.
Thank you for this amazing woocommerce review video! However, I faced a problem while customizing a footer block – the moment I hover over the button "Edit with Elementor" no "Site Footer" option appears.. What could be the problem?/ Could you advice an alternative method in editing the footer?
thanks I earned 15k by selling this site
thank you
Hi, thank you for this video. How did you edit the footer section? All the email phone number and address? Did you use elementor pro option? Because my doesn't move at all. And I don't have elementor pro. Thank you
Good and informative content. The way of delivering is amazing. God bless you man.
Hi, in Woocommerce settings general, do I put my virtual business address and phone number or do I use my personal details? Thank you in advance.
One of the Best Video I Found on youtube finally. Thanks bro
thanks again!!! One more question, how can I work on the latest products? I have tried to post something in that section, but I can't.
Hello which products do I sell..?
sir menu bar is not showing on a mobile phone. can you please tell me how to add them
Thank you so much dear , god help you in your life , love from morocco
Nice explain, very good video. The best thing is that you add timestamp in your videos. Make more videos one day you will be successful. Thanks for sharing such a good content
Thank you so much bro for this step by step guide.