Added cart icon & it's not updating or showing up on mobile – Genesis Divine

[plentyvegan]

I added some code to add a cart icon to the secondary nav on my site. It worked... sort of.

The cart is there but it doesn't update when you "add to cart" from the category page, update the quantity from the quantity box on the cart page, or "x" out a product on the cart page.

Also, the cart disappears on mobile when the secondary nav becomes a hamburger.

I would instead like the cart icon to remain visible to the right of the hamburger, if possible.

I followed these instructions to add the cart: https://sridharkatakam.com/adding-cart-icon-number-items-total-cost-nav-menu-using-woocommerce/

Should I start from scratch or can I add some code to achieve the changes I want?

http://plentyvegan.com/cart/

[Victor Font]

First, the cart is still there when the menu collapses for mobile, but you turning off its display in .genesis-nav-menu li.right { display: none; } at line 2586 in style.css.

Second, the code you used indeed adds the cart to the menu, but it does nothing to update the cart as products are added. You need additional code for the woocommerce_add_to_cart_fragments filter. The code I use won't work for you because you are adding the cart in a completely different way than I do. You'll have to do some research.

Third, if you want the mini-cart outside of the hamburger, then you'll have to added it after the menu, not to the menu.

Last, these are all WooCommerce related issues and have nothing to do with Studio Press. This forum is for Studio Press related questions.

---

Regards,

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

[plentyvegan]

I'm unclear what these forums are for then. What are the parameters? I bought the theme from Studio Press and added plugins as many do - where is the line between Studio Press related topics and topics that goes beyond that? Thanks for clarifying.

I removed
.genesis-nav-menu li.right {
display: none;
}

Now the cart does show up under the hamburger. The entire secondary nav flashed open upon loading, though, which isn't great.

I forgot to add that I had added this code to the functions file to attempt to update the cart but it seems not to work:

/**
* Ensure cart contents update when products are added to the cart via AJAX
* https://docs.woocommerce.com/document/show-cart-contents-total/
*/
add_filter( ‘woocommerce_add_to_cart_fragments’, ‘woocommerce_header_add_to_cart_fragment’ );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
ob_start();

?>
get_cart_url(); ?>” title=””>cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> – cart->get_cart_total(); ?>
<?php

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

return $fragments;
}

Thanks for the info, Victor.

[Victor Font]

Questions on this forum are answered by community volunteers. It is designed to help with questions and customizations for Studio Press themes. Asking about plugin related issues, unless they are supported by Studio Press, are out of scope. Changing the color of a WooCommerce price and questions about the cart are WooCommerce plugin issues that have nothing to do with Studio Press. Some of us may have the experience to point you in the right direction, and we will when we can, but the fastest way to get a questioned answered is to keep it focused on the Genesis Framework.

---

Regards,

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

[plentyvegan]

Ah ok. I didn't see anything regarding that in the rules of the forum and so didn't know: http://www.studiopress.community/policies-and-guidelines/

It seems like people who answer these questions could just skip over a post if they found it out of scope, right?

[plentyvegan]

On a technical note, which I think is within scope.

I've removed all the code for the cart and I added back in the code that you said was hiding the cart on mobile:

.genesis-nav-menu li.right { display: none; }

Unfortunately both the primary and secondary menus show their contents before becoming a hamburger during loading on mobile now. Not sure what went wrong or if I'm just noticing a glitch...

[Author]

Posts