How to Structure the Shop Woocommerce Page with Astra?

No results found. Try again with different words?

Search must be at least 3 characters.

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:

Astra Pro - WooCommerce Shop, Display ToolBar, Astra 3.0+
  • 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.


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.

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.

Astra Pro - WooCommerce Shop, Add to Cart button, Astra 3.0+

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.

Astra Pro - WooCommerce Shop, Allignment, Astra 3.0+

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.

WooCommerce Products

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.

Astra Pro - WooCommerce Shop, Box Shadow, Astra 3.0+


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.

Astra Pro - WooCommerce Shop, Button, Astra 3.0+

Visit the following to know about the Shop WooCommerce Page layout settings.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.