We have listed down some features of the Product Catalog section which will help you to Structure the Shop WooCommerce page –
This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.
We have seen the WooCommerce integration with Free Astra theme.
WooCommerce Pro Addon gives powerful and exclusive styling options for your WooCommerce store. You can make your store all the more stylish with minimal efforts and simple customization settings.
Note – Make sure you have WooCommerce plugin activated.
Following options are easy to understand, and you will find these options below the Shop Product Structure which on being checked will enable the respective options –
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.
Display Breadcrumb
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.
Display Toolbar
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 latest
- Sort by price: low to high
- Sort by price: high to low
Shop Product Structure
Product structure helps you in giving quick details in a simple and easy way.
This is as good as Blog Meta settings.
All the information displayed appears from the individual product information.
Category
After enabling this option appears the category which we have selected in the product settings of an individual product.
Title
A title is the name of the product that you set for your individual product.
Ratings
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.
Price
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.
Short Description
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.
Note: Did you know you could change the Structure of the Shop Product by dragging and dropping the fields. Watch this video to help you understand –
Product Styling
Content Alignment
This option helps you to set the overall alignment of the product view.
You can set the content alignment to Left, Right or Center.
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.
Swap Images
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.
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.
Button
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.
Visit the following to know about the Shop WooCommerce Page layout settings.