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

[Ree]

I would like to add css class into the cart icon, can I know how can I do that please?

[Fernando]

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]

[Ree]

thank you this works!

[Fernando]

You’re welcome Ree!

[Jan]

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?

[Ying]

Hi Jan,

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

[Jan]

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

[Ying]

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>';

[Jan]

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.

[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

[Author]

Posts