WooCommerce Cart Block Quantity Selector: Plus Button Shows Fullwidth Plus Sign (Fix Guide)

The Fullwidth Plus Sign in WooCommerce Cart Block Quantity Selector

When using the WooCommerce Cart block (the block-based cart, not the classic shortcode), you may notice that the plus button in the quantity selector displays a fullwidth plus character (U+FF0B: ＋) instead of the standard plus sign (U+002B: +). This makes the button look oversized, misaligned, and inconsistent with the rest of the UI. This issue is purely visual and does not affect functionality, but it creates a poor user experience. The root cause is usually a CSS font-family declaration from your theme or a plugin that overrides the default icon font used by the block. The block relies on a specific Unicode character for the plus button, and if the applied font does not contain the standard plus glyph or maps to a fullwidth variant, the wrong character appears. This is especially common with themes that use custom icon fonts or global font-family settings that target buttons. The issue is specific to the Cart block; the classic cart shortcode uses different markup and is not affected.

Step-by-Step Solution

• 1Ensure you are using the WooCommerce Cart block (not the classic cart shortcode).
• 2Inspect the plus button element and confirm the rendered character is U+FF0B (fullwidth plus).
• 3Temporarily switch to a default WordPress theme (e.g., Twenty Twenty-Five) to confirm if the issue is theme-related.
• 4If the issue disappears with a default theme, check your active theme's CSS for font-family overrides on buttons or `.wc-block-components-quantity-selector__button`.
• 5Add the provided CSS to your child theme's stylesheet or via Appearance > Customize > Additional CSS.
• 6Clear any caching (browser, plugin, CDN) and test again.

/* Fix fullwidth plus sign in WooCommerce Cart block quantity selector */
.wc-block-components-quantity-selector__button--plus {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Force the correct plus character if needed */
  content: '+';
}

/* Alternative approach if the above does not work */
.wc-block-components-quantity-selector__button--plus::after {
  content: '\002B';
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

Final Recommendation