Tutorial on Building WooCommerce Website with Astra Theme

Astra is a lightweight and highly customizable WordPress Theme , which can help foreign trade users quickly establish enterprise websites or e-commerce websites in various industries. My father teaches you How to install a WooCommerce website using Astra 。

Step 1: Build and install a WordPress website.

How to build your own website We have shared a lot of notes on how to build a website. If you are a foreign trade user, you can follow SiteGround Tutorial Go to buy a service and install a WordPress website.

This article will not repeat the contents of this part.

Step 2: Install the Astra theme

The Astra theme is divided into two versions: free version and Pro. The free version provides some necessary customization options, but Astra Pro provides more functions, and also adds many features for WooCommerce.

You can click the button below to go to the Astra website to learn about the features of WooCommerce.

Learn about Astra WooCommerce features

After you purchase Astra Pro, you can get the Astra installation package and Pro plug-in. We upload them to the theme and plug-in of the website for installation.

2.1 Installation theme

You can search the Astra installation theme directly in the background, or manually upload the theme package for installation.

After purchasing Pro, there is also a sub theme, which is enabled. The content modification on the sub theme will not affect the update of future versions of Astra.

2.2 Installing plug-ins

After the theme is installed, it is not a Pro version. We also need to install the supporting Pro plug-in and advanced demonstration import plug-in.

• astra-addon-plugin-2.3.3.zip
• astra-premium-sites-2.0.0.zip

The installation method is to upload the plug-in installation through the background plug-in page. After enabling, enter the purchased serial number to activate.

Step 2: Import demonstration data

After the two plug-ins are activated, we will enter Starter Templates and let you select a page builder.

The default Astra supports four popular page builders.

The most popular user is the Elementor. In the long run, Gutenberg is also a good choice. After all, WordPress is the Gutenberg editor by default.

Daddy has chosen Elementor for demonstration. After selection, many demos will appear. We choose the website demo under eCommerce.

It is worth noting that these eCommerce demos only say that Astra has designed some styles by default. If you can use CSS code and configure Astra's custom functions, you can use any demo to install the WooCommerce website.

You can click a demo you like to import. The demo marked with AGENCY in the upper right corner of the demo can only be imported if you have purchased an agent package.

After selecting the Import button, click Import directly in the interface that appears, and Astra will automatically import custom data, gadgets, necessary plug-ins and content with the theme.

If you have other demonstration data before, you can check Delete Previously Imported Site to delete the previously imported data.

Step 3: Modify the website content and layout

After importing, we can visit the website foreground to see the website interface that has been installed and imported the official Astra demo template. Next, we can start to modify it to the way we want.

Click on the top Edit with Elementor 。

The Elementor is a visual page builder plug-in, so you can click where you want to modify it.

After modification, click the update button to see the effect of the website modification.

By clicking the user-defined button on the top, we can not only modify Astra's page layout style, but also set and adjust WooCommerce pages separately.

For example, you can set how many products are displayed in the product catalog, and how many products are displayed in each column.

Click the eye icon to open and close the labels displayed by the product.

Enter the Astra option, activate the WooCommerce function, and click the custom interface again.

For example, if there is more promotion display settings, you can set whether the display is a promotion button or a specific number of promotions; You can also change the display style.

You can also set whether to display the shopping cart amount.

In the product catalog settings, there are also more options for layout and style settings.

The specific product page also supports display settings. These functions can be set directly without your knowledge of code.

summary

Through the above tutorial, you can find that using Astra can quickly help you build a WooCommerce online mall website.

At the same time, Astra Google SEO Friendly, built-in structured data can make search engines understand your website more clearly, and ultimately help you get better website ranking results.

In addition, Astra also has many custom options, which can help you realize some functions and effects of the theme without modifying the code.

Astra comes with a free version, but for foreign trade friends who do not know the technology, you can choose the paid Pro version because it can provide you with more functions and one-on-one customer service support.

Buy Astra Pro now

See more Astra Tutorial

see WooCommerce Setup Tutorial