Home Website TutorialsWordPress Building an e-commerce website with Astra Theme

Building an e-commerce website with Astra Theme

Published: Last Updated on

Continuing the series of tutorials on building websites with AZDIGI, In this article, AZDIGI will guide you to build an e-commerce website using WooCommerce with Astra Theme.

Advantages of AstraTheme

  • Fast loading speed
  • Compatible with Elementor and many more plugins
  • Simple customization suitable for blogging needs
  • The pre-built website templates are incredibly diverse

Main features on Astra Pro

  • Create a white label for the theme
  • In-depth color and background customization
  • In-depth font customization
  • Allows advanced customization on blogs and categories; customizations include layout, font size, author information…
  • Customize menu, website layout
  • Customize scroll to top
  • Customize ajax add to cart, image zoom, tab layout, related product
  • Infinite scroll on Woocommerce product page
  • Off-Canvas Sidebar, quick view, dropdown cart


Performed Part 1 and Part 2

I. Install Themes, Plugins and Astra Theme components

1. Install Astra Theme

To install the Astra theme, first, login to the admin page => go to Appearance => Theme. Here, you will see all the themes you have installed on your site. To add another theme, click Add New.

CleanShot 2022 04 04 at 18.53.48

Currently, AZDIGI is giving away a full set of Astra Themes, you can see the demo themes here. In this article, I will guide you on Astra Theme. This Astra theme will require and install 2 files, including:

Next, click Upload Theme => Select the downloaded Theme file to your computer => Install Now.

CleanShot 2022 04 04 at 18.58.11

After the installation is complete, select Appearance => Theme then select Astra Child and activate this theme.

CleanShot 2022 04 04 at 19.00.30

2. Install Plugin

Astra will ask to install the following 2 plugin themes to install addons and themes: You can click on the attached link to download it directly.

  1. Astra addon plugin (click to download)
  2. Astra premium sites (click to download)
CleanShot 2022 04 04 at 19.12.21

After the installation is complete, click Activate to activate these 2 plugins.

CleanShot 2022 04 04 at 19.18.54

3. Activate the Astra license

With just the above steps, you can deploy your website with Astra. However, the free interface store will limit many useful interfaces and features. However, the free interface store will limit many useful interfaces and features. you can send a support request to the Technical Team to activate the license.

4. Choose Theme and import demo

To find and select a template, select Appearance => Starter Templates, select Build Your Website Now.

CleanShot 2022 04 30 at 15.15.26@2x

Template Page Builder appears, I will choose Elementor to be the main Page Builder tool.

CleanShot 2022 04 30 at 15.16.14@2x

Once selected, you will see all the Page Builder Elementor templates. To use, please click on that template.

anh 7
anh 8

In the template, there will be imported components, including:

  • Import Customizer Settings
  • Import Widgets
  • Install Required Plugins
  • Import Content

Then you choose Submit & Build My Website.

anh 9

The import process will take a few minutes, please do not close your browser until the import process is complete.

anh 10

If you get the message Imported Successfully!, the import was successful. You can now access the web to check.

CleanShot 2022 04 30 at 16.04.37@2x

II. Set up theme options and customizer in Astra

1. Astra Options

In the Astra Options section, In the Astra Options section, you will find some special features of the theme:

Links to Customizer Settings:

  • Header Builder
  • Footer Builder
  • Layout Options
  • Blog Layouts
CleanShot 2022 04 06 at 21.02.05

Available Astra Pro Modules:

This page will install some of the available modules and is only for the PRO version.

CleanShot 2022 04 06 at 21.04.12

Extend Astra with free plugins!

This section will serve to install some free Plugins to use.

anh 2

2. Customizer in Astra

This is an important part because it will help you fix the entire template and information of this Astra theme template. To Customize, you access

To Customizer, you access Appearance => Customize

anh 3

The Customize section will include the following items: And I will go into each part:

anh 14

1. Global

CleanShot 2022 04 06 at 21.27.00
  • Typography: Change font style, font size
  • Colors: Allows you to change the color of the website
  • Container: Allows you to modify the layout of Page and Post
  • Buttons: Allows you to modify the buttons in your website to different formats.

2. Header Builder

The Header Builder feature helps you edit the Header section. There are 2 parts, GENERAL and DESIGN, which help you to edit almost the entire upper part of the web.

  • Site Title & Logo
  • Search
  • Off-Canvas Menu
  • Button
  • Primary Menu

To use, you just need to click on the above features and the customize interface will appear .

CleanShot 2022 04 30 at 16.41.15@2x

3. Breadcrumb

Breadcrumbs are a set of links that help users locate their current position in the site structure. In Breadcrumb, there are 3 main parts:

  • Header Position
  • Separator
  • Alignment

4. Blog

In this function, you can edit and change the blog and specifically the format of a post. When modified, all your posts will be applied according to the structure you customized.

  • Blog/Archive
    • Content Width
    • Post Structure
    • Post Content
  • Single Post
    • Content Width
    • Structure
    • Title
    • Total Number of Related Posts
    • Grid Column Layout
    • Posts Query
    • Posts Structure
    • Meta
CleanShot 2022 04 30 at 16.42.48@2x

5. Sidebar


The sidebar is where users can add arbitrary content: new posts, calendars, searches, etc. Sidebar is used very flexibly, you can use the sidebar in the header, footer, page vertical bar…

In this Astra theme, there are not many available Sidebars. However, you can add using Elementor.

CleanShot 2022 04 06 at 22.10.21

6. Footer Builder

Similar to the Header Builder built on top of the website. Footer Builder builds the bottom, footer of the website.

CleanShot 2022 04 30 at 16.44.55@2x

In the footer of the website, there are many areas with pre-made Widgets. You can edit these Widgets directly or add new Widgets to build a more beautiful footer.

To edit, hover your mouse over the Widgets and select General or Design.

CleanShot 2022 04 30 at 16.45.53@2x

7. Performance

Performance is the developer’s built-in automatic performance optimization feature. In the Astra theme, the developer only has 2 main features available:

  • Load Google Fonts Locally
  • Preload Local Fonts
CleanShot 2022 04 30 at

8. WooCommerce

Unlike other Astra theme interfaces, the product theme will have feature allows you to customize some of the properties of WooCommerce.

  • Store Notice
  • Product Catalog
  • Single Product
  • Product Image
  • Cart
  • Checkout
CleanShot 2022 04 30 at 16.50.06@2x

9. Site Identity

The Site Identity section links to the Header Builder quite a bit. Because here, you can customize Site Title & Logo Settings and Site Icon aka Favicon.

anh 15

10. Menu

In addition to customizing the menu in Appearance => Menus, you can also customize the menu directly here. To add a new menu, click Add Items.

anh 16

11. Widgets

Widget WordPress (referred to as Widget) is a system of WordPress tools that allows you to add new content, shape the list of posts. Thereby displaying the latest posts on the bars for visitors to search and track the posts easily.

anh 17

Astra theme has built-in 10 Widgets with different positions and you can add multiple blocks in each Widget.

For each block, you can use it as a post editor.

CleanShot 2022 04 06 at 22.23.33

12. Homepage Settings

Homepage Settings – you will rarely use this section because you already use the Elementor to build. The important part here is choosing what your homepage will show. And the default in Homepage Settings will take the Page name is Home for display.

CleanShot 2022 04 06 at 22.24.15

13. Additional CSS

Additional CSS Most website builders often work with this part. Instead of having to edit the CSS code directly in the theme, which will affect the theme and cause unexpected errors, you can edit the CSS in this section.

CleanShot 2022 04 06 at 22.26.46

III. Elementor Tools

Overview and interface editing operations in Elementor. To edit the interface with the Elementor tool, do the following:

First, you need to determine the interface to fix and the page that belongs to that interface. For example, I will edit the homepage interface, there are 2 ways for you to enter and edit the homepage interface.

  • Method 1: Go to Pages => All Page => Select the page to edit => click Edit with Elementor
anh 18
  • Method 2: Access the homepage of the website, Access the homepage of the website, select Edit with Elementor on the Toolbar.
anh 19

After accessing, you will see the following functions:

  • BASIC: Basic functions
  • PRO: Advanced functions
  • SITE
CleanShot 2022 04 30 at 19.01.25@2x

Like other page builders, Elementor’s dashboard is a collection of elements and tools for page creation. Elementor’s working interface is stable and intuitive. In particular, they do not take up much space on the editing screen, which is very useful if your computer screen is not large.

Elementor will work based on 4 page layout structure elements as follows:

  • Section: This is a working area on the page, each page will have many sections
  • Inner Section: Each section will be able to add multiple inner sections (but not required)
  • Columns: Columns are in a section or inner section, each section or inner section will have many columns
  • Element: In each column, there are many elements, each element can be an image, text, icon, video, etc.

When using Elementor, all operations you use are drag/drop. For example, I will drag/drop 3 Sections corresponding to 3 photos.

CleanShot 2022 04 30 at 19.09.24@2x

After dragging/dropping, you will see the interface with Section appears. In these sections, there will be 3 parts for you to manipulate:

  • Add Section: Add another Section
  • Edit Section: Edit the current Section
  • Delete Section: Delete the current Section
anh 20

In these sections, there will be 3 items:

  • Content: Used to edit the content of that section
  • Style: Used to edit the interface, color, font
  • Advanced: Advanced customization, allows custom CSS
anh 21

In addition, the corner below has some other features, such as:

  1. Cài đặt: general post options like title, background style, layout, etc.
  2. Nagivator: layered post manager, you can manage element position by drag and drop here.
  3. History: your edits and layouts will be saved, you can undo any mistakes.
  4. Responsive mode: previews of posts across devices, including computers, tablets, and mobile devices. You can edit the post appearance to suit each device separately without affecting other devices.
  5. Preview icon: Preview the post before publishing.
  6. Publish: publish a post (post, page).
anh 22

IV. Set up Woocommerce

1. Create categories for products

With the website, there will be many products and each product will be different. Therefore, you need to create a category for products to classify products and present them more logically and scientifically.

To create categories for products, click Products => Categories

  • Name: Enter the category name
  • Slug: Leave blank or enter in the format of the unsigned category name (eg: ca-phe)
  • Parent category
  • Description: Description of the category

Then select Add new category.

anh 11

A new category will appear, and to edit the newly created category, hover your mouse over the category name:

  • Edit
  • Quick Edit
  • Delete
  • View
  • Make default
anh 12

2. Create products

To create a new product, select Products => All Products => enter the content and information of the product. After entering, click Public to post the product.

CleanShot 2022 04 30 at 16.29.39@2x

The product is successfully posted, you will see it appear in the shop interface of the website.

anh 13

3. Configure order notification email

Note: Before setup, you need to configure SMTP for mail.

In this step, we will set up the Email Sending Order and Email receiving WooCommerce order information such as New Order, Order Cancellation, Failed Order Notification.

Go to WooCommerce => Setup, then select and enter the following information:

  • New order: Enter your email to receive notifications when someone places a new order.
  • Cancel an order: Enter your email to receive a notification when an order is canceled.
  • Unsuccessful order: Enter your email to receive notifications when there is an unsuccessful order.

If you want to receive notifications via multiple emails, please enter the emails and separate them by comma (,), Example (email1, email2, email3, email4)

anh 23

Next, please scroll down and set up at Sender email preferences:

  • Name “sender”: enter the title name of the sender of the order.
  • “From” address: enter the Gmail for which you have configured SMTP (This is the email that sends order notifications to your customers)
CleanShot 2022 04 30 at 19.32.44@2x

Hopefully, this article will help you build your own complete e-commerce website to prepare for your business.

Wishing you success!

If you need assistance, you can contact support in the ways below:

Đánh giá

Tham gia nhóm hỗ trợ Server - Hosting

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay

Bài viết cùng chuyên mục

AZDIGI – Không chỉ là đơn vị hàng đầu trong lĩnh vực Web Hosting và Máy chủ, chúng tôi mong muốn mang lại những kiến thức bổ ích nhất và luôn cập nhật thường xuyên cho cộng đồng người đam mê thiết kế website, công nghệ,…

Vui lòng không sao chép nội dung nếu chưa xin phép. Designed and Developed by PenciDesign