No results found. Try again with different words?

Search must be at least 3 characters.

Astra WooCommerce update (version 3.9.0) Shop Page

If you’re looking to improve the design and functionality of your website’s shop page, Astra offers a powerful solution through its Shop Card Designs. These design options provide a means to improve the visual attractiveness of your shop page while improving user engagement.

Astra WooCommerce update (version 3.9.0) Shop Page

Go through the following sections of this document for further details regarding the Shop Card Design.

How to Customize Astra WooCommerce Shop Page

On your website’s shop page, we’ve introduced a feature that allows you to improve the design of your product cards using the Astra theme. These Shop Card Designs offer you the opportunity to make your shop page more visually appealing.

To access these settings, you can follow the below steps:

  • Go to the WordPress dashboard and navigate to “Appearance.”
  • Under “Appearance,” click on “Customize.”
  • In the customization menu, find and select “WooCommerce.”
  • Then, click on “Product Catalog”
  • Scroll down until you see the “Shop Card Design” section. Here, you’ll find three distinct designs to enhance the overall look of your shop page.

What are Astra’s Shop Card Designs

Within your website’s customization options, you can see three distinct Shop Card Designs. Each of these designs offers unique features and visual enhancements to improve your website shop page’s appearance and functionality. Let’s look into each design in detail:

  • Design 1: It is the classic and standard layout that you are already familiar with. It displays the product name, categories, price, and ratings just below the product image.
Astra WooCommerce update (version 3.9.0) Shop Page

  • Design 2: It is a modified version of the classic design where you will see the “Add to Cart” button when hovering over the product image.
Astra WooCommerce update (version 3.9.0) Shop Page

  • Design 3: It offers a side-by-side view of the product image and product details, providing a more spacious presentation of your products.
Astra WooCommerce update (version 3.9.0) Shop Page

Enhanced Control with the Toolbar for WooCommerce Shop Layout

In addition to Shop Card Designs, Astra has come up with a toolbar for the shop page, providing you with greater control over the design and functionality of your shop page.

Here are some of the key features of this toolbar:

Result Count

Enabling this option will display the total number of items on the shop page, helping website visitors understand the size of your product catalog.

Astra WooCommerce update (version 3.9.0) Shop Page

Filter

The “Filter” option adds a filter bar at the top of the shop page, making it easier for visitors to find specific products.

Astra WooCommerce update (version 3.9.0) Shop Page

Sorting

“Sorting” allows your website users to arrange products by popularity, ratings, upload date, and price, enhancing the shopping experience.

Astra WooCommerce update (version 3.9.0) Shop Page

Easy List View

This feature enables quick switching between card designs for added convenience.

Astra WooCommerce update (version 3.9.0) Shop Page

Collapsible Filter

It is available in the filter panel layout, this feature makes the filter section collapsible from the top, saving space and providing a cleaner look.

How to Align Your Astra Shop Page

Astra offers multiple design features that enhance the user-friendliness of your shop page. Here are some of the key design options you can explore:

Product Content Alignment

You can access this feature by going to the design tab and scrolling down to the “Shop Card Styling” section. It allows you to change the alignment of product content.

Product Card Padding

The “Card Padding” option lets you add padding around the product cards, providing a visually pleasing and organized layout.

Product Content Background Color

Astra also allows you to change the background color of the product content within each card.

Simply navigate to the design tab and click on the color selector next to the “Product Background” option and choose the color that suits your website’s style.

With these customizable options, you can create a professional, user-friendly, and visually appealing shop page that meets your specific needs.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form