The shopping cart icon plays a dual role: not only visualizing the status of the product added, but also effectively guiding the user to complete the purchase of the conversion.Astra Pro The plugin extends the WooCommerce feature that supports adding mini carts in different areas (Mini Cart), the short code can be flexibly embedded in any position of the page to achieve personalized layout design needs. The following content will introduce how to set up the mini shopping cart in Astra, includingold header,new builder,short code calland common style adjustments.

Older versions of Astra add shopping cart icon to header

When the site is using Astra's old header structure, the shopping cart icon can be added to the end of the main menu. The way to do this is as follows:

• activate WooCommerce Plug-ins;
• Go to the backend and clickexterior condition > Customize > Header > Primary Menu;
• Find the "Last Item in Menu" item in the menu settings and select WooCommerce;

After the setting is completed, the shopping cart icon is displayed on the far right side of the main menu, which will show the number of products and can jump to the shopping cart page.

New Header Builder Adds Shopping Cart Icon

The new version of Astra provides Header & Footer Builder feature that supports placing shopping cart icons in the main menu area, upper header or lower header. Here is how to use it:

• start using Astra Pro Plug-ins;
• Enable the Header Sections module in the Astra Dashboard;
• Go to Appearance > Customize > Header > Above Header.;
• Select WooCommerce in Section 1 or Section 2;

Once added, the shopping cart icon will be displayed in the designated area, and contents such as icon style, title and amount can be set independently.

Insert shopping cart icon using shortcode

If you need to display the cart icon somewhere on the page, such as in the article content, footer or sidebar, you can use the Astra Pro The short code function provided.

The base short code is:[astra_woo_mini_cart]

The shortcode supports setting the popup box direction, for example:

[astra_woo_mini_cart direction="top left"]

[astra_woo_mini_cart direction="bottom right"]

[astra_woo_mini_cart direction="top right"]

Want to insert a slide-out shopping cart in the page, use:[astra_woo_slide_in_cart]

The above short code can be placed in the Gutenberg Block,Elementor Page, sidebar widget area, or any location that supports shortcodes.

Before using the shortcode, you need to activate the Astra Pro plugin and open the WooCommerce module in Astra Options.

Color Adjustment of Product Quantity

The number of items next to the shopping cart icon may not be displayed due to color matching issues, a common reason is that the color of the number is too close to the background color causing visual confusion.

The treatment is as follows:

• Go to Appearance > Customize > Header Builder > Cart > Design.;
• Find the "Count Color" option;
• Set the color to a higher contrast color;
• Save changes;

This feature has been available since Astra Pro Plugin version 3.5.9 onwards supports the ability to customize the color of numbers to avoid display anomalies.

summarize

Astra Pro (used form a nominal expression) WooCommerce Mini Cart is very flexible and supports adding icons to the header structure or embedding them in any area of the page through short codes. Combined with the icon style and color settings, it can meet the needs of different types of sites for the layout of the shopping process. Proper use of these features can help improve the overall effect of the page and ease of operation.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off