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

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

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #2337566

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

    Customer Support

    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 );
    	$my_new_class = 'ADD YOUR CLASS HERE';
    	if ( ! class_exists( 'WooCommerce' ) ) {
    	if ( ! isset( WC()->cart ) ) {
    	$no_items = '';
    	if ( ! WC()->cart->get_cart_contents_count() > 0 ) {
    		$no_items = 'no-items';
    		'<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' ),
    			'<span class="number-of-items %1$s">%2$s</span>',
    		WC()->cart->subtotal > 0 ? wp_kses_data( WC()->cart->get_cart_subtotal() ) : '',
    	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=' ); ?>
    	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!

    Customer Support

    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.
    Cart Icon

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

    Customer Support

    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.


    Customer Support

    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.

    Customer Support

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.