Archived topic
Change Cart Total to product count & hide Cart if empty
11 replies · Started by Benedikt on October 16, 2018
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' );
}
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 :)
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;
}
}
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;
}
No luck, still only appearing after reload :(
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;
}
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 …
What's line 13 in your code? I tested the above code and it works nicely.
Okay … guess the day’s gotten a little too long … I simply didn’t replace the whole code :D
Now it works like a charm. Thank you so much, Tom!
You're welcome :)
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:
.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!!.
Might be best if you open a new topic.
Thanks!