You can style the shop page where all your products are listed. This can be your main shop page or the product archive page.
You can find the settings under Appearance > Customize > Layout > WooCommerce > Shop
Choose Product Style
Astra has two layout options for your Shop page:
Where you can display your shop in a grid style, where the product image is displayed at the top.
Product-related information like price, sale price, category etc is displayed below the image.
Where the image and product related information is displayed side by side.
You can choose the number of columns to be displayed for your products on the shop page, in Grid View and List View.
You have the control over to choose the number of columns on your responsive devices:
Products Per Page
Just like the Blogs posts on the archive page, you have control to decide the number of products on the main shop page.
Product Image Hover Style
Hover styles are the animation effects that you see after hovering or scrolling mouse on the product image.
Along with the swap images option you get animation options like Fade, Zoom, Zoom Fade.
In this option, the default product image on the product page is swapped for option image by clicking or image hover. The option image you provide can be a photo of the same product in different angles, colors, shapes etc.
You can find the setting for the Product Gallery option on the right side of the single product page.
This option helps the buyer to understand more about the products in a quick hover view.
Display Page Title
Enabling this option will display the title of the page.
If you have disabled the page title from page meta settings it will overwrite the above setting.
Breadcrumbs show the current location of the user on the website. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.
You will have to enable this option if you want to display Breadcrumb on your shop page.
This option gives quick information about the total number of products available and displayed.
It adds a drop-down of Default Sorting in the right-hand corner of the page with the following option:
- Sort by popularity
- Sort by average rating
- Sort by newness
- Sort by price: high to low
- Sort by price: low to high
Shop Product Structure
Product structure helps you in giving quick details in a simple and easy way.
This is as good as a Blog Meta settings.
All the information displayed appears from the individual products information.
After enabling this option appears the category which we have selected in the product settings of an individual product.
A title is the name of the product that you set for your individual product.
When a particular buyer, rates your product for the quality, service, delivery or the overall product satisfaction star ratings appear.
You have an option to enable or disable the rating option.
The price of the product that you mention in the individual product section appears here.
If you have entered the sale price, the old price will appear in crossed text way along with new price in bold styling.
If you wish to portray a quick overlay about the product you are selling, you have an option to write this in a Product Short Description panel. Make sure your description is not too elongated.
Add to Cart
This is the call to action button where you make the buyer tend to add the product to the cart for the final purchase. For the marketing strategies, it is always suggested to keep this option enabled on the product/archive page or the single product page.
This option helps you to set the overall alignment of the product view.
You can set the content alignment to Left, Right or Center.
Box Shadow and Box Hover Shadow
Shadows help in enhancing your product page design.
You can add shadow for a box as well as for the mouse rollover.
The Add to cart button helps you to set the horizontal and vertical padding.
The default theme color is applied. If you wish to change this color you can add a Custom CSS for the same.
The number option restricts the number of products on an individual page.
The remaining undisplayed products are divided into further pages
Shop Pagination Style
You can change the change this style to Circle or Square
This option on the product page stands for the unlimited display of products.
The page gets extended as far as you keep adding the products on the product archive page with an infinite scroll.
Event to Trigger Infinite Loading
Keeps you scrolling the page.
The Scroll may elongate the page and viewer may lose interest after scrolling at a certain level. To avoid this choose an option of Click where the Load More button appears.
This button appears after a certain number of products are displayed in rows.
You can change the button text as per your needs.
More Documents –