[Resolved] Cart icon customize

[ZZZ]

Hello there,

could you assist to create what I need?

I have 2 links here.. currently my cart icon is “icon Cart – 5 items” .. This is too long..

I would like a simple “My Enquiry: 1” .. the number of enquiry is actually quantity wrap witih a circular background with different color “#009933”

Also, on mobile my menu is “Hamburger Menu” .. this is too long.. I would like to just have the “Hamburger” icon..

[Tom]

Hi there,

The word “Cart” shouldn’t be there by default: https://gpsites.co/seller/

Any chance you can link me to your site?

As for the menu, you can remove the “Menu” text in “Customize > Layout > Primary Navigation”.

[ZZZ]

How to i give info on private info?

[David]

Hi there you can send info via the Accounts Issue form here: https://generatepress.com/contact/

[ZZZ]

i have submitted the login info and site link there.. please let me know if u receive my staging site link.

[Tom]

Do you have any functions active on the site? Specifically targeting this filter?: generate_woocommerce_menu_cart_icon

That “Cart” text looks custom.

Let me know 🙂

[ZZZ]

function tu_custom_wc_cart_link() {
    ob_start();
    ?>
    <a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
        <?php _e( 'Cart','generate-woocommerce' );?> - <?php echo sprintf ( _n( '<span class="number-of-items">%d</span> item', '<span class="number-of-items">%d</span> items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
    </a>
    <?php
    return ob_get_clean();
}

function tu_custom_wc_menu_cart( $nav, $args ) {
    if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return sprintf( 
            '%1$s 
            <li class="wc-menu-item %4$s" title="%2$s">
                %3$s
            </li>',
            $nav,
            esc_attr__( 'View your shopping cart','generate-woocommerce' ),
            tu_custom_wc_cart_link(),
            is_cart() ? 'current-menu-item' : ''
        );
    }
	
    // Our primary menu isn't set, return the regular nav
    return $nav;
}

function tu_custom_wc_mobile_cart_link() {
	if ( function_exists( 'generatepress_wc_get_setting' ) && ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
		return;
	}
	?>
	<div class="mobile-bar-items wc-mobile-cart-items">
		<?php do_action( 'generate_mobile_cart_items' ); ?>
		<?php echo tu_custom_wc_cart_link(); ?>
	</div><!-- .mobile-bar-items -->
	<?php

}

add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' );
function tu_wc_cart_link_fragment( $fragments ) {
	global $woocommerce;
	$fragments['.cart-contents span.number-of-items'] = ( WC()->cart->get_cart_contents_count() > 0 ) ? '<span class="number-of-items">' . wp_kses_data( WC()->cart->get_cart_contents_count() ) . '</span>' : '<span class="number-of-items"></span>';
	return $fragments;
}

add_action( 'after_setup_theme','tu_remove_wc_cart_item' );
function tu_remove_wc_cart_item() {
    remove_filter( 'wp_nav_menu_items','generatepress_wc_menu_cart', 10, 2 );
    add_filter( 'wp_nav_menu_items','tu_custom_wc_menu_cart', 10, 2 );

    remove_action( 'generate_inside_navigation','generatepress_wc_mobile_cart_link' );
    remove_action( 'generate_inside_mobile_header','generatepress_wc_mobile_cart_link' );

    add_action( 'generate_inside_navigation','tu_custom_wc_mobile_cart_link' );
    add_action( 'generate_inside_mobile_header','tu_custom_wc_mobile_cart_link' );
}

I got this code from this link https://generatepress.com/forums/topic/show-quantity-in-cart-in-menu-instead-of-total-costs/#post-332691

[Tom]

In your first function, remove this bit: <?php _e( 'Cart','generate-woocommerce' );?> -

[ZZZ]

Hi Tom,

Yes ‘cart’ is removed now.. could you please check this image?

This is what i want to achieve for end results.

[Tom]

Ah ok, so instead of removing the “Cart” text I mentioned above, just replace it with “My Enquiry”.

Then, add this CSS to remove the icon:

.main-navigation a.cart-contents:before, 
.secondary-navigation a.cart-contents:before {
    display: none;
}

Then in that first function, find item and remove it. Then on the same line, find items and remove it.

Then for the green circle, try this CSS:

.number-of-items {
    background: green;
    color: white;
    display: inline-block;
    text-align: center;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: 50%;
}

You may need to change the width and height.

[ZZZ]

Hey Tom,

got it working!

the green circle CSS was a headstart, i manage to figure it out to make it align!

I have another query, hope u can assist.. I am using a customize woocommerce email sent to customers.. I would like to remove the order number and the total row.. wonder if u could assist!

[ZZZ]

OOps, it worked fine for the cart number of items if there are items in the cart.. if the cart is empty, the zero doesn’t show..

[Tom]

Can you share what you have as your first function now?

I’m not sure about the email unfortunately – that’s something you’ll need to raise with WC support.

[ZZZ]

function tu_custom_wc_cart_link() {
    ob_start();
    ?>
    <a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
        <?php _e( 'Enquiry','generate-woocommerce' );?><?php echo sprintf ( _n( '<span class="number-of-items">%d</span>', '<span class="number-of-items">%d</span>', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
    </a>
    <?php
    return ob_get_clean();
}

function tu_custom_wc_menu_cart( $nav, $args ) {
    if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return sprintf( 
            '%1$s 
            <li class="wc-menu-item %4$s" title="%2$s">
                %3$s
            </li>',
            $nav,
            esc_attr__( 'View your shopping cart','generate-woocommerce' ),
            tu_custom_wc_cart_link(),
            is_cart() ? 'current-menu-item' : ''
        );
    }
	
    // Our primary menu isn't set, return the regular nav
    return $nav;
}

function tu_custom_wc_mobile_cart_link() {
	if ( function_exists( 'generatepress_wc_get_setting' ) && ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
		return;
	}
	?>
	<div class="mobile-bar-items wc-mobile-cart-items">
		<?php do_action( 'generate_mobile_cart_items' ); ?>
		<?php echo tu_custom_wc_cart_link(); ?>
	</div><!-- .mobile-bar-items -->
	<?php

}

add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' );
function tu_wc_cart_link_fragment( $fragments ) {
	global $woocommerce;
	$fragments['.cart-contents span.number-of-items'] = ( WC()->cart->get_cart_contents_count() > 0 ) ? '<span class="number-of-items">' . wp_kses_data( WC()->cart->get_cart_contents_count() ) . '</span>' : '<span class="number-of-items"></span>';
	return $fragments;
}

add_action( 'after_setup_theme','tu_remove_wc_cart_item' );
function tu_remove_wc_cart_item() {
    remove_filter( 'wp_nav_menu_items','generatepress_wc_menu_cart', 10, 2 );
    add_filter( 'wp_nav_menu_items','tu_custom_wc_menu_cart', 10, 2 );

    remove_action( 'generate_inside_navigation','generatepress_wc_mobile_cart_link' );
    remove_action( 'generate_inside_mobile_header','generatepress_wc_mobile_cart_link' );

    add_action( 'generate_inside_navigation','tu_custom_wc_mobile_cart_link' );
    add_action( 'generate_inside_mobile_header','tu_custom_wc_mobile_cart_link' );
}

the above is the current function.. somehow I feel if the cart is empty there is no “0” to show the number of items in the cart.. could this be it?

[Tom]

Try replacing the first function with this:

function tu_custom_wc_cart_link() {
    ob_start();
    $count = WC()->cart->get_cart_contents_count();
    ?>
    <a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
        <?php _e( 'Enquiry','generate-woocommerce' );?>

        <?php 
        if ( $count > 0 ) {
            echo sprintf ( _n( '<span class="number-of-items">%d</span>', '<span class="number-of-items">%d</span>', $count ), $count );
        } else {
            echo '<span class="number-of-items">0</span>';
        }
        ?>
    </a>
    <?php
    return ob_get_clean();
}

[Author]

Posts