Header Cart
Make your theme's existing cart icon open the Mini Cart or Side Cart instead of going to the cart page, with an item count and optional subtotal.
Settings
Binds your theme's cart icon to the Siteryn cart. The cart you choose below must be enabled on the General tab.
Opens the Mini Cart (as a dropdown under the icon) or the Side Cart.
Click or Hover, for the Side Cart. For the Mini Cart, its own Open Type is used instead.
How long the pointer must rest before opening, and how long after it leaves before closing. Used whenever your theme's icon opens on hover (Trigger Mode Hover for the Side Cart, or the Mini Cart's Open Type Hover), instead of the Mini Cart's own hover delays.
CSS selector(s) matching your theme's cart icon or link, comma-separated. Empty restores the default. The plugin's own buttons and panels are never matched.
A badge with the number of items in the cart (quantities added up). It replaces your theme's own count.
The cart subtotal next to the icon; the link widens to fit it.
What happens to the icon
The matched element keeps its place in your header, but its content is replaced with the Siteryn cart icon (the Cart Icon chosen on the Mini Cart sub-tab, whichever cart it opens), the count badge and (optionally) the subtotal, which stay up to date as the cart changes. Clicking it opens the Siteryn cart instead of the cart page or WooCommerce's own Mini-Cart drawer. Without JavaScript, the theme's icon works as before.
- Every element the selector matches is connected, so a separate mobile header icon works too. The Mini Cart opens as a dropdown under the icon you used, with a pointer to it.
- To avoid a flash of the theme's original icon, it's hidden while the page loads, for at most 2 seconds.
- If the cart chosen in Header Cart Action is turned off, the icon is left alone and works as your theme intended.
- The theme's header cart icon with the count badge
- The Mini Cart open under it
Finding your selector
The defaults cover the WooCommerce Mini-Cart block (.wc-block-mini-cart__button) and classic themes such as Storefront (.cart-contents). For other themes:
- Inspect the icon
Right-click your header cart icon → Inspect, and find the link or button that wraps it.
- Copy a class
Use a class unique to it, e.g.
.header-cart-linkor.site-header .cart-icon. - Add it
Add it to Cart Icon Selector, comma-separated after the defaults, and save.
.cart-contents, .wc-block-mini-cart__button, .site-header .header-cart-link
a[href*="cart"]: it also matches Add to cart buttons and any address containing "cart". If you match by address, include the slashes: a[href*="/cart/"].