How to Add WooCommerce Mini Cart in Astra Header and Optimize Shopping Experience

In e-commerce websites, by combining WooCommerce respond in singing Astra theme, you can easily integrate the WooCommerce Mini cartAdding to the old Astra header ensures that the cart is always visible and easy to access.

图片[1]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

Adding WooCommerce Mini Cart to Old Astra Header

Astra Theme provides WordPress with powerful customization features, combined with the WooCommerce plugin, merchants can easily create efficient e-commerce websites. In this article, we will explain how to add WooCommerce Mini Shopping Cart to Astra Older Header to improve the functionality of your website.

Step 1: Enable the WooCommerce Plugin

First, you need to make sure that you have enabled the WooCommerce Plugin. This can be done in Plugins > Installed Plugins Check if the plugin is enabled in the If it is not enabled, click the Enable button.

Step 2: Add WooCommerce Mini Cart to Main Menu

  • Go to Customize Settings: from WordPress Dashboard, enter Appearance > Customize > Header > Main Menu > Last item in menuThe
  • Select WooCommerce: in "Last item on the menu"In the settings, select WooCommerceThis will add the shopping cart icon to the end of the main menu.
图片[2]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

With these settings, the WooCommerce Mini shopping cart will be displayed at the end of the main menu and users can view the cart contents at any time.

Add a WooCommerce Mini cart above or below the header with Astra Pro

If the Astra Pro plug-in (software component)You can set the WooCommerce Mini shopping cart added to the header above maybe world of mortalsThis improves the usability and visualization of the page.

Enabling the Astra Pro Plug-in

First, make sure you have installed and enabled the Astra Pro Plug-inThe WooCommerce module is enabled.

Add Mini cart above or below header

  • Enable header section add-ons: Enter Appearance > Customize > Header > Above Header > Section (1/2)Selection WooCommerce to add a Mini cart.
  • Add Mini cart below header: Use the same method to add the Mini cart to the section below the header.
图片[3]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

This way, the WooCommerce Mini shopping cart will always be visible, making it easy for users to view the items in their cart at any time.

Display WooCommerce Mini cart anywhere with shortcode

In addition to adding to the header, you can use the WooCommerce Mini Shopping Cart Shortcode Display the shopping cart icon anywhere on your website. Simply add the following shortcode to a page, post or widget:[astra_woo_mini_cart]

Ensure that it is enabled Astra Pro respond in singing WooCommerce ModuleThe short code will work correctly and will display the Mini cart icon in the selected location.

Enabling Quick Look for WooCommerce Products

The Astra Pro plug-in also provides Quick Look function, users can view product details in the lightbox without having to jump to a separate product page.

Quick View Options:

  • Show on image: Display a quick view bar when hovering over a product image and click to bring up a lightbox to view product details.
  • Click on the image to view: Click on a product image to display product details directly in the lightbox.
  • Displayed after the summary: The Quick View button is displayed after the product's summary information.
图片[4]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

enabling Fixed Add to Cart buttonThe "Add to Cart" button is always visible in the Quick View window, making it easier to shop.

Setting Position:

  • switch to Appearance > Customization > WooCommerce > Single product Set these options.
图片[5]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

Enabling Off-Canvas Sidebar on WooCommerce Store Pages

Astra Pro The plugin also provides Off-Canvas a side-bar (in software) Feature for store pages with large-scale product catalogs. When this feature is enabled, the sidebar is hidden by default and will be shown when the user clicks the trigger button.

How to enable Off-Canvas sidebar:

  • Setting position: Enter Appearance > Customize > WooCommerce > Product CatalogsThe Off-Canvas sidebar is enabled.
  • Select Trigger Type: Optionally, the display of the sidebar can be triggered by a link, button or custom class.
    • link (on a website): Triggers are displayed via a three-line menu.
    • buttons: Displayed as a button trigger.
    • Custom Classes: Triggers can be added anywhere on the site, such as in the header or footer.
图片[6]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

Add widgets to the Off-Canvas sidebar:

In order to make the sidebar function properly, you need to add some widgets (such as filters) to it. Enter the Appearance > Widgets > Store Filter, drag the desired gadget to the sidebar.

图片[7]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

After adding the gadget, you can add a new gadget by Customized panels Make further adjustments to style and functionality.

图片[8]-如何在旧版 Astra 页眉中添加 WooCommerce Mini 购物车并优化购物体验

summarize

leverage Astra Pro plug-in (software component)The businessman can easily put the WooCommerce Mini Shopping Cart Add to the main menu, above or below the header, or even display anywhere on the site. Combine Quick View Function respond in singing Off-Canvas SidebarThese features provide users with a more convenient way to shop, while enhancing the interactivity of the website. With these settings, merchants can better optimize the page layout to attract more customers and improve the conversion rate.

Related articles


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: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos107 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments