HOW TO BUILD A WOOCOMMERCE STORE IN WORDPRESS EASILY IN JUST 1 HOUR
Making of a e-comm store in wordpress is quite easy with preset theme and plugins available from several frameworks. However, easy and quick creation is never indicative of quality. After conducting extensive research on existing WordPress themes and frameworks, we discovered that the Astra theme could meet our requirements while also performing admirably in several areas. As a result, we'd like to walk you through the process of creating a successful E-commerce website using Astra Theme and the Woocommerce plugin.
Astra is one of the best WordPress themes created by Brainstorm Force, an Indian firm. Astra theme was intentionally created quickly with performance in mind. It has been considered as fastest theme of the year, according to certain well-known platforms like wpforms and atheme.com. Three distinct sorts of Pro options are available for the Astra theme, each of which adds extra capabilities for a particular user or agency. The Ultimate Addons for Elementor plugin, Convert Pro plugin, and Schema Pro plugin are just a few of the useful product packages that come with the extra capabilities, all of which might significantly speed up the website construction process.
The most significant condition that every website should have in order to receive a better rating from search engines, particularly Google, is that it be light and fast.
Below given is a summary of the advantages of adopting Astra Theme:
- Lighter development time reduction (improve speed and performance of website).
- Compatible with well-known page builders (e.g.:elementor).
- Search engine friendly (content that is built based on search engine format).
- It is simple for a non-programmer to create a website.
- Simple to install, upload using dashboard 'or' ftp.
- Simple to discover documentation, tutorials compatible with Woo-commerce plugin.
- Can provide a real-time live preview.
Table of Contents:
[A.] Selection of a good domain & hosting
1.0 Installation of Astra Theme
2.0 Starter Template Installation
3.0 Prepare Material for Your Website
4.0 Astra Pro Features & Functions
5.0 Header
6.0 Footer
7.0 Typography, Colors, Containers
8.0 Customize Scroll to Top button
9.0 Customize Blog
3.0 Prepare Material for Your Website
4.0 Astra Pro Features & Functions
5.0 Header
6.0 Footer
7.0 Typography, Colors, Containers
8.0 Customize Scroll to Top button
9.0 Customize Blog
[A.] Selection of a good domain & hosting:
Before you begin, you need to have access to one WordPress dashboard. To get quality access, you need to have good quality hosting with a domain name.
We recommend below three Web Hosting Services:
1. WP Engine (Top Recommended High Speed & Performance Hosting, 99.99% uptime, being used by top MNCs all over the world.)
2. Web.com (Free Domain, High Traffic Unlimited Hosting with decent pricing, starting $2.95/month for a year & $2.75/mo for 3yrs.)
3. iPage (Free Domain, Lowest Price Hosting for Web-Starters @$1.99/month for 3 yrs. & $2.99/mo for 1yr.)
Either case, if you want to be more specific: TOP CHEAP WEB HOSTING SERVICES
Here is a list of small things, you need to keep ready before e-comm store building:
1. What products do you want to display?
2. A Market Survey of your products, where we recommend SurveySparrow or Typeform that can do the job, best.
3. Target Audience & Brand name & you would obviously name the domain accordingly.
[B.] Making of an e-commerce store:
Now, after logging into WordPress Dashboard,
#1: Add /wp-admin at the end of your website URL.
(eg: https://www.yourdomain.com/wp-admin)
#2: Enter your username and password. Once login you will be redirect to WordPress dashboard.
#1: Add /wp-admin at the end of your website URL.
(eg: https://www.yourdomain.com/wp-admin)
#2: Enter your username and password. Once login you will be redirect to WordPress dashboard.
#1: Login to WordPress dashboard.
#2: Go to Appearance > Theme > Add New
#3: Search for Astra, Install and Activate it.
Starter templates provide you with a complete site template. All you need to do is add your content and image.
#1: Go to Plugin > Add New from dashboard
#2: Search for Starter Templates.
#3: Install and Activate it.
#1: Go to Plugin > Add New from dashboard
#2: Search for Starter Templates.
#3: Install and Activate it.
#4: After that, Go to Appearance > Starter Templates
#5: Browse through the library and select the template without the agency label at the top right corner. This is because the agency template is only available for Astra Premium Sites.
#6: You can also click the dropdown to filter the templates.
#7: Click on the template you want. Preview at the left side will preview the whole site in new tab.
#8: Click Import Complete Site at the right.
#9: A pop-out shown as below, Check all the box and Click Import.
#10: Once the installation is completed, pop out shown as below. Click View Site if you want to view your imported site.
3.0 Prepare Material for Your Website:
- Landing page banner — 1920x1100px
- Homepage banner — 1920x1080px
- Logo(white and color) — Small: 180x60px, Big: 360x120px, Vertical: 500x500px
- About us and contact us banner — 1920x1100px, Sub image:1200x675px
- Account banner — 1920x1080px
- Carrying logo — 150x150px
- Blog image — 1920x1280px
4.0 Astra Pro Features & Functions:
Astra Pro Addon is a premium plugin that provides more customization options and features to Astra themes. Astra Pro features consist of the navigation menu, blog layouts, site layouts, WooCommerce, sticky header, page header, more color controls, better typography, custom layouts, scroll to top links, footer widget, header sections, more header designs, and spacing control. There are several packages offered by Astra. The Astra Pro package used here is Agency Bundle Package. Every customization option explained includes features in the Astra Pro package.
AstraPro Pricing Table
Install AstraPro:
#1: Download plugin from WPastra store that you purchase i.e. Astra Pro.
#2: Compress the plugin to store as zip file.
#3: Go to Plugins > Add New
#1: Download plugin from WPastra store that you purchase i.e. Astra Pro.
#2: Compress the plugin to store as zip file.
#3: Go to Plugins > Add New
#5: Choose your plugin file in zip format.
#6: Click Install Now.
#7: Go to Appearance > Astra Options
#8: Activate features below Available Astra Pro Modules as your need.
#1: Go to Appearance > Customize from dashboard
#2: Select Header.
5.1 Site Identity
Site identity allows you to customize your site logo, icon, title and tagline. Besides, site icon is the favicon of your website. Moreover, site title is typically the name of your site and site tagline is a short phrase/sentence that describes your site. Search engines normally will look at your site title and tagline thus it is important for search engine optimisation (SEO).
#1: Go to Header > Site Identity
#2: You can upload your site logo by clicking Select Logo.
Site identity allows you to customize your site logo, icon, title and tagline. Besides, site icon is the favicon of your website. Moreover, site title is typically the name of your site and site tagline is a short phrase/sentence that describes your site. Search engines normally will look at your site title and tagline thus it is important for search engine optimisation (SEO).
#1: Go to Header > Site Identity
#2: You can upload your site logo by clicking Select Logo.
#3: Check the box of Different Logo for Retina Devices and Upload logo. This is because some devices (Apple device) have high pixels than normal device and normal site logo may appear to be too tiny for them. Check Different Logo for Mobile Devices if you have different logo for mobile device.
#4: You also can adjust site logo width for different devices by select the device beside Hide Controls.
#5: Upload your site icon and the icon will appear in tab.
#6: Add your site title and Check the box to Display Site Title in Header.
Check the box if you want to Inline Logo and Site Title. You also can adjust the font size of the site title.
#7: Add your site tagline and Check box to Display Site Tagline. You can adjust the font size as well.
This is the output of display both site title and tagline in header.
#8: You also can adjust spacing of site identity.
Primary Header allows you to customize header layout, width, border bottom size, border bottom color, mobile header layout, header background color, outside menu item color and header space.
#1: Go to Header > Primary Header
#2: You can choose a layout of header where 3 layouts are provided, width of header either content width or full width, customize border bottom size and color. You also can choose the layout of mobile header, background color of header, outside menu item color and customize header space.
5.3 Primary Menu
The primary menu allows you to customize the menu, submenu, mobile menu, color, typography, and spacing of the menu, submenu, and mega menu heading.
#1: Go to Header > Primary Menu
#2: The check box of Disable Menu will disable the primary menu in the header.
#3: You also can select the last item in menu from dropdown list (either none, search, button, text/html, widget or woo-commerce)
You can check the box to hide last item only for menu in mobile, also can take last item outside menu if you want last item have different layout from primary menu.
The primary menu allows you to customize the menu, submenu, mobile menu, color, typography, and spacing of the menu, submenu, and mega menu heading.
#1: Go to Header > Primary Menu
#2: The check box of Disable Menu will disable the primary menu in the header.
#3: You also can select the last item in menu from dropdown list (either none, search, button, text/html, widget or woo-commerce)
You can check the box to hide last item only for menu in mobile, also can take last item outside menu if you want last item have different layout from primary menu.
#4: You can select submenu container animation (default, slide down, slide up or fade), adjust container border, border color.
#5: Check the box of Submenu divider if you need which allow you to select the divider color.
#6: You can adjust the menu breakpoint where when it reach the width you set it automatically become mobile menu, add label beside mobile menu, choose the mobile menu style (dropdown, flyout, fullscreen or no toggle).
#7: This is a toggle button.
You can choose its style (fill, outline or minimal) and its color.
#8: You can choose the dropdown target (icon or link), adjust border for menu items.
#9: You can choose mobile menu border color.
#10: You can choose link/text color and background color for normal, hover and active menu and submenu. You also can select the background image for the normal menu. For mega menu column heading, you can select the color for normal and hover. You can also customize typography and spacing for menu, submenu and mega menu column heading.
5.4 Above Header / Below Header
This is Astra Pro Addon feature
#1: Go to Appearance > Customize > Header > Above Header / Below Header
#2: You can choose to merge above / below menu with primary menu on mobile. If you choose to merge, above / below menu will appear inside the primary header toggle button. If you do not merge, separate toggle for above / below menu appear on mobile.
#3: Swap sections on mobile devices — You can swap section of 1 and 2 on mobile.
#4: Layout — you can display above / below header section inline or stacked on mobile.
This is Astra Pro Addon feature
#1: Go to Appearance > Customize > Header > Above Header / Below Header
#2: You can choose to merge above / below menu with primary menu on mobile. If you choose to merge, above / below menu will appear inside the primary header toggle button. If you do not merge, separate toggle for above / below menu appear on mobile.
#3: Swap sections on mobile devices — You can swap section of 1 and 2 on mobile.
#4: Layout — you can display above / below header section inline or stacked on mobile.
5.5 Sticky Header
This is Astra Pro Addon feature.
#1: Go to Appearance > Customize > Header > Sticky Header
#2: Check box of Stick Primary Header if need header while scrolling through the page.
#3: Check box of Different Logo for Sticky Header if you want to change the logo for sticky header and upload the logo below Sticky Logo.
#4: Check box of Different Logo for retina devices if have any.
#5: You can adjust the sticky logo width.
#6: Check the box of enable Shrink effect if want the sticky header to be shrink while scrolling.
#7: Check box of Hide when scrolling down if want sticky header to be invisible while scrolling.
#8: You can select animation for sticky header (none, slide or fade).
This is Astra Pro Addon feature.
#1: Go to Appearance > Customize > Header > Sticky Header
#2: Check box of Stick Primary Header if need header while scrolling through the page.
#3: Check box of Different Logo for Sticky Header if you want to change the logo for sticky header and upload the logo below Sticky Logo.
#4: Check box of Different Logo for retina devices if have any.
#5: You can adjust the sticky logo width.
#6: Check the box of enable Shrink effect if want the sticky header to be shrink while scrolling.
#7: Check box of Hide when scrolling down if want sticky header to be invisible while scrolling.
#8: You can select animation for sticky header (none, slide or fade).
#9: You can select a place to enable the sticky header from a dropdown list (desktop, mobile, desktop + mobile).
#10: You can customize the elements (header, menu, submenu, mega menu heading, content) color above the header, elements (header, menu, submenu, mega menu heading, outside item) color for a primary header as well as elements (header, menu, submenu, mega menu heading) color below the header.
5.6 Transparent Header
#1: Go to Header > Transparent Header
#2: Check this box if want to enable transparent header on complete website. After you check this box, there are more options appear.
#1: Go to Header > Transparent Header
#2: Check this box if want to enable transparent header on complete website. After you check this box, there are more options appear.
#3: Check the box if you want to disable sticky header on it.
#4: Choose to enable on desktop, mobile or desktop and mobile.
#5: Check the box if want to enable different logo and upload it below Logo.
#6: Check the box if different logo for retina devices and upload logo below Retina Logo.
#7: You can adjust the logo width as well.
#8: You also can adjust bottom border size and color.
#9: You can choose background overlay color, normal and hover site title color, normal menu, submenu link / text color and background color; hover menu, submenu link color, content normal text and link color, content hover link color.
6.0 Footer
#1: Go to Appearance > Customize > Footer from dashboard.
#1: Go to Appearance > Customize > Footer from dashboard.
#2: Select Footer Widgets
#1: You can choose from 7 layouts provided or you do not want any widget.
#2: You can choose the width either content width or full width.
#3: You can adjust the padding and top border size.
#4: You can adjust top border color, select background color or background image, select content normal title, text and link color, content hover link color, customize typography of widget title and widget content.
6.2 Footer Bar
#1: Go to Footer > Footer Bar
#2: Choose from 2 layouts provided.
#3: In Section 1, you can choose to include either text, widget or footer menu. Normally section 1 custom text will include copyright but you can change as you wish. Section 2 dropdown list is the same as Section 1.
#1: Go to Footer > Footer Bar
#2: Choose from 2 layouts provided.
#3: In Section 1, you can choose to include either text, widget or footer menu. Normally section 1 custom text will include copyright but you can change as you wish. Section 2 dropdown list is the same as Section 1.
#4: You can custom text in section 2, adjust footer bar width (either content width or full width), adjust border size, select border color, select background color or image, normal content text and link color, hover link color, customize content typography, adjust footer space.
7.0 Typography, Colors, Containers
Typography
– Go to Appearance > Customize > Global > Typography. You can customize base typography and headings.
Colors
– Go to Appearance > Customize > Global > Colors. You can customize base colors and content color.
Containers
– Go to Appearance > Customize > Global > Container.
8.0 Customize Scroll to Top button
Scroll to top module on Astra Pro Addon help to add scroll to top action on web page.
#1: Go to Appearance > Customize
#2: Select Global
#3: Select Scroll To Top.
#4: You can choose to Display on either Desktop, Mobile or Desktop + Mobile.
#5: You can choose scroll to top to align on left or right of page.
#6: You can adjust the icon size (size of icon font) and border radius (apply rounded border for icon background).
#7: You also can change normal and hover icon color and background color.
9.0 Customize Blog & 9.1 Add Blog Post
#1: Go to Posts > Add New
#2: Enter title for your post.
#3: Enter body content of post.
#4: Set a featured image at right sidebar (usually shown on top of post and also is post’s thumbnail image).
#5: Add tags and categories for post at right sidebar. Categories more broader while tags more specific. Click Publish if done.
9.2 Create Separate Blog Page
By default, WordPress display blog post as home page.
#1: Create one home page and one blog page.
#2: Go to Settings > Reading
By default, WordPress display blog post as home page.
#1: Create one home page and one blog page.
#2: Go to Settings > Reading
#3: Choose A static page as your homepage displays. Choose homepage for Homepage and Choose blog page for Posts page.
#4: Click Save Changes at the bottom.
#5: Go to Appearance > Customize
#6: Select Homepage Settings
#7: Select A static page for Your homepage displays. Select home page for Homepage and blog page for Posts page.
#8: Click Publish after done.
9.3 Customize Blog Post
#1: Go to Appearance > Customize
#2: Select Blog.
9.3.1 Blog / Archive
Blog Pro module in Astra Pro add more customization options for blog / archive and single post.
#1: Select Appearance > Customize > Blog > Blog / Archive. Archive page is a collection of posts.
Blog Pro module in Astra Pro add more customization options for blog / archive and single post.
#1: Select Appearance > Customize > Blog > Blog / Archive. Archive page is a collection of posts.
#2: You can choose either full content or excerpt for post content.
Full content — entire written text in post visible in archive page
Excerpt — display short extract of content, default length is 55 words but you can control the word count to display
#3: You can manage the post structure. You can reorder or hide featured image, title & blog meta, publish date, comments, category, author, tag and read time. To reorder simply drag and drop the items. To hide the item, Click the eye icon at the left. If you hide title and blog meta, meta options disappear too.
#4: You can adjust the content width of blog page.
#5: You can set typography for Archive title and Post title.
9.3.2 Single Post
#1: Go to Appearance > Customize > Blog > Single Post.
#2: You can choose to display or hide featured image, title and meta by click on the eye icon.
#3: You also can display author information.
#4: It will load previous blog post below current post.
#5: You also can remove featured image padding but only work for Boxed and Content Box container layout.
That's All !!
Keep Reading,
A Reader is a Leader.
WITH LOVE BY:
WFEED | WITFEED
TOPIC: EASILY BUILD A WP E-COM STORE WITH ASTRA & WOOCOMMERCE.
Keep Reading,
A Reader is a Leader.
WITH LOVE BY:
WFEED | WITFEED
TOPIC: EASILY BUILD A WP E-COM STORE WITH ASTRA & WOOCOMMERCE.
0 Comments