Product Cart

The WooCommerce Cart Widget allows you to add, style, and manage a shopping cart display anywhere on your Elementor-powered page. It’s perfect for displaying the cart icon, item count, and cart subtotal, with customizable styling options and responsive settings. Last updated: 04:51 PM +06, Saturday, May 31, 2025.

Whether you’re designing a header, sidebar, or product page, the WooCommerce Cart Widget makes it easy to present cart information with precision and style.

Key Features:

• Display cart icon, item count, and subtotal
• Customize cart icon and text styling
• Toggle visibility of cart elements
• Link to cart or checkout pages
• Fully responsive and optimized

🚀 How to Enable the WooCommerce Cart Widget

To start using the WooCommerce Cart Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the WooCommerce Cart Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the WooCommerce Cart Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “WooCommerce Cart” in the Elementor widget panel.
• Drag and drop the WooCommerce Cart Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Cart Settings

• Under the Content → Settings section:
  • Set Icon Type (e.g., Default Icon) to choose the cart icon style.
  • Toggle Show Cart Icon to “Yes” to display the cart icon.
  • Toggle Show Item Count to “Yes” to display the number of items in the cart.
  • Toggle Show Subtotal to “Yes” to display the cart subtotal.
  • Set Link Type (e.g., Cart Page) to link the cart to either the cart page or checkout page.

Step 3: Style the Cart Icon

• Under the Style → Icon section:
  • Adjust Icon Size (e.g., in pixels) to resize the cart icon.
  • Set Icon Color and Hover Color for interactive effects.
  • Adjust Margin and Padding to control spacing around the icon (e.g., top, right, bottom, left).

Step 4: Style the Item Count and Subtotal

• Under the Style → Item Count and Style → Subtotal sections:
  • Customize Typography to set font size, weight, and style for the item count and subtotal text.
  • Set Color for the text, and adjust Margin and Padding to control spacing.

Step 5: Style the Container

• Under the Style → Container section:
  • Adjust Alignment to position the cart (e.g., left, center, right).
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for the cart container.

✅ Final Preview and Save

Once your WooCommerce Cart Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.