Why Did This Happen? 

Astra Pro WooCommerce and EDD Modules bring the option to change the default mini cart icon. You can set one of the Astra Pro icons by navigating to the Mini Cart Header element (General tab).

By default, the font color for the number of items in the cart (Product Count) is white. Setting your Cart color to white too will create a situation that the number of items becomes invisible though the number is still actually there (white color on white color).

This is easily solved by setting product Count Color to any color other than white.

How To Set Product Count Color?

In this case, you should additionally set another color for the number of items using the “Count Color” option.

The “Count Color” is available with Astra Pro Addon since version 3.5.9. You can set it up by following these steps:

Step 1 – Login to your website and make sure that your Astra Pro Addon plugin is active;

Step 2 – Navigate to Appearance > Customize > Header Builder > Cart > Design;

Step 3 – Set “Count Color” to another color. Click “Publish” to save changes.

If yes, this article will help you understand why it is happening and how to fix it –

Why?

One of the changes that came with Astra theme version 3.4.0 was – Deprecated the Cart Style ‘None’ & merged it with the existing option ‘Outline’ for WooCommerce and EDD.

What does this mean?

Astra offers an option to add cart in the header. When you add cart, you will observe styling options under Design tab.

Prior to version 3.4, cart had three styling options – None, Outline and Fill. With Astra 3.4, ‘None’ option was deprecated and was merged with ‘Outline’ style. This style adds a border around the cart. So if you have set cart style to none, it will be replaced with outline and will add a border around cart.

This is why you see border around the cart as you update Astra to 3.4

How to fix?

Astra Pro version 3.4.2 comes with a solution for this by providing a new ‘Border Width’ option for the Cart element. With this new option, you will be able to set the width of your Cart border, as well as remove it.

So if you wish to remove this border just set width to zero.

You can visit customizer and go to Header Builder > Cart > Design > Style > Border Width and set it zero.

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.

You can manage the sidebar using the WooCommerce module available with Astra Pro. Please refer document, to begin with, the WooCommerce module.

WooCommerce Addon provides Off Canvas Sidebar option for Shop page. Settings can be found under Appearance > Customize > WooCommerce > Product Catalog.

Off Canvas Sidebar is part of the navigation strategy. The sidebar is initially moved out of the screen and out of view as well. To make the sidebar appear you have to set a trigger in the form of a button, or a link is given. When you click on the trigger, Off Canvas Sidebar appears. This option works very well with all the responsive devices as well.

Since this is a sidebar, you need to set the sidebar using various WordPress widgets. Or you can even add third-party widgets.

Set Off Canvas Sidebar trigger

There are 3 ways to showcase the Off Canvas Sidebar trigger:

Link

Appears in the three-line menu.

Button

Like mentioned before, the default theme color & styling is applied to the button.

Custom Class

This custom functionality helps you to set/place the Off Canvas Sidebar trigger anywhere you wish on the entire website. The trigger for Off Canvas Sidebar can be placed in the header, above the header, footer, or anywhere else as per the requirement.

Here, you need to specify the off canvas sidebar class name in the Custom Class field. This can be any name you want. Now you can use this class name anywhere on your site.

For example, you could add an off canvas sidebar class name you specified to any button on your website. you can add a class name in the advanced tab button settings. This way, the button will become a trigger for your off canvas sidebar.

Note: Custom Class will trigger the off canvas sidebar only on the shop page. It will not trigger it on any other page. For example, if the button with custom class is added to the header. Then clicking on the button will trigger the off canvas sidebar only on the shop page and not on other pages.

Add Widgets To Your Off Canvas Sidebar

After enabling the option, the off-canvas sidebar will not trigger until you add widgets (filters) to it.

For adding widgets got to Appearance > Widgets > Off-Canvas Filters. Simply drag-drop the widgets from the Available Widget option.

Once you add the widgets, you can manage the further customizations from the customizer

You can manage the Quick view which shows product details in a lightbox using the WooCommerce module available with Astra Pro under Shop page settings. Please refer document, to begin with, WooCommerce module.

After activating the addon, the setting can be found under Appearance > Customize > WooCommerce > Product Catalog.

Below are the available settings –

• On Image
• On Image Click
• After Summary

On Image

A strip appears across the image on hover when you choose this option.
Once you click on the Quick View option a lightbox opens with the product’s description.

On Image Click

Unlike “On Image”, no Quick View strip appears on the image hover.
When you click on the image for an instance lightbox opens with the product’s description.

After Summary

A summary is the details of the product like title, price, short description and so on.
When you choose this option, Quick View button appears at the end of the above-mentioned summary.

Stick Add to Cart Button

Enabling this option will stick Add to Cart button and other variables at the bottom of quick view window. If you have long description and number of variables, this option can be used to stick and highlight Add to Cart button. 

Note: Whatever appears in the lightbox comes from the Single Product settings.
So if you wish to show/hide the settings like title, description, add to cart button etc you need to predefine those setting. All these settings will be displayed on Single Product Page as well.

Path for the setting in customizer is Appearance > Customize > WooCommerce > Single Product.

Make sure you have activated the WooCommerce plugin.

To find the setting, from the WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu > Last Item in Menu and choose WooCommerce.

It will display a WooCommerce cart icon at the end of the primary menu.

You can also add the WooCommerce Mini Cart to the Above/Below Header with Astra Pro. Astra Pro’s WooCommerce module provides options to change the cart icon, add styling to it, display cart title and total. Please refer to this document to start working with the WooCommerce module.

These are premium features available with the 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.

Like the primary header, you can add a mini cart to Above Header and Below Header. Make sure Header Sections addon is activated.

To find the setting, from WordPress dashboard navigate to Appearance > Customize > Header > Above Header > Section ( 1/2 ) and choose WooCommerce.

Apart from the header, you might need to display a mini cart icon anywhere on the site. The WooCommerce module provides WooCommerce Mini Cart Shortcode, which allows you to display the mini cart icon anywhere you want:

[astra_woo_mini_cart] 

Refer to the article here for more information.

You can customize Typography options for WooCommerce using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

Activate the WooCommerce Module from Astra Options.

Typography options will be available under Appearance >  Customize > WooCommerce > Product Catalog > Typography and Appearance >  Customize > WooCommerce > Single Product > Typography

Below are the available tabs –

• Base Typography
• Product Catalog
• Single Product

Base Typography

From here you can set the Base Typography of your website’s content and the same would apply to the WooCommerce content.

Product Catalog

1. Product Title: Applies typography to product title on the shop page.
2. Product Price: Applies typography to product price on the shop page.
3. Product Content: Applies typography to product short description on the shop page.

Single Product

1. Title: Applies typography to product title on the single product page.
2. Price: Applies typography to product price on the single product page.
3. Breadcrumb: Applies typography to product breadcrumb on the single product page.
4. Content: Applies typography to the product description on the single product page.

You can customize color and background options for WooCommerce Pages using the WooCommerce module available with Astra Pro. Please refer document, to begin with, WooCommerce module.

Activate the WooCommerce Module from Astra Options.

Colors & Background options will be available under Appearance >  Customize > WooCommerce > Product Catalog and also under Appearance >  Customize > WooCommerce > Single Product

Below are the available tabs –

• Base Colors
• Product Catalog
• Single Product

Base Colors

From here you can apply color to the text (Text Color), and to the links (Link Color) which would apply a color to the five-star rating, Shop page title, Filter link and other links which appear with the products on all pages. Also, the Heading Color will be applied to Product titles.

Product Catalog

1. Product Title Color: Applies color to product title on the shop page.
2. Product Price Color: Applies color to product price on the shop page.
3. Product Content Color: Applies color to product short description and category on the shop page.

Single Product

1. Product Title Color: Applies color to product title on the single product page.
2. Product Price Color: Applies color to product price on the single product page.
3. Product Content Color: Applies color to product description on the single product page.
4. Breadcrumb Color: Applies color to Product Breadcrumb on the single product page.

At the same time, the WooCommerce Addon gives you extended capabilities to style and design your WooCommerce store. With minimal time and effort and powerful customization options, you can make your store more stylish and stand out.

This is a premium feature available with the Astra Pro plugin. To use these add ons, you need to have the Astra theme installed along with the Astra Pro plugin on your website.

Here are steps to activate the add on and explore the premium settings – 

Step 1 –  Make sure you have the Astra Pro and WooCommerce plugin installed and activated.
Step 2 – Activate the WooCommerce addon from Appearance > Astra Options > WooCommerce.

Step 3 – You can now find these settings under Appearance > Customize > WooCommerce.

You will see the various tabs here. 

The WooCommerce plugin itself provides very few customizer settings. The Astra options are combined with WooCommerce’s default options so that you can find everything at one place.  

All tabs and related settings are explained below – 

• General
• Shop 
• Single Product
• Cart Page
• Checkout Page

Related Documents –

• Colors & Background options for WooCommerce
• Ultimate Guide on WooCommerce Shortcodes

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

You can find the settings under Appearance > Customize > Layout > WooCommerce > Product Catalog

Choose Product Layout

Astra has two layout options for your Shop page:

Grid View

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.

List View

Where the image and product related information is displayed side by side.

Shop Columns

You can choose the number of columns to be displayed for your products on the shop page, in Grid View and List View.

Grid View

List View

You have control to choose the number of columns on your responsive devices:

Products Per Page

Just like the Blog posts on the archive page, you have control to decide the number of products on the main shop page.

Shop Pagination

Number

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

Infinite Scroll

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

Scroll

Keeps you scrolling the page.

Click

The Scroll may elongate the page and the 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 – 

• Quick View for WooCommerce Products
• Off Canvas Sidebar for WooCommerce Shop Page