How To Add Woocommerce Mini Cart In Header

by

WooCommerce is a popular e-commerce plugin for WordPress that allows you to sell products and services on your website. One of the most useful features of WooCommerce is the mini cart, which displays the items that a customer has added to their cart in real-time. In this article, we will show you how to add the WooCommerce mini cart to your header.

Step 1: Install and Activate the WooCommerce Plugin

The first step is to install and activate the WooCommerce plugin. If you haven’t already done so, go to the WordPress dashboard, click on “Plugins” in the left-hand menu, and then click on “Add New.” Search for “WooCommerce” and install it. Once installed, activate the plugin.

Step 2: Add a Custom Menu

The next step is to add a custom menu to your header. Go to the WordPress dashboard, click on “Appearance” in the left-hand menu, and then click on “Menus.” Click on “Create a new menu,” give it a name, and then select the pages or posts that you want to include in the menu. Once you have added all the items you want, save the menu.

Step 3: Add the Mini Cart to the Menu

Now that you have a custom menu, it’s time to add the mini cart to it. Go back to the “Menus” page and click on the “Screen Options” button in the top right-hand corner. Check the box next to “Link Target” and then click on “Save.” Now, when you hover over an item in your menu, you will see a drop-down menu with options for “Link Target.” Select “Custom” and enter “#” as the value.

Step 4: Add the Mini Cart Code to Your Theme

The final step is to add the mini cart code to your theme. Go to the WordPress dashboard, click on “Appearance” in the left-hand menu, and then click on “Editor.” Click on “functions.php” and add the following code:

add_action( 'wp_enqueue_scripts', 'woocommerce_header_cart' );
function woocommerce_header_cart() {
    if ( is_user_logged_in() ) {
        wp_enqueue_style( 'woocommerce-style', WC()->plugin_url() . '/assets/css/woocommerce.min.css', array(), WC()->version );
        wp_enqueue_script( 'woocommerce-cart-fragments', WC()->plugin_url() . '/assets/js/frontend/cart-fragments.min.js', array( 'jquery' ), WC()->version, true );
    }
}

Save the changes and you should now see the mini cart in your header.

Conclusion

Adding the WooCommerce mini cart to your header is a great way to improve the user experience on your website. By following these simple steps, you can easily add the mini cart to your header and start displaying real-time updates of your customers’ carts.