Astra is a lightweight and highly customizable
WordPress Themethat helps foreign trade users quickly establish corporate or e-commerce websites for various industries. This article by Naibabiji teaches you
how to install a WooCommerce website using Astra。
Step 1: Build and install a WordPress website.
how to build a website yourselfNaibabiji Website Building Notes has shared many tutorials on this. If you are a foreign trade user, you can directly follow
SiteGround Tutorialto purchase the service and install a WordPress website. This article will not repeat this part of the content.
Step 2: Install the Astra Theme
The Astra Theme is divided into a free version and a Pro version. The free version provides some essential customization options, but Astra Pro offers richer features and adds many specific features for WooCommerce. You can click the button below to learn about the WooCommerce-specific features on the Astra website.
Learn about Astra WooCommerce FeaturesAfter purchasing Astra Pro, you will receive the Astra installation package and the Pro plugin. We will upload them to the website's themes and plugins sections respectively for installation.
2.1 Install ThemeYou can install the Astra theme by searching for it directly in the Admin Dashboard or by manually uploading the theme package. After purchasing Pro, a child theme is also included. Activate the child theme; modifications made to the child theme will not affect future updates of the Astra parent theme.
2.2 Install PluginsAfter the theme is installed, it is not yet the Pro version. We still need to install the accompanying Pro plugin and the premium demo import plugin.
- astra-addon-plugin-2.3.3.zip
- astra-premium-sites-2.0.0.zip
Installation method: Upload and install the plugins via the plugins page in the Admin Dashboard. After activation, enter the purchased license key to activate them.
Step 2: Import demo data
After both plugins are activated, we enter Starter Templates, which will prompt you to choose a page builder.
By default, Astra supports four popular page builders. The one with the largest user base is Elementor. In the long run, choosing Gutenberg is also a good option, as WordPress defaults to the Gutenberg editor. Here, Naiba chooses Elementor for the demonstration. After selection, many demos will appear; we choose a website demo under the eCommerce category.
It is worth noting that these eCommerce demo demonstrations only mean that Astra has pre-designed some styles by default. If you know CSS code and how to configure Astra's customization features, you can use any demo to install a WooCommerce website.
You can click on a demo you like to import it. Demos marked with AGENCY in the top-right corner can only be imported by those who have purchased the agency plan.
After clicking the import button, on the interface that appears, simply click 'import'. Astra will automatically import the theme's custom data, widgets, necessary plugins, and content for you. If you have previously imported other demo data, you can check 'Delete Previously Imported Site' to remove the previously imported data.
Step 3: Modify website content and layout
After the import is complete, when we visit the website frontend, we can see the website interface installed and imported with the official Astra demo template. Next, we can start modifying it to our desired appearance.
Click on the top
Edit with Elementor。
Elementor is a visual page builder plugin, so you can click on any element you want to modify. After making modifications, click the update button to see the changes take effect on the website.
By clicking the customize button at the top, in addition to modifying Astra's page layout and styles, we can also specifically configure and adjust WooCommerce pages.
For example, you can set how many products to display in the product catalog and how many products per column. You can also control which product tags are displayed by clicking the eye icon to toggle them on or off.
Enter the Astra options, activate the WooCommerce features, and we'll click on the custom interface again to view.
For example, there are additional settings for promotional display; you can set it to show as a promotional button or the specific discount amount; you can also modify the display style. You can also set whether to display the shopping cart total.
In the product catalog settings, layout and style options have also been added. Specific product pages also support display settings. These features do not require coding knowledge; you can directly configure them.
Summary
Through the above tutorial, you can see that using Astra can quickly help you build a WooCommerce online store website. At the same time, Astra is
Google SEOfriendly, with built-in structured data, allowing search engines to better understand your website, ultimately helping you achieve better website ranking results. In addition, Astra also comes with many custom options, helping you achieve certain theme functions and effects without modifying code. Astra has a free version, but for non-technical foreign trade friends, choosing the paid Pro version is recommended because it offers more features and includes one-on-one customer service support.
Buy Astra Pro NowView More
Astra TutorialView
WooCommerce Setup Tutorial
2.1 Install ThemeYou can install the Astra theme by searching for it directly in the Admin Dashboard or by manually uploading the theme package. After purchasing Pro, a child theme is also included. Activate the child theme; modifications made to the child theme will not affect future updates of the Astra parent theme.2.2 Install PluginsAfter the theme is installed, it is not yet the Pro version. We still need to install the accompanying Pro plugin and the premium demo import plugin.
By default, Astra supports four popular page builders. The one with the largest user base is Elementor. In the long run, choosing Gutenberg is also a good option, as WordPress defaults to the Gutenberg editor. Here, Naiba chooses Elementor for the demonstration. After selection, many demos will appear; we choose a website demo under the eCommerce category.
It is worth noting that these eCommerce demo demonstrations only mean that Astra has pre-designed some styles by default. If you know CSS code and how to configure Astra's customization features, you can use any demo to install a WooCommerce website.
You can click on a demo you like to import it. Demos marked with AGENCY in the top-right corner can only be imported by those who have purchased the agency plan.
After clicking the import button, on the interface that appears, simply click 'import'. Astra will automatically import the theme's custom data, widgets, necessary plugins, and content for you. If you have previously imported other demo data, you can check 'Delete Previously Imported Site' to remove the previously imported data.
Click on the topEdit with Elementor。 
Elementor is a visual page builder plugin, so you can click on any element you want to modify. After making modifications, click the update button to see the changes take effect on the website.
By clicking the customize button at the top, in addition to modifying Astra's page layout and styles, we can also specifically configure and adjust WooCommerce pages.
For example, you can set how many products to display in the product catalog and how many products per column. You can also control which product tags are displayed by clicking the eye icon to toggle them on or off.
Enter the Astra options, activate the WooCommerce features, and we'll click on the custom interface again to view.
For example, there are additional settings for promotional display; you can set it to show as a promotional button or the specific discount amount; you can also modify the display style. You can also set whether to display the shopping cart total.
In the product catalog settings, layout and style options have also been added. Specific product pages also support display settings. These features do not require coding knowledge; you can directly configure them.
Comments are closed
The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.