Archived topic
Cart not showing on Tablet or Mobile
5 replies · Started by _blank on July 3, 2022
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);
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.
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
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!
That is perfect! Thank you so much Fernando! I really appreciate you taking the time to help me.
Have a great week! :)
Dan
You’re welcome Dan! Hope you have a great week as well! :)