How to add css class into cart icon in the header menu?

Hi Ree,

Add this PHP snippet:

function custom_cart() {
	$legacy_icon = add_filter( 'generate_woocommerce_menu_cart_icon', function($output){ return $output; } );
$icon_type = generatepress_wc_get_setting( 'cart_menu_item_icon' );

	$icon = '';

	if ( function_exists( 'generate_get_svg_icon' ) ) {
		$icon = generate_get_svg_icon( $icon_type );
	}
   ob_start();
	$my_new_class = 'ADD YOUR CLASS HERE';
	if ( ! class_exists( 'WooCommerce' ) ) {
		return;
	}

	if ( ! isset( WC()->cart ) ) {
		return;
	}

	$no_items = '';

	if ( ! WC()->cart->get_cart_contents_count() > 0 ) {
		$no_items = 'no-items';
	}

	printf(
		'<a href="%1$s" class="cart-contents %2$s %3$s %8$s" title="%4$s">%5$s%6$s%7$s<span class="amount">%8$s</span></a>',
		esc_url( wc_get_cart_url() ),
		esc_attr( $icon_type ),
		$icon ? 'has-svg-icon' : '',
		esc_attr__( 'View your shopping cart', 'gp-premium' ),
		$icon,
		sprintf(
			'<span class="number-of-items %1$s">%2$s</span>',
			$no_items,
			WC()->cart->get_cart_contents_count()
		),
		$legacy_icon,
		WC()->cart->subtotal > 0 ? wp_kses_data( WC()->cart->get_cart_subtotal() ) : '',
		$my_new_class
	);

	if ( generatepress_wc_get_setting( 'menu_mini_cart' ) && ! is_cart() ) : ?>
		<div id="wc-mini-cart" class="wc-mini-cart" aria-hidden="true">
			<div class="inside-wc-mini-cart">
				<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
			</div>
		</div>
	<?php
	endif;

	return ob_get_clean();
}
add_shortcode('add_custom_cart', 'custom_cart');
add_filter('wp_nav_menu_items', 'do_shortcode');

Add your class in $my_new_class

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Now add you WooCommerce Cart through a Shortcode block with this code [add_custom_cart]

thank you this works!

You're welcome Ree!

Hi, when i placed the shortcode, the cart is showing nr 1 next to the cart and how can i change it for my own svg? I dont get it. Thx for help.

So where i can place the .svg in the code?

Hi Jan,

What're your goals? Can you list them out so we can seek the best solution for you?

Hi Ying,
i placed the code, which Fernando mentioned, in my function.php and the shortcode in my header (block header template). But doesnt metter, how many items i have in the cart, it is always showing "1" next to the icon with item numbers. Looks like: icon(4)1. You can see it here: Hermex.ch
So my goals are:
a) fixing this number 1 behind my icon with items inside
b) where in the code from Fernando i can place my custom svg icon.

Thx

a) Try this CSS:

.header .shopping-cart font {
    display: none;
}
.header a.cart-contents.shopping-cart {
    display: flex;
}

b) Change this line: $icon = generate_get_svg_icon( $icon_type ); to
$icon = '<span class="gp-icon shopping-cart">your-svg-code</span>';

Hi, to change the icon helped, thx a lot. But the css does not remove the number. I dont know, from where the code is taking the number 1 behind the icon. Must be somewhere in the code from Fernando.

For reference, can you provide the link to where we can see your cart icon?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information