Styling WooCommerce Single Product Pages with Astra Pro

WooCommerce is a powerful e-commerce platform that combines Astra Pro plugin, merchants can personalize single product pages to enhance site functionality and visual appeal. In this article, we will explain how to use Astra Pro to optimize the design of WooCommerce single product pages.

Installation and activation of the Astra Pro plug-in

First, make sure the following plugins are installed and activated:

• Astra Theme
• Astra Pro Plug-in
• WooCommerce Plugin

start using WooCommerce After the module, go to the Dashboard > Exterior > Astra Optionsand then in the Appearance > Customize > WooCommerce > Single Product Start page customization in.

Product Title Area Settings

Astra Pro Provides rich options to customize the title area of the product page. There is an option to customize the title area of the product page in the Appearance > Customization > WooCommerce > Single product In the middle, adjust the following:

• headline display: Select whether to display the product title.
• Banner Layout: Customize the style of the product banner.
• breadcrumb navigation: Enable breadcrumb navigation to help users easily navigate the page.
• summaries: Show short product descriptions.
• metadata: Display information such as the category or label of a product.

Container Layout Options

Astra Pro Provides three container layout methods to help adjust the layout of product pages:

• Default Layout
• Normal Layout
• Full-width layout

Choose the right layout according to the needs to ensure that the page is visually clean and aesthetically pleasing.

Sidebar Layout

Astra Pro The plugin provides multiple sidebar layout options for product pages:

• Default Layout
• no sidebar
• left sidebar
• right-hand sidebar

Choose the appropriate sidebar layout, or when no sidebar is needed choose the no sidebarThe

Gallery display with image zoom effect

In terms of product image presentation, theAstra Pro Several gallery layouts are available:

• vertical layout
• Horizontal Layout
• First large map
• vertical slide
• Horizontal slider

In addition, it is possible to enable the Image zoom effectThe product image is a large one, allowing the user to zoom in on the product image while hovering the mouse to see more details.

Fixed product images and summaries

Astra Pro Allows the following features to be enabled to enhance page visibility:

• Fixed product images: When scrolling the page, the product image is fixed at the top of the page and remains visible at all times.
• Fixed Product Summary: The product summary will always remain at the top of the page when scrolling the page for easy viewing.

Product navigation and variant presentation

Astra Pro provides the following features for product pages:

• Product Navigation: Users can easily switch between different products to enhance the interactivity of the page.

• Product variants: For products with multiple variants, you can choose to display the variants in a side-by-side or stacked layout.

Product description and related products

pass (a bill or inspection etc) Astra ProMerchants have the flexibility to customize product descriptions and related product displays:

• Product Description Label: Choose how the labels are displayed, including vertical, horizontal, or accordion layouts.

• Related Products: Display related products or up-sell products at the bottom of the product page to enhance users' shopping interest.

Fixed Add to Cart button

start using Fixed Add to Cart button After that, the Add to Cart button will always remain visible no matter where the user scrolls while browsing the page, making it easy to add products to the cart at any time.

summarize

Astra Pro The plug-in is WooCommerce Single product pages offer powerful customization features. From header areas, container layouts, and sidebar settings, to gallery displays, fixed images, and summary features, each option helps merchants create more attractive and functional product pages. These customizations enhance product presentation and increase page interactivity, helping merchants attract more customers and drive more conversions.

Related articles