Product Card Designs
On the shop page of your website, we have introduced the Shop Card Design with the Astra theme which enables you to design your shop page product cards more beautifully. To access the settings, you will need to navigate to Appearance>Customize>Woocommerce. Scroll down to the Shop Card Designs. Here you will find 3 beautiful designs that enhance the overall looks of the shop page.
Design 1: It is the basic standard design that the users had earlier. It displays the product name, categories, price and rating option just below the product image.
Design 2: It enables the side by side view of the product image and product details as mentioned above.
Design 3: This is a modified version of the design 1 where the visitors of your website will see the “Add to Cart” button when they hover over the product image.
Toolbar for WooCommerce shop layout
We have introduced the toolbar options for the shop page which enables more control for the design of the shop page. Here are a few features of the toolbar.
Result Count
When enabled, this option displays the number of items in the shop page.
Filter
This option adds a filter option on top of the shop page to help the visitors find what they are looking for.
Sorting
Sorting option lets you sort the products by popularity, ratings, upload date and price.
Easy List view
Enabling this feature helps in quick switching in the card designs.
Sticky Sidebar
Enabling this feature inside the shop structure option will stick the sidebar while the products are being scrolled.
Here is how it looks on the front end
Collapsible Filter
This particular feature is available under the filter panel layout. Enabling this feature will make the filter collapsible from the top.
This is how it looks like on the front-end
Flexibility with the designs
We have introduced multiple design features that will not only enhance the look but also makes it more user friendly and professional. Here are the key features.
Product Content Alignment
To access this feature you will need to navigate to the design tab and scroll down to the Shop Card Styling section. This feature lets you change the alignment of the product content.
Product Card Padding
The card padding option lets the users create padding around the product cards. See this feature in action below.
Product content background color
We have also added an amazing feature that lets you change the background color of the product content inside the card. You will need to navigate to the design tab and click on the color selector next to the Product Content Background option. Choose the color as per your requirement and the background color of the product content will be changed.
