Astra Free Theme Integration for WooCommerce Explained in Full

Theme compatibility and scalability are very important when building an e-commerce website with WordPress.Astra It is a lightweight and powerful free theme that perfectly supports the WooCommerce Astra Free Edition is suitable for quickly building an online store with a unified style. In this article, we will introduce how to integrate Astra Free Edition with WooCommerce and page setup options.

Image [1]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Fast integration with automatic style inheritance

Astra is automatically adapted. WooCommerce Plugin, e-commerce page color scheme, fonts, buttons and other styles will be synchronized with the theme settings of the entire site. No need for complex configuration, the overall style remains consistent, suitable for site builders who are just getting started.

Image [2]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Astra The theme is also compatible with responsive design, adapting to desktop, mobile and tablet devices to improve the overall layout performance.

draw attention to sth.: If more flexible style control is needed, such as product card layout, checkout page structure optimization, etc., you can use the Astra Pro plugin for the WooCommerce module.

Overview of WooCommerce Setup Options (Astra 3.0+)

Install and enable WooCommerce After the plugin, you can see the full setup options in Appearance > Customize > WooCommerce, which is divided into several sub-panels.

Image [3]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Catalog Settings

Applies to the main store page and contains the following options:

  • Content width: adjust the display area using default or customized values
  • Number of product columns: set the number of products to be displayed in each row, which can be distinguished by equipment.
  • Number of products per page: control the number of single page display, affect the paging logic
  • Product structure: you can adjust the arrangement or hiding status of title, price, buttons and other elements
Image [4]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Single product page settings

Breadcrumb navigation can be enabled or disabled to provide a clear path through the page.

Image [5]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Shopping cart page settings

Location: Appearance > Customize > WooCommerce > Cart

Image [6]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Provide the overall structure and layout of the shopping cart page, and support the display of "cross-selling products" to help enhance product exposure.

Image [7]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Product Image Settings

The main image and thumbnails can be resized, and the image cropping is done by the WooCommerce Control. Image loading speed and ratio can be flexibly adjusted according to page requirements.

Menu Shopping Cart Icon

Path: Appearance > Customize > Header > Main Menu

Image [8]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

By enabling the last WooCommerce setting, a shopping cart icon can be displayed on the right side of the main navigation bar, allowing visitors to view the contents of their order at any time.

Page layout and sidebar control

Astra Support for separate container widths and sidebar layouts for e-commerce related pages.

Page container width settings

Path: Appearance > Customize > Global > Container

Image [9]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

Supports setting container widths for store pages, product pages, cart pages, and checkout pages separately. Default values can also be overridden using the meta settings at the bottom of the page.

Sidebar Management

Path: Appearance > Customize > Sidebar

Image [10]-Astra Free Theme WooCommerce Integration Tutorial: Create a unified and beautiful e-commerce site!

Individual sidebars can be set for Shop, Cart, Checkout pages. Separate sidebars are also supported for product detail pages, which can be used to display ads, product recommendations or navigation modules. Custom widgets can be added to all sidebar areas.

Image [11]-Astra Free Theme WooCommerce Integration Tutorial: Create a unified and beautiful e-commerce site!

Uniform configuration of fonts and color schemes

Astra will be WooCommerce The page is synchronized with the overall style of the site, fonts, buttons, colors and other elements to maintain consistency, reducing the workload of repeated settings.

Image [12]-Astra Free Theme WooCommerce Integration Tutorial: Create a unified and beautiful e-commerce site!

Path to unify fonts and colors: Appearance > Customize > Global > Typography / Colors

Image [13]-Astra Free Theme WooCommerce Integration Tutorial: Creating a Unified and Beautiful E-commerce Site

It only needs to be configured once for the full site to take effect.

summarize

Astra Free themes in support WooCommerce Stable performance in terms of interface simplicity and clear settings. It has enough functions for small and medium-sized online stores, and is suitable for website users who pursue fast website construction and unified style. If you need finer layout control or more complex product display, you can realize it by upgrading to Astra Pro plugin.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
If you like it, support it.
kudos235 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments