[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
    Posts
  • #2337566
    Ree

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

    #2337572
    Fernando
    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 );
    	}
       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]

    #2337591
    Ree

    thank you this works!

    #2337592
    Fernando
    Customer Support

    You’re welcome Ree!

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

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

    #2529776
    Ying
    Staff
    Customer Support

    Hi Jan,

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

    #2529869
    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

    #2530602
    Ying
    Staff
    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>';

    #2531015
    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.

    #2531040
    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.