Structuring Shop WooCommerce Page

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.

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.

Not the solution you are looking for? Check other articles, or open a support ticket.