[Resolved] Cart not showing on Tablet or Mobile

[Dan]

Hi GP support team,

I was wondering if you could help me with this. I am using the following function below to display a EDD cart, although it is not showing on tablet or mobile, any idea on how to achieve this?

Thanks!
Dan

// Add EDD cart icon and quantity to header menu
function isa_add_menu_items($items, $args) {
 
    if( $args->theme_location != 'primary' ) {// @todo CHANGE header TO YOUR OWN THEME LOCATION
        return $items;
    }
 
    if (function_exists('edd_get_checkout_uri')) {
 
        // Add cart icon
        $items = $items . '<li id="cart-menu-item"><a class="dashicons-before dashicons-cart" href="' . edd_get_checkout_uri(). '"> </a></li>';
        if ( $qty = edd_get_cart_quantity() ) {
 
            $items = $items . '<span id="header-cart" class="edd-cart-quantity">' . edd_get_cart_quantity() . '</span>';            
        }
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'isa_add_menu_items', 10, 2);

[Fernando]

Hi Dan,

Can you try this PHP snippet instead?:

function add_my_cart() {
 
    if (function_exists('edd_get_checkout_uri')) {
 
        echo '<li id="cart-menu-item"><a class="dashicons-before dashicons-cart" href="' . edd_get_checkout_uri(). '"> </a></li>';
        if ( $qty = edd_get_cart_quantity() ) {
 
           echo '<span id="header-cart" class="edd-cart-quantity">' . edd_get_cart_quantity() . '</span>';            
        }
    }
}
add_action('generate_menu_bar_items', 'add_my_cart', 10);

This will hook your cart to the menu bar items instead. In turn, it should appear on mobile and tablet.

Kindly let us know how it goes.

[Dan]

Thanks so much Fernando the snippet you provided works perfectly!… (although I am getting a dot point next to the cart – how would I go about removing that?)

Also, if it’s not too much trouble I would like to use the gp-icon ‘shopping bag’ instead of the dashicon cart – Is there a way to swap these cart icons through the snippet?

Thanks again!
Dan

[Fernando]

I see. Here’s a PHP snippet you can try instead:

function add_my_cart() {
    if (function_exists('edd_get_checkout_uri')) {
 		echo '<a class="dashicons-before dashicons-products" href="' . edd_get_checkout_uri(). '"> </a>';
        if ( $qty = edd_get_cart_quantity() ) {
    		echo '<span id="header-cart" class="edd-cart-quantity">' . edd_get_cart_quantity() . '</span>';            
        }
    }
}
add_action('generate_menu_bar_items', 'add_my_cart', 10);

For reference, here’s the list of dashicons: https://developer.wordpress.org/resource/dashicons/#editor-underline

I used products.

Alternative if you have an SVG icon:

function add_my_cart() {
	$svg = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-bag" class="svg-inline--fa fa-shopping-bag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"></path></svg>';

    if (function_exists('edd_get_checkout_uri')) {
		
 		echo '<a class="gp-icon shopping-cart" href="' . edd_get_checkout_uri(). '">'. $svg . '</a>';
        if ( $qty = edd_get_cart_quantity() ) {
    		echo '<span id="header-cart" class="edd-cart-quantity">' . edd_get_cart_quantity() . '</span>';            
        }
    }
}
add_action('generate_menu_bar_items', 'add_my_cart', 10);

You can replace the svg in the code with your preferred svg.

Hope this helps!

[Dan]

That is perfect! Thank you so much Fernando! I really appreciate you taking the time to help me.

Have a great week! 🙂

Dan

[Fernando]

You’re welcome Dan! Hope you have a great week as well! 🙂

[Author]

Posts