Woocommerce Cart Count Needs Repositioning

[Ben Siegfried]

In my local dev version I have this Woocommerce cart count working but I need it repositioned into the div class ".before-header" as a list item (li) if that's possible. It's not installed right now and I'm not sure if it needs to be if you know how to reposition it. I was only able to get to be positioned at "genesis_before_header," but that's not precisely where it needs to go.

I don't know how to make that adjustment in PHP, interested in helping out?

Here's the gist: Woocommerce Cart Count with Icon

Here's the code found at the gist:

//* Add Cart icon and count to header if WC is active
add_action( 'genesis_header', 'jmd_wc_cart_count' );
function jmd_wc_cart_count() {
 
    if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
 
        $count = WC()->cart->cart_contents_count;
        ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php if ( $count > 0 ) echo '(' . $count . ')'; ?></a><?php
    
    }
 
}
//* Ensure cart contents update when products are added to the cart via AJAX
add_filter( 'woocommerce_add_to_cart_fragments', 'jmd_header_add_to_cart_fragment' );
function jmd_header_add_to_cart_fragment( $fragments ) {
 
    ob_start();
    $count = WC()->cart->cart_contents_count;
    ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php if ( $count > 0 ) echo '(' . $count . ')'; ?></a><?php
 
    $fragments['a.cart-contents'] = ob_get_clean();
     
    return $fragments;
		
}

The CSS for the gist for helpful reference:

.cart-contents {
  background-color: #f5f5f5;
  color: #333;
  font-size: 16px;
  padding: 16px 18px 17px;
  position: absolute;
  right: 60px;
  top: 0;
  z-index: 9999;
}

.cart-contents:before{
  font-family: WooCommerce;
  color: #333;
  content: "\e01d";
  font-size: 16px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  padding-right: 5px;
  vertical-align: bottom;
}

.cart-contents:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

.cart-contents:hover:before {
  color: #fff;
}

Below is the website. I would like it to appear to the right of the menu items Checkout and My Account where ".before-header" is found.

https://coronadosurfdesigns.com/

[Brad Dalton]

Looks like you're using the custom menu widget in the before header widget area?

---

Tutorials for StudioPress Themes.

[Ben Siegfried]

Yes, that is a widget area that the theme developer installed, it is titled Before Header.

[Brad Dalton]

You can change the hook to genesis_before_header and position using CSS.

Or

If you want to add it to the nav menu items, you'll need to filter the nav menu

---

Tutorials for StudioPress Themes.

[Ben Siegfried]

I was able to add it to genesis_before_header, but I need to get it to become a list-item (li), that would be the ideal position. Are you saying filtering the nav menu for that would be get me there? I'm not skilled with filtering, I have a vague understanding of it.

[Brad Dalton]

I spent a few hours working this out for my members if you need the complete solution and want to save some time.

---

Tutorials for StudioPress Themes.

[Ben Siegfried]

Thanks, I saw Sridhar's tutorial for this one, which looks similar. The thing I don't like about it is that the values don't update with changes in the Cart via AJAX. This one have in my post here does, however it does not display the price. I'm more interested in seeing one with AJAX though, and ideally, it shows the item count and accumulated price changing via AJAX, and in my specific issue be able to put it into a menu.

With Sridhar's or yours, I'm pretty sure you both have a way to choose a menu target of primary or secondary. With my scenario I don't think that applies as you've pointed out that I need to filter it.

[Victor Font]

This is a function I use to update items added to my menu cart through Ajax. You'll need to modify it for your specific needs, but it should help get you started.

// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php)
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );
function woocommerce_header_add_to_cart_fragment( $fragments ) {
	ob_start();
	    global $woocommerce;
        $viewing_cart = __('View your shopping cart', 'shdplans');
        $start_shopping = __('Start shopping', 'shdplans');
        $cart_url = $woocommerce->cart->get_cart_url();
        $cart_contents_count = $woocommerce->cart->cart_contents_count;
		$cart_contents = sprintf(_n('%d item', '%d items', $cart_contents_count, 'shdplans'), $cart_contents_count);
		$cart_total = $woocommerce->cart->get_cart_total();
	?>
	<a class="houseplanscart-contents" href="<?php echo $cart_url; ?>" title="<?php $viewing_cart; ?>" itemprop="url"><?php echo $cart_contents; ?> - <?php echo $cart_total; ?></a>
	<?php

	$fragments['a.houseplanscart-contents'] = ob_get_clean();

	return $fragments;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Ben Siegfried]

Thanks Victor.

[Author]

Posts