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.
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.
- 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.
- Design 3: It offers a side-by-side view of the product image and product details, providing a more spacious presentation of your products.
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.
Filter
The “Filter” option adds a filter bar at the top of the shop page, making it easier for visitors to find specific products.
Sorting
“Sorting” allows your website users to arrange products by popularity, ratings, upload date, and price, enhancing the shopping experience.
Easy List View
This feature enables quick switching between card designs for added convenience.
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.
