{"id":9487,"date":"2019-06-14T11:10:46","date_gmt":"2019-06-14T11:10:46","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=9487"},"modified":"2025-07-24T12:44:01","modified_gmt":"2025-07-24T12:44:01","slug":"woocommerce-shopping-cart-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/woocommerce-shopping-cart-widget-overview\/","title":{"rendered":"WooCommerce Shopping Cart Widget Overview"},"content":{"rendered":"\n
\n

JetBlocks<\/em>, in cooperation with the JetThemeCore<\/em><\/a> plugin, allows one to add and customize lots of important content, such as the site logo or search bar, to the header and footer of the website. A shopping cart is one of the elements that can be added when using the WooCommerce <\/em>plugin.<\/p>\n\n\n\n

The Shopping Cart<\/strong> widget is a useful tool for any online store, making it easy to show the number of chosen items and their total price. It can be very convenient for the user to continue viewing the goods on the site and have a constant look at the total price.<\/p>\n\n\n\n

In this tutorial, we\u2019ll check how to quickly add a WooCommerce Shopping Cart<\/strong> to the header using JetBlocks<\/em><\/a>.<\/p>\n<\/div><\/div>\n\n\n\n

Adding the Widget to the Header<\/h2>\n\n\n\n
\n

First, the JetThemeCore<\/em><\/a> and WooCommerc<\/em>e<\/a> plugins should be installed and activated on the website. JetThemeCore<\/em> allows one to edit the header, and WooCommerce <\/em>is responsible for the shop functionalities.<\/p>\n\n\n\n

Now, one should navigate to the WordPress Dashboard > Crocoblock > Theme Builder<\/em><\/strong> directory and open the Header <\/strong>tab.<\/p>\n\n\n\n

An existing header should now be selected, or the \u201cAdd New<\/strong>\u201d button should be clicked.<\/p>\n\n\n\n

\"header<\/a><\/div>\n\n\n\n

In the left-side menu of the Elementor page builder editing page, the WooCommerce Shopping Cart<\/strong> widget should be found. It can be dropped to any needed page section.<\/p>\n\n\n\n

\"woocommerce<\/a><\/div>\n<\/div><\/div>\n\n\n\n

WooCommerce Shopping Cart Settings<\/h2>\n\n\n\n
\n

The widget Settings <\/strong>tab fields can now be adjusted:<\/p>\n\n\n\n

\"woocommerce<\/a><\/div>\n\n\n\n