Designing Catalog Pages and Store Pages with Astra WooCommerce Module

Astra thematic integration WooCommerce module, through the visual interface to provide a full range of product display customization capabilities. This guide will completely analyze all the core functionality, helping you quickly build a professional-grade e-commerce page with a unified style and outstanding conversion rate.

I. Preparatory work

First you need to install and enable Astra Pro Plug-ins with WooCommerce Plug-in. Enter WordPress Backend, path is Astra > Welcome > Modules, enable WooCommerce module. After that, go toexterior condition > customizable > WooCommerce, start making page style adjustments.

II. Page structure settings

offeringscaptionshore

When the Product Title Area switch is enabled, you can freely control the display of the following content:

• Banner Layout
• Product Title
• Descriptive Information
• breadcrumb navigation

containersopening (chess jargon)

Provide three width options: default, normal, full width. Flexible switching according to the demand, adapt to the overall page style.

a side-bar (in software)opening (chess jargon)

The following options are supported: default, no sidebar, left sidebar, right sidebar. Setting the left or right sidebar can present filtering or navigation features.

Third, the product list display style

Product Card Style

Three styles are offered:

• Style 1: Below the picture in order to display the title, classification, price, rating

• Style 2: "Add to cart" button appears when hovering over an image

• Style 3: Pictures and product information horizontally arranged, clearer visual

Product Arrangement and Display

• Customized columns for desktop, tablet, and mobile devices, respectively

• Setting the number of products displayed per page

• Control the width of the product display area

Page content display type

Store home page display content is optional:

• All Products
• Category Navigation
• Commodity and assortment mix

Category pages also support the same display combination method with a high degree of customization.

IV. Merchandise cards and toolbar contents

Merchandise Card Components

Optional display items include:

• Product Title
• Classifieds
• prices
• user rating
• brief description
• Add to cart button

Click on the icon to control whether it is displayed or not, intuitive operation.

Toolbar content

The toolbar enables the following elements:

• Statistics on total number of commodities
• Sorting function (price, rating, hotness, etc.)
• Filter buttons
• Grid and list view switching

V. Enhanced functionality and interaction details

Quick View

The following interaction forms are available for quickly viewing product information:

• disable
• Displayed on product images
• Click on the image to trigger
• Displayed after the product summary

Pagination and infinite scrolling

Pagination supports number style, circle and square style switching. If infinite scrolling is selected, the following modes can be set:

• Scroll to load more products
• Click "Load More"Button to show products

Button text can be customized according to the brand language.

VI. Additional display options

The page also contains several switches for detail display functions, for example:

• Page title display or not
• crumbNavigation display control
• absorbing sidebar feature
• Filters are displayed as buttons
• Filter Collapseaccordionshowcase
• Scrolling page element loading animation

concluding remarks

pass (a bill or inspection etc) Astra (used form a nominal expression) WooCommerce module, the product display becomes more flexible and clear, to adapt to the needs of various types of e-commerce sites. The above settings can help the overall style of the website is more unified, the layout is more reasonable, and improve the efficiency and clarity of visitors when browsing products.

Related articles

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	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