[Resolved] Change Cart Total to product count & hide Cart if empty

[Benedikt]

Hi Tom,

I am just trying to build a combination of those two changes to the WC Cart Icon:
https://generatepress.com/forums/topic/woocommerce-show-cart-in-primary-menu-if-not-empty/#post-521790
https://generatepress.com/forums/topic/adding-a-cart-icon-with-number-of-items-and-total-cost-in-nav-menu/

What I did is generally using the latter code giving the if-statement of function tu_custom_wc_menu_cart another parameter with
sizeof( WC()->cart->get_cart() ) > 0 to also hide the icon as long as the cart is empty.

This works so far, but unfortunately, the cart doesn’t appear when I am adding a product from the shop archive page. It needs to reload first. Is there a way to change this behaviour?

Give me a shout if you wanna see the page. It’s in developent, so I password protected it.

Thank you in advance!

Here’s the whole code:

/** Show product count in Cart & hide cart if empty */

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 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' ) && sizeof( WC()->cart->get_cart() ) > 0 ) {
        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' );
}

[Tom]

Have you tried making the change in this function as well?: tu_wc_cart_link_fragment

That’s the one that refreshes the product count with AJAX.

Let me know 🙂

[Benedikt]

Yep, just if’d that one, but still it doesn’t refresh after pushing the button on the products archive 🙁

add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' );
function tu_wc_cart_link_fragment( $fragments ) {
	if (sizeof( WC()->cart->get_cart() ) > 0) {
		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;
	}
}

[Tom]

What if you do this?:

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

    return $fragments;
}

[Benedikt]

No luck, still only appearing after reload 🙁

[Tom]

Alright, here we go.

Here’s your PHP:

function tu_custom_wc_cart_link() {
    ob_start();
	$display = '';

	if ( ! WC()->cart->get_cart_contents_count() > 0 ) {
		$display = 'style="display: none;"';
	}
    ?>
    <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
         <?php echo sprintf ( _n( '<span class="number-of-items" ' . $display . '>%d</span>', '<span class="number-of-items" ' . $display . '>%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" style="display: none;"></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' );
}

And this is your CSS:

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

a.cart-contents .number-of-items:before {
    content: "\f07a";
    display: inline-block;
    font-family: "GP Premium";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 10px;
}

[Benedikt]

Thanks a lot! But whoops … I get a parse error I can’t quite figure out:

PHP Syntax Check: Parse error: syntax error, unexpected '}', expecting end of file in your code on line 13

The } seems quite right to me, so no clue … 

[Tom]

What’s line 13 in your code? I tested the above code and it works nicely.

[Benedikt]

Okay … guess the day’s gotten a little too long … I simply didn’t replace the whole code 😀
Now it works like a charm. Thank you so much, Tom!

[Tom]

You’re welcome 🙂

[Iñaki Mansilla]

Hi.

I wonder if I could ask for a tweak in this solution you are given… I need my cart to show the number of items in the center of the icon something like this example http://www.maideralzaga.com.

I have already place my icon like this:

https://ibb.co/sy98hVm

.main-navigation a.cart-contents.shopping-bag:before, .secondary-navigation a.cart-contents.shopping-bag:before { content: url(https://www.ianmosh.com/wp-content/uploads/2019/03/shopping-bag-ic1.png);
display: inline;
line-height: inherit;
vertical-align: -5px;
}

And where should I place my icons url??… Sorry, I can´t code PHP.

I have been trying to do it with this example, but It doesn´t work. https://docs.woocommerce.com/document/show-cart-contents-total/

Thanks!!.

[Leo]

Might be best if you open a new topic.

Thanks!

[Author]

Posts