Astra is a lightweight and highly customizable
WordPress Themesthat can help foreign trade users quickly establish corporate websites or e-commerce websites for various industries. This article by Naiba teaches you
how to install a WooCommerce website using Astra。
Step 1: Build and install a WordPress website.
how to build a website yourselfNaibabiji 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
Astra Theme comes in two versions: Free and Pro. The free version provides essential customization options, while Astra Pro offers richer features and includes many enhancements specifically for WooCommerce. You can click the button below to visit the Astra website and learn about its WooCommerce features.
Learn about Astra WooCommerce FeaturesAfter purchasing Astra Pro, you will receive the Astra installation package and the Pro plugin. We need to upload them to the website's theme and plugin directories respectively for installation.
2.1 Install ThemeYou can install the Astra theme by searching 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 Astra.
2.2 Install PluginAfter installing the theme, 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 plugin via the plugin page in the Admin Dashboard. After activation, enter the purchased license key to activate.
Step 2, import demo data
After both plugins are activated, go to Starter Templates, where you will be prompted to choose a page builder.
By default, Astra supports four popular page builders. Elementor has the largest user base. In the long run, choosing Gutenberg is also a good option, as WordPress defaults to the Gutenberg editor. Here, Naiba chooses Elementor for demonstration. After selection, many demos will appear; we select a website demo under eCommerce.
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 custom features, you can use any demo to install a WooCommerce website.
You can click on a demo you like to import. Demos marked with AGENCY in the upper right corner can only be imported by those who have purchased the agency plan.
After clicking the import button, simply click 'import' on the interface that appears. Astra will automatically import the theme's custom data, widgets, necessary plugins, and content. 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, visiting the website's Frontend will show the site interface with the Astra official demo template installed. 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 anywhere you want to modify. After making changes, click the update button to see the modified effect on the website.
By clicking the custom button at the top, in addition to modifying Astra's page layout 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 tags to show on products by clicking the eye icon to toggle them on or off.
Enter the Astra options, activate the WooCommerce features, and then click the custom interface again to view.
For example, there are additional settings for promotional displays. You can set whether to show a promotional button or the specific discount amount; you can also modify the display style. You can also set whether to display the 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 configure them directly.
Summary
Through the above tutorial, you can see that using Astra can quickly help you build a WooCommerce online store website. Additionally, 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. Besides, Astra also comes with many custom options, helping you achieve various theme functions and effects without modifying code. Astra has a free version, but for non-technical friends in foreign trade, choosing the paid Pro version is recommended, as it provides more features and includes one-on-one customer support.
Buy Astra Pro NowView More
Astra TutorialView
WooCommerce Setup Tutorial
2.1 Install ThemeYou can install the Astra theme by searching 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 Astra.2.2 Install PluginAfter installing the theme, 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. Elementor has the largest user base. In the long run, choosing Gutenberg is also a good option, as WordPress defaults to the Gutenberg editor. Here, Naiba chooses Elementor for demonstration. After selection, many demos will appear; we select a website demo under eCommerce.
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 custom features, you can use any demo to install a WooCommerce website.
You can click on a demo you like to import. Demos marked with AGENCY in the upper right corner can only be imported by those who have purchased the agency plan.
After clicking the import button, simply click 'import' on the interface that appears. Astra will automatically import the theme's custom data, widgets, necessary plugins, and content. 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 anywhere you want to modify. After making changes, click the update button to see the modified effect on the website.
By clicking the custom button at the top, in addition to modifying Astra's page layout 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 tags to show on products by clicking the eye icon to toggle them on or off.
Enter the Astra options, activate the WooCommerce features, and then click the custom interface again to view.
For example, there are additional settings for promotional displays. You can set whether to show a promotional button or the specific discount amount; you can also modify the display style. You can also set whether to display the 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 configure them directly.
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.