{"id":202759,"date":"2022-02-12T03:59:41","date_gmt":"2022-02-12T06:59:41","guid":{"rendered":"https:\/\/quadlayers.com\/?p=202759"},"modified":"2022-02-24T15:58:25","modified_gmt":"2022-02-24T18:58:25","slug":"create-woocommerce-mini-cart","status":"publish","type":"post","link":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/","title":{"rendered":"How to Create a WooCommerce Mini Cart: 3 Methods"},"content":{"rendered":"<p>Are you looking for an easy way <strong>to set yp a WooCommerce mini cart<\/strong>? If your checkout experience is sluggish and repetitive, it can affect your customer\u2019s shopping experience. Improving the flow of your checkout process is an integral part of improving your lead conversions and a mini cart can be a great solution for it.<\/p>\n<p>So to help you add one to your website, here&#8217;s a guide on <strong>how to create a WooCommerce mini cart.<\/strong> But first, let\u2019s take a look at what exactly is a mini cart and why you might need to use one.<\/p>\n<h2>What is a WooCommerce mini cart?<\/h2>\n<p>Your WooCommerce Mini cart is just a small form of your actual WordPress cart page. It contains the products added to your cart along with some more details. The contents of the mini cart depend on your active WordPress theme but they generally include:<\/p>\n<ul>\n<li>Your products list<\/li>\n<li>Subtotal<\/li>\n<li>Product thumbnails<\/li>\n<li>Product quantity<\/li>\n<\/ul>\n<p>Regardless of the details your WooCommerce mini cart shows, it is a crucial part of your customer\u2019s user experience while browsing your WooCommerce store. It&#8217;s an accessible tool that your customers can use to move to the checkout page directly from any part of your website and helps in keeping track of the cart items.<\/p>\n<p>Even we use the mini cart at <a href=\"http:\/\/quadlayers.com\">QuadLayers<\/a>. If you add a product to the cart, you can view the mini cart by hovering on the cart icon in the header menu.<\/p>\n<p>If you look at the screenshot below, we have added the product <a href=\"https:\/\/quadlayers.com\/portfolio\/woocommerce-checkout-manager\/\" target=\"_blank\" rel=\"noopener\">WooCommerce Checkout Manager<\/a> to the cart. This is also displayed in the mini cart along with the quantity and subtotal.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-202904\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers-1024x551.jpg\" alt=\"create woocommerce mini cart quadlayers\" width=\"840\" height=\"452\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers-1024x551.jpg 1024w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers-300x161.jpg 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers-768x413.jpg 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers-600x323.jpg 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-quadlayers.jpg 1217w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<h2>Why create a Mini Cart for your WooCommerce website?<\/h2>\n<p>By default, your WooCommerce theme might come with its own WooCommerce mini cart. And even if it does, its position and style itself may not be fully customizable from your theme settings. Furthermore, it also may not be in the perfect place for your mini cart.<\/p>\n<p>Some of our readers might consider adding a floating mini cart whereas others might add it to the sidebar or the footer. There are various possible mini cart approaches that you might want to consider using. Moreover, you might also need to add more content to your mini carts such as shipping prices, additional cart details, custom messages, and more.<\/p>\n<p>The ease of comfort when using your cart can also be important for you and your customers to improve your <strong>actual sales<\/strong>. A customized, sales-ready checkout that perfectly fits your website aesthetic can be a game-changer for your WooCommerce website. So if you want to create and add your custom mini cart to different pages of your website, then look no further!<\/p>\n<h2>How to create a WooCommerce Mini Cart in WordPress<\/h2>\n<p>To create and add your WooCommerce Mini cart<strong>,<\/strong> you can use <strong>3 different methods<\/strong>:<\/p>\n<ol>\n<li>Adding a Cart Widget<\/li>\n<li>Using a WordPress Plugin<\/li>\n<li>Programmatically<\/li>\n<\/ol>\n<p>Let&#8217;s take a look at each method and the steps involved in all of them, starting with the default method of using WordPress Widgets.<\/p>\n<h3>1. Create a WooCommerce Mini Cart using WordPress Widgets<\/h3>\n<p>By default, you can create WooCommerce mini carts using the<strong>\u00a0WooCommerce cart widget.<\/strong> Since we&#8217;re using a widget, it can be positioned in only the available widget areas of the theme. The most common areas include:<\/p>\n<ul>\n<li>Widgets sidebar<\/li>\n<li>Below Header<\/li>\n<li>Footers<\/li>\n<\/ul>\n<p>There can be more widget areas depending on your theme. But please make sure that you use one of the <a href=\"https:\/\/quadlayers.com\/best-woocommerce-themes-for-wordpress\/\" target=\"_blank\" rel=\"noopener\">WooCommerce compatible themes<\/a> as well.<\/p>\n<h4>1.1. Select the Widget Area<\/h4>\n<p>To add a cart widget, you will need to select a widget area first. So open your WP Admin Dashboard and go to <strong>Appearance &gt; Widgets<\/strong>. Then, you choose the widget area for your mini cart.<\/p>\n<p>For our demo, we\u2019ll be using the <strong>Sidebar<\/strong>. But you can use the widget area that is most convenient for you.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202768 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-widgets-page.gif\" alt=\"create woocommerce mini cart - widgets page\" width=\"1276\" height=\"812\" \/><\/p>\n<h4>1.2. Add Cart Widget to the Widget Area<\/h4>\n<p>After you select the widget area for your mini cart, click on the <strong>+ button<\/strong> to add the widget.\u00a0Use the search bar to search for<strong> Cart<\/strong> and click on it to <strong>add the widget<\/strong>.<\/p>\n<p>If you can&#8217;t see the widget, please make sure that you have properly <a href=\"https:\/\/quadlayers.com\/how-to-set-up-woocommerce\/\" target=\"_blank\" rel=\"noopener\">set up WooCommerce<\/a> on your website.<\/p>\n<p>Here, you can also enable or disable the <strong>Hide if cart is empty <\/strong>option. We recommend you enable it because your sidebar cart will be hidden if your customer\u2019s cart is empty. This will also make your website look more functional.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-202769\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-1024x242.png\" alt=\"create woocommerce mini cart - added cart screenshot\" width=\"840\" height=\"199\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-1024x242.png 1024w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-300x71.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-768x181.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-1536x363.png 1536w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot-600x142.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-cart-screenshot.png 1737w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>Once you finish adding the cart widget, <strong>Update<\/strong> your widgets\u00a0to save your changes. Now, your sidebar mini cart should show up on your front end.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-202770\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar-1024x607.png\" alt=\"\" width=\"840\" height=\"498\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar-1024x607.png 1024w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar-300x178.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar-768x455.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar-600x356.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-mini-cart-sidebar.png 1139w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>Of course, you can also add your mini cart to a different widget area as well. Simply select the location under the widgets page and you can easily add the widget below your <a href=\"https:\/\/quadlayers.com\/create-custom-header-widget-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">header<\/a> or on the footer.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-202771\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart-1024x531.png\" alt=\"create woocommerce mini cart - header cart\" width=\"840\" height=\"436\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart-1024x531.png 1024w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart-300x155.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart-768x398.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart-600x311.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-header-cart.png 1297w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>While this is the<strong> easiest way<\/strong> to create your WooCommerce mini cart, it comes with a <strong>fair number of limitations<\/strong>. For one, there are <strong>no customizations<\/strong> for your mini cart. You are very limited in terms of how your mini cart looks like and how it&#8217;s accessed by your customers.<\/p>\n<p>The mini cart positions are limited to the widget areas provided by your theme. Additionally, features like pop-up mini carts or custom fields to the cart are also not available for the customers or the website owner. So, if you want a more customizable mini cart we recommend you keep reading and consider the following methods instead.<\/p>\n<h3>2. Create a WooCommerce Mini Cart using a WordPress Plugin<\/h3>\n<p>Using a WordPress plugin is one of the easiest ways to curate your cart experience. You can ensure that your customers can easily check out at any time with ease with the help of plugins. They also allow you to simplify the checkout experience of your website.<\/p>\n<p>The mini cart plugins provide nifty features to promote your product sales and improve your lead generation. For example:<\/p>\n<ul>\n<li>You can enable hovering cart icons and pop-ups for the mini cart. So your customers can access them at any time while keeping the rest of the shop content clean and distraction-free.<\/li>\n<li>Lots of cart and product elements can be added to the mini cart itself. For example, additional product information, changing the quantity, editing the cart subtotal and total display, and many more.<\/li>\n<li>With plugins, you can add some smart features like adding coupons directly from mini cart, dedicated featured products, and recommended products suggestions.<\/li>\n<\/ul>\n<p>So, we highly recommend using a WordPress plugin dedicated to adding and customizing your WooCommerce mini cart.<\/p>\n<p>For our demo, we\u2019ll be using the <a href=\"https:\/\/wordpress.org\/plugins\/woo-cart-all-in-one\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\"><strong>Woocommerce Cart All in One plugin<\/strong><\/a>. It is one of the best plugins to create a mini cart on your website. The plugin is also very easy to use and has all the features that you need like a mini cart popup, sidebar cart, or menu cart customization options.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202772\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one.png\" alt=\"\" width=\"700\" height=\"313\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one.png 942w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-300x134.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-768x343.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-600x268.png 600w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>We also have a list of the <a href=\"https:\/\/quadlayers.com\/woocommerce-mini-cart-plugins\/\" target=\"_blank\" rel=\"noopener\">best WooCommerce mini cart plugins<\/a>. If you want to use any other plugin, you can have a look at it too.<\/p>\n<h4>2.1. Install and Activate the Plugin<\/h4>\n<p>Let\u2019s start by installing and activating the plugin.<\/p>\n<p>Open your <strong>WP Admin Dashboard<\/strong> and then go to <strong>Plugins &gt; Add New<\/strong> on your sidebar.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202774 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-install-plugin-page.gif\" alt=\"create woocommerce mini cart - install plugin page\" width=\"1097\" height=\"812\" \/><\/p>\n<p>Then, use the search bar on the top right to search for <strong>Cart All In One For WooCommerce<\/strong>.<\/p>\n<p>After you find the plugin, click on <strong>Install Now<\/strong> to install the plugin. Finally, <strong>Activate<\/strong> the plugin once it&#8217;s installed.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202775 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-install-and-activate-plugin.gif\" alt=\"create woocommerce mini cart - install and activate plugin\" width=\"1716\" height=\"530\" \/><\/p>\n<p>If you want to use a premium plugin, you&#8217;ll have to upload and install it manually. Have a look at our detailed guide to <a href=\"https:\/\/quadlayers.com\/install-wordpress-plugin-manually\/\" target=\"_blank\" rel=\"noopener\">install a WordPress plugin manually<\/a> for more information.<\/p>\n<p>Now, we need to configure the plugin to enable your WooCommerce mini cart.<\/p>\n<h4>2.2. Configure the Cart All in One For WooCommerce Plugin<\/h4>\n<p>To configure the plugin\u2019s WooCommerce mini cart, click on the <strong>Cart All in One tab<\/strong> on your <strong>WP Admin Dashboard<\/strong>. This will open the plugin\u2019s Dashboard page.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202776 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one.gif\" alt=\"create woocommerce mini cart - cart all in one\" width=\"1022\" height=\"763\" \/><\/p>\n<p>In the free version of the plugin, you can enable a <strong>Sidebar<\/strong> <strong>Mini cart<\/strong> or a<strong> Menu mini cart<\/strong>. You can also add and configure an AJAX Add to Cart button but let\u2019s focus on only the mini cart options for now.<\/p>\n<p>To activate the mini cart popup on your website, open the <strong>Sidebar Cart <\/strong>and\u00a0click on<strong> Enable<\/strong>. You can also use the<strong> Mobile Enable<\/strong> option to enable\/disable the mini cart popup on mobile devices. Finally, <strong>Save<\/strong> your changes.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202778\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart.png\" alt=\"\" width=\"800\" height=\"807\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart.png 843w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart-298x300.png 298w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart-150x150.png 150w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart-768x774.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart-600x605.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart-100x100.png 100w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Now, go and reload the front end of your website. You should see your new mini cart icon on your web page. You can just click on it to open your mini cart.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202780 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-all-in-one-sidebar-cart.gif\" alt=\"\" width=\"1022\" height=\"928\" \/><\/p>\n<p>Additionally, you can also add a <strong>menu cart<\/strong> to any of your menus. Just open the <strong>Menu Cart<\/strong> tab and <strong>Enable <\/strong>it just like the previous steps. You can also enable it on the <a href=\"https:\/\/quadlayers.com\/match-desktop-and-mobile-menus\/\" target=\"_blank\" rel=\"noopener\">mobile menus<\/a> if needed.<\/p>\n<p>Next, you need to add the WordPress menus where you want to display the menu cart on your website. Simply choose the menus where you\u2019d like to add to your WooCommerce mini cart in the <strong>Menus<\/strong> field. Then click on<strong> Save<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202779\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-cart.png\" alt=\"\" width=\"787\" height=\"563\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-cart.png 787w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-cart-300x215.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-cart-768x549.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-cart-600x429.png 600w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><\/p>\n<p>You should now see your menu mini cart on your website. It will be added to the menus that you selected for the mini cart.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202781\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-mini-cart.png\" alt=\"\" width=\"800\" height=\"360\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-mini-cart.png 884w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-mini-cart-300x135.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-mini-cart-768x346.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-menu-mini-cart-600x270.png 600w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h4>2.3. Customize your WooCommerce Mini Cart using the plugin<\/h4>\n<p>Customization is a key feature with the <strong>Cart All in One plugin<\/strong>. You can freely customize your sidebar cart as well as the menu cart. This includes colors, mini cart styles, positions, custom animations, mini cart icons, sidebar menu styles, and much more.<\/p>\n<p>To access the customization options, go to <strong>Appearance &gt; Customize<\/strong> on your WP Admin Dashboard. You will be redirected to your theme customizer. Here, click on <strong>Cart All in One For WooCommerce<\/strong> and you should see all the mini cart customization options.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202782\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-customization.gif\" alt=\"create woocommerce mini cart - cart customization\" width=\"1022\" height=\"794\" \/><\/p>\n<p>For this demo, we&#8217;ll customize the Sidebar Cart. So click<strong>\u00a0Sidecart Cart<\/strong> and you should see all the options for it. For now, we&#8217;ll enable a smaller mini cart using the <strong>Display Sidebar<\/strong> content option and change the <strong>Sidebar cart position.<\/strong><\/p>\n<p>But you can further customize your mini cart using these options depending on how it suits your website. There is still a lot to edit like interaction with the cart icon itself so the mini cart appears when you hover the icon, customize the loading icon, and many more.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202783 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-cart-customization-style.gif\" alt=\"create woocommerce mini cart - cart customization style\" width=\"1901\" height=\"794\" \/><\/p>\n<p>Once you\u2019re done with your changes, click on <strong>Publish<\/strong> save them. You&#8217;ll be able to see all these customizations of your mini cart on your website.<\/p>\n<p>And that\u2019s the basic gist of customizing your mini cart using the plugin. If you want to learn more about all the customization options provided by the plugin we highly recommend going through their <a href=\"https:\/\/docs.villatheme.com\/?item=woocommerce-cart-all-in-one\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a><strong><a href=\"https:\/\/docs.villatheme.com\/?item=woocommerce-cart-all-in-one\" target=\"_blank\" rel=\"noopener noreferrer\">.<\/a><\/strong><\/p>\n<h3>3) Create a WooCommerce Mini Cart Programmatically<\/h3>\n<p>Let&#8217;s say you\u2019d rather not use a plugin to add your WooComerce Mini cart to maintain a light framework of your website. Then, you can also choose to create one programmatically instead.<\/p>\n<p>This will require you to create a <strong>custom shortcode<\/strong> using a custom function and paste it to your theme\u2019s <strong>functions.php<\/strong> file. Then, you can use the shortcode on any part of your website or even add it to any of your WordPress or <a href=\"https:\/\/quadlayers.com\/customize-woocommerce-templates\/\" target=\"_blank\" rel=\"noopener\">WooCommerce template<\/a> files to directly add the WooCommerce mini cart.<\/p>\n<p>Since we will be changing some of the core files, it&#8217;s best that you <a href=\"https:\/\/quadlayers.com\/how-to-backup-a-wordpress-site\/\" target=\"_blank\" rel=\"noopener\">backup your website<\/a> and also <a href=\"https:\/\/quadlayers.com\/create-a-child-theme-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">create a child theme<\/a> programmatically or by using one of the <a href=\"https:\/\/quadlayers.com\/best-child-theme-plugins-wordpress\/\" target=\"_blank\" rel=\"noopener\">child theme plugins<\/a>. This ensures that you won&#8217;t lose your custom codes when you <a href=\"https:\/\/quadlayers.com\/update-a-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">update the WordPress theme<\/a>.<\/p>\n<h4>3.1. Add the Custom Shortcode to your Theme Functions<\/h4>\n<p>We&#8217;ll add the custom codes in the theme files of your website from the theme file editor. If you are not fully comfortable about adding codes to WooCommmerce, we recommend going through <a href=\"https:\/\/quadlayers.com\/add-custom-code-to-woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">this article<\/a> first.<\/p>\n<p>Once you\u2019re ready, open your Theme editor from <strong>Appearance &gt; Theme File Editor<\/strong> on your <strong>WP Admin Dashboard<\/strong>. Use the theme files sidebar on the right and click on <strong>functions.php<\/strong>. This will open the functions.php file on your Theme editor.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202784 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-functions-php.gif\" alt=\"create woocommerce mini cart - functions php\" width=\"1900\" height=\"618\" \/><\/p>\n<p>Now, paste the following code in your theme editor:<\/p>\n<pre>function custom_mini_cart() {\r\necho '&lt;a href=\"#\" class=\"dropdown-back\" data-toggle=\"dropdown\"&gt; ';\r\necho '&lt;i class=\"fa fa-shopping-cart\" aria-hidden=\"true\"&gt;&lt;\/i&gt;';\r\necho '&lt;div class=\"basket-item-count\" style=\"display: inline;\"&gt;';\r\necho '&lt;span class=\"cart-items-count count\"&gt;';\r\necho WC()-&gt;cart-&gt;get_cart_contents_count();\r\necho '&lt;\/span&gt;';\r\necho '&lt;\/div&gt;';\r\necho '&lt;\/a&gt;';\r\necho '&lt;ul class=\"dropdown-menu dropdown-menu-mini-cart\"&gt;';\r\necho '&lt;li&gt; &lt;div class=\"widget_shopping_cart_content\"&gt;';\r\nwoocommerce_mini_cart();\r\necho '&lt;\/div&gt;&lt;\/li&gt;&lt;\/ul&gt;';\r\n\r\n}\r\nadd_shortcode( 'quadlayers-mini-cart', 'custom_mini_cart' );<\/pre>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202785\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function.png\" alt=\"\" width=\"780\" height=\"785\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function.png 780w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function-298x300.png 298w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function-150x150.png 150w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function-768x773.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function-600x604.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-shortcode-function-100x100.png 100w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>After you add the code, click on <strong>Update<\/strong> <strong>File<\/strong>. This will create a custom shortcode titled <strong>\u2018[quadlayers-mini-cart]\u2019<\/strong> for your website. Now, you can use this shortcode on any post, page, or widget to add your custom WooCommerce Mini Cart.<\/p>\n<h4>3.2. Use the Shortcode in a WooCommerce Template<\/h4>\n<p>You can also use the following code snippet to add your custom mini cart to any theme template file or WooCommerce templates.<\/p>\n<pre>&lt;?php echo do_shortcode('[quadlayers-mini-cart]'); ?&gt;<\/pre>\n<p>For example, let&#8217;s add this code to your WooCommerce product archive template file. To open your WooCommerce template file, go to<strong> Plugins &gt; Plugin File Editor\u00a0<\/strong>from your WordPress dashboard.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202786 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-file-editor.gif\" alt=\"\" width=\"1117\" height=\"758\" \/><\/p>\n<p>Then, use the <strong>Select Plugin to Edit<\/strong> option on the top right and choose <strong>WooCommerce<\/strong> and click on<strong> Select.<\/strong> Using the Plugin Files menu, click on <strong>templates <\/strong>&gt; <strong>archive-product.php.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202787\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-select-WooCommerce-product-template.gif\" alt=\"\" width=\"487\" height=\"758\" \/><\/p>\n<p>Next, add the following line of code to any appropriate part of the template.<\/p>\n<pre>echo do_shortcode('[quadlayers-mini-cart]');<\/pre>\n<p>For our demo, we\u2019ll be adding the line of code under the <code><strong>do_action( 'woocommerce_before_main_content' )<\/strong>;<\/code> line. But you can add the snippet on any of the template files and wherever necessary.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202788\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-woocommerce-shortcode.png\" alt=\"\" width=\"838\" height=\"605\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-woocommerce-shortcode.png 838w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-woocommerce-shortcode-300x217.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-woocommerce-shortcode-768x554.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-plugin-woocommerce-shortcode-600x433.png 600w\" sizes=\"(max-width: 838px) 100vw, 838px\" \/><\/p>\n<p>Finally, <strong>update the file<\/strong> after you have added the codes in the plugin editor. The mini-cart will show up on your designated <a href=\"https:\/\/quadlayers.com\/create-woocommerce-pages\/\" target=\"_blank\" rel=\"noopener\">WooCommerce pages<\/a>. In our case, it&#8217;s the Shop\/Product Archive page.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-202789\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart-1024x748.png\" alt=\"\" width=\"840\" height=\"614\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart-1024x748.png 1024w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart-300x219.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart-768x561.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart-600x438.png 600w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-custom-template-cart.png 1120w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>This approach will add your mini cart to the template. However, the mini cart <strong>may not look exactly the way you want<\/strong> and might require additional styling using your theme\u2019s file stylesheet. So, this method is recommended only if you\u2019re used to coding and have a fair bit of knowledge to add PHP and <a href=\"https:\/\/quadlayers.com\/add-css-to-wordpress\/\" target=\"_blank\" rel=\"noopener\">CSS to WordPress<\/a>.<\/p>\n<h3>Bonus: How to skip cart page in WooCommerce<\/h3>\n<p>If you want your customers to have a quicker checkout process, you can also choose to <strong>skip the cart page<\/strong> entirely. As the mini cart is already provided to your customers, there&#8217;s not much need for the cart page. So, you can redirect your customers straight to the <a href=\"https:\/\/quadlayers.com\/customize-woocommerce-checkout-page\/\" target=\"_blank\" rel=\"noopener\">checkout page<\/a> when they want to make a purchase.<\/p>\n<p>You can do so by either using a dedicated plugin or by using a custom function.\u00a0For now, we\u2019ll be covering how you can skip the cart page programmatically.<\/p>\n<p>But before you proceed, you need to go to <strong>WooCommerce &gt; Settings<\/strong> from your WP dashboard and open the <strong>Products<\/strong> tab. Under the <strong>General<\/strong> options, disable both <strong>Add to Cart Behavior options<\/strong>. This ensures that there\u2019s no interference with our custom function.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202790\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-behavior.png\" alt=\"\" width=\"840\" height=\"720\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-behavior.png 933w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-behavior-300x257.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-behavior-768x659.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-behavior-600x514.png 600w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/p>\n<p>Now, open your Child Theme\u2019s functions.php file once again using the same step as above. Simply go to the theme editor from <strong>Appearance &gt; Theme File Editor<\/strong> and click on the <strong>functions.php\u00a0<\/strong>file.<\/p>\n<p>Then, paste the following code snippet here.<\/p>\n<pre>add_filter('add_to_cart_redirect', 'ql_skip_cart_page');\r\nfunction ql_skip_cart_page () {\r\nglobal $woocommerce;\r\n$redirect_checkout = $woocommerce-&gt;cart-&gt;get_checkout_url();\r\nreturn $redirect_checkout;\r\n}<\/pre>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-202791\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-redirect.png\" alt=\"\" width=\"825\" height=\"513\" srcset=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-redirect.png 825w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-redirect-300x187.png 300w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-redirect-768x478.png 768w, https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-add-to-cart-redirect-600x373.png 600w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/p>\n<p>Now, every time your customers add a product to your cart, they\u2019ll be directly taken to the checkout page instead of their <a href=\"https:\/\/quadlayers.com\/customize-woocommerce-cart-page\/\" target=\"_blank\" rel=\"noopener\">cart page<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-202792 size-full\" src=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-added-to-cart-redirect.gif\" alt=\"\" width=\"1054\" height=\"703\" \/><\/p>\n<p>To simplify this process, you can also use a plugin like <a href=\"https:\/\/quadlayers.com\/portfolio\/woocommerce-direct-checkout\/\" target=\"_blank\" rel=\"noopener\">Direct Checkout for WooCommerce<\/a>. If you want to learn about it and why you should consider using it, you can check out our dedicated guide <a href=\"https:\/\/quadlayers.com\/skip-cart-page-in-woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">here.<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>And that ends our guide on how to<strong> create a WooCommerce mini cart.<\/strong> Setting up and customizing WooCommerce Mini Cart isn\u2019t a tedious process and you can choose to use different methods to do so. Let\u2019s summarize the methods we\u2019ve used in today\u2019s guide to add and customize our WooCommerce Mini Cart:<\/p>\n<ul>\n<li>Using cart widgets<\/li>\n<li>With a dedicated WordPress plugin<\/li>\n<li>Programmatically using a custom shortcode and template files<\/li>\n<\/ul>\n<p>If you\u2019re not sure which process to use, we highly recommend <strong>using a plugin<\/strong> to create your WooCommerce mini cart. Not only is this method safer and easier, but you also get tons of dedicated customization and personalization option for your mini cart. If you\u2019re a WordPress beginner and want to add a WooCommerce mini-cart with minimal limitations, we highly recommend you use a dedicated plugin.<\/p>\n<p>Furthermore, if you\u2019re looking for additional means to shorten your checkout process and improve your sales why don\u2019t you go through some of our other articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/quadlayers.com\/plugins-to-customize-woocommerce-cart-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best Plugins to Customize WooCommerce Cart Page<\/a><\/li>\n<li><a href=\"https:\/\/quadlayers.com\/create-woocommerce-one-page-checkout\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to create WooCommerce one page checkout<\/a><\/li>\n<li><a href=\"https:\/\/quadlayers.com\/woocommerce-direct-checkout-link\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to create a WooCommerce direct checkout link<\/a><\/li>\n<\/ul>\n<p>So can you add a mini cart to your website now? Or have you already added it? We will be glad to know about it in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for an easy way to set yp a WooCommerce mini cart? If your checkout experience is sluggish [&hellip;]<\/p>\n","protected":false},"author":5092,"featured_media":202794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2218],"tags":[12760,1262],"coauthors":[2129,8588],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.1 (Yoast SEO v22.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create WooCommerce Mini Cart : Using 3 Different Methods<\/title>\n<meta name=\"description\" content=\"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a WooCommerce Mini Cart: 3 Methods\" \/>\n<meta property=\"og:description\" content=\"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins\" \/>\n<meta property=\"og:url\" content=\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\" \/>\n<meta property=\"og:site_name\" content=\"QuadLayers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/quadlayers\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-12T06:59:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T18:58:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"804\" \/>\n\t<meta property=\"og:image:height\" content=\"402\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"sijal, sajan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@quadlayers\" \/>\n<meta name=\"twitter:site\" content=\"@quadlayers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"sijal, sajan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\"},\"author\":{\"name\":\"sijal\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/a4cbf70ef1267424da1f4c12383b6f8f\"},\"headline\":\"How to Create a WooCommerce Mini Cart: 3 Methods\",\"datePublished\":\"2022-02-12T06:59:41+00:00\",\"dateModified\":\"2022-02-24T18:58:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\"},\"wordCount\":2768,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/quadlayers.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png\",\"keywords\":[\"create mini cart\",\"woocommerce\"],\"articleSection\":[\"WooCommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\",\"url\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\",\"name\":\"How to Create WooCommerce Mini Cart : Using 3 Different Methods\",\"isPartOf\":{\"@id\":\"https:\/\/quadlayers.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png\",\"datePublished\":\"2022-02-12T06:59:41+00:00\",\"dateModified\":\"2022-02-24T18:58:25+00:00\",\"description\":\"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins\",\"breadcrumb\":{\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage\",\"url\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png\",\"contentUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png\",\"width\":804,\"height\":402},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/quadlayers.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a WooCommerce Mini Cart: 3 Methods\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/quadlayers.com\/#website\",\"url\":\"https:\/\/quadlayers.com\/\",\"name\":\"QuadLayers\",\"description\":\"Your WordPress starting point\",\"publisher\":{\"@id\":\"https:\/\/quadlayers.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/quadlayers.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/quadlayers.com\/#organization\",\"name\":\"QuadLayers\",\"url\":\"https:\/\/quadlayers.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg\",\"contentUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg\",\"width\":285,\"height\":285,\"caption\":\"QuadLayers\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/quadlayers\",\"https:\/\/x.com\/quadlayers\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/a4cbf70ef1267424da1f4c12383b6f8f\",\"name\":\"sijal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/image\/817c688af33c2da23da150788758ab57\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/46365cacee215a0f1767eaccb4ed5a4e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/46365cacee215a0f1767eaccb4ed5a4e?s=96&d=mm&r=g\",\"caption\":\"sijal\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create WooCommerce Mini Cart : Using 3 Different Methods","description":"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a WooCommerce Mini Cart: 3 Methods","og_description":"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins","og_url":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/","og_site_name":"QuadLayers","article_publisher":"https:\/\/www.facebook.com\/quadlayers","article_published_time":"2022-02-12T06:59:41+00:00","article_modified_time":"2022-02-24T18:58:25+00:00","og_image":[{"width":804,"height":402,"url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png","type":"image\/png"}],"author":"sijal, sajan","twitter_card":"summary_large_image","twitter_creator":"@quadlayers","twitter_site":"@quadlayers","twitter_misc":{"Written by":"sijal, sajan","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#article","isPartOf":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/"},"author":{"name":"sijal","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/a4cbf70ef1267424da1f4c12383b6f8f"},"headline":"How to Create a WooCommerce Mini Cart: 3 Methods","datePublished":"2022-02-12T06:59:41+00:00","dateModified":"2022-02-24T18:58:25+00:00","mainEntityOfPage":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/"},"wordCount":2768,"commentCount":2,"publisher":{"@id":"https:\/\/quadlayers.com\/#organization"},"image":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png","keywords":["create mini cart","woocommerce"],"articleSection":["WooCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/","url":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/","name":"How to Create WooCommerce Mini Cart : Using 3 Different Methods","isPartOf":{"@id":"https:\/\/quadlayers.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage"},"image":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png","datePublished":"2022-02-12T06:59:41+00:00","dateModified":"2022-02-24T18:58:25+00:00","description":"Looking for an easy to way set up a mini cart in your store? Learn different ways to create a WooCommerce mini cart with and without plugins","breadcrumb":{"@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#primaryimage","url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png","contentUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2022\/02\/create-woocommerce-mini-cart-featured-image.png","width":804,"height":402},{"@type":"BreadcrumbList","@id":"https:\/\/quadlayers.com\/create-woocommerce-mini-cart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/quadlayers.com\/"},{"@type":"ListItem","position":2,"name":"How to Create a WooCommerce Mini Cart: 3 Methods"}]},{"@type":"WebSite","@id":"https:\/\/quadlayers.com\/#website","url":"https:\/\/quadlayers.com\/","name":"QuadLayers","description":"Your WordPress starting point","publisher":{"@id":"https:\/\/quadlayers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/quadlayers.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/quadlayers.com\/#organization","name":"QuadLayers","url":"https:\/\/quadlayers.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/","url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg","contentUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg","width":285,"height":285,"caption":"QuadLayers"},"image":{"@id":"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/quadlayers","https:\/\/x.com\/quadlayers"]},{"@type":"Person","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/a4cbf70ef1267424da1f4c12383b6f8f","name":"sijal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/image\/817c688af33c2da23da150788758ab57","url":"https:\/\/secure.gravatar.com\/avatar\/46365cacee215a0f1767eaccb4ed5a4e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/46365cacee215a0f1767eaccb4ed5a4e?s=96&d=mm&r=g","caption":"sijal"}}]}},"_links":{"self":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts\/202759"}],"collection":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/users\/5092"}],"replies":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/comments?post=202759"}],"version-history":[{"count":8,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts\/202759\/revisions"}],"predecessor-version":[{"id":204605,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts\/202759\/revisions\/204605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/media\/202794"}],"wp:attachment":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/media?parent=202759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/categories?post=202759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/tags?post=202759"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/coauthors?post=202759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}