In this document. we will be using the WooCommerece Addon from Astra Pro allow you to design Single Product page of WooCommerce.
Quick Steps on How to Style WooCommerce Store Page Using the WooCommerce Module
Step 1: Make sure you have the Astra Pro Addon and WooCommerce plugin installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the WooCommerce module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
Step 3: Visit customizer [ Appearance > Customize > WooCommerce ] to edit module settings
Gallery Layout
You can set product gallery images in vertical view / horizontal view.
Image Width
You can easily adjust the image width with the slider.
Disable Breadcrumb
You can manage to show/hide the breadcrumbs on the single product page.
Single Product Structure
You can manage to show/hide the following information-
- Title
- Ratings
- Price
- Short Description
- Add To Cart
- Meta
Enable Ajax Add To Cart
Enabling this option will restrict the page from refreshing when a product is added to the cart.
Enable Image Zoom Effect
Enabling this option will zoom the product image on hover. Contrary, if you disable it, the zoom effect will be removed on your product images. This way, your images will remain the same when you hover over them.
Product Navigation
This will allow you to set different designs for product navigation arrows.
Product Description Tabs
It will allow you to show/hide product description tabs. You can also set tabs to display vertical or horizontal.
Related & Up Sell Products
This will allow you to show/hide Related & Up Sell products. You can set a column to display these products. Also, you can choose a number of related products to be displayed on the page.
Parent document –