[Resolved] Cart icon like generatpress.com using EDD

[Shashank Sachan]

Hi I am using genratepress premium and easy digital downloads.
I want to create a shopping cart icon in my menu just like Generatepress website.
Link to my website https://wordpress-440540-1945979.cloudwaysapps.com/
Thank u in advance.

[Tom]

Hi there,

We’re using the following function here on our website:

add_action( 'generate_menu_bar_items', function() {
	$cart_quantity = edd_get_cart_quantity();

	if ( ! $cart_quantity ) {
		return;
	}

	?>
	<a class="gp-cart-menu-item" title="Checkout" href="<?php echo edd_get_checkout_uri(); ?>"><?php generate_do_svg_icon( 'shopping-bag' ); ?> <span class="gp-cart-quantity"><?php echo $cart_quantity; ?></span></a>
	<?php
} );

Hope it helps! 🙂

[Shashank Sachan]

Thanks for replying.
I have a problem though, shopping bag is not visible in any page except checkout page.

[Ying]

The shopping cart appears on all the pages across your site when I check.
https://www.screencast.com/t/oyfeUNXi06g

Have you figured it out already?

[Shashank Sachan]

Yes kind off,still working on it, actually i created a hook generate_after_primary_menu and added the following code to it:

<a href="<?php echo edd_get_checkout_uri(); ?>">
<span class="customicon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="25" height="25" x="0" y="0" viewBox="0 0 50.000022 50" xml:space="preserve" sodipodi:docname="shoppingcart.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1001" showgrid="false" inkscape:zoom="1.6210938" inkscape:cx="255.91394" inkscape:cy="200.13568" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg10"/>   <path d="M16.11 33.334h26.566c.654 0 1.229-.494 1.408-1.21l5.86-23.333a1.854 1.854 0 00-.24-1.461c-.276-.418-.71-.663-1.169-.663H12.731l-1.047-5.362C11.534.543 10.941 0 10.254 0h-8.79C.657 0 0 .746 0 1.667c0 .92.656 1.666 1.465 1.666h7.614l5.289 27.08c-1.557.77-2.65 2.535-2.65 4.587 0 2.757 1.972 5 4.395 5h26.563c.809 0 1.465-.746 1.465-1.667 0-.92-.656-1.666-1.465-1.666H16.113c-.807 0-1.465-.748-1.465-1.667 0-.918.655-1.664 1.461-1.666zM46.592 10L41.57 30H17.288l-3.906-20zM14.648 45c0 2.757 1.972 5 4.395 5 2.423 0 4.395-2.243 4.395-5s-1.972-5-4.395-5c-2.423 0-4.395 2.243-4.395 5zm4.395-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667-1.465-.748-1.465-1.667.657-1.667 1.465-1.667zM35.352 45c0 2.757 1.971 5 4.394 5s4.395-2.243 4.395-5-1.972-5-4.395-5c-2.423 0-4.394 2.243-4.394 5zm4.394-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667c-.807 0-1.465-.748-1.465-1.667s.658-1.667 1.465-1.667zm0 0" data-original="#000000" fill="#ff5353"/> </svg></span> (<span class="header-cart edd-cart-quantity"><?php echo edd_get_cart_quantity(); ?></span>)
</a>

That is how I am able to displaythe cart icon.
Cant figure out how to make is disapper when cart is empty ?

[David]

Hi there,

try adding this to your hook:

<?php
$cart_contents = edd_get_cart_contents();
if ( ! empty( $cart_contents ) ) {
    ?>
    <a href="<?php echo edd_get_checkout_uri(); ?>">
        <span class="customicon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="25" height="25" x="0" y="0" viewBox="0 0 50.000022 50" xml:space="preserve" sodipodi:docname="shoppingcart.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1001" showgrid="false" inkscape:zoom="1.6210938" inkscape:cx="255.91394" inkscape:cy="200.13568" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg10"/>   <path d="M16.11 33.334h26.566c.654 0 1.229-.494 1.408-1.21l5.86-23.333a1.854 1.854 0 00-.24-1.461c-.276-.418-.71-.663-1.169-.663H12.731l-1.047-5.362C11.534.543 10.941 0 10.254 0h-8.79C.657 0 0 .746 0 1.667c0 .92.656 1.666 1.465 1.666h7.614l5.289 27.08c-1.557.77-2.65 2.535-2.65 4.587 0 2.757 1.972 5 4.395 5h26.563c.809 0 1.465-.746 1.465-1.667 0-.92-.656-1.666-1.465-1.666H16.113c-.807 0-1.465-.748-1.465-1.667 0-.918.655-1.664 1.461-1.666zM46.592 10L41.57 30H17.288l-3.906-20zM14.648 45c0 2.757 1.972 5 4.395 5 2.423 0 4.395-2.243 4.395-5s-1.972-5-4.395-5c-2.423 0-4.395 2.243-4.395 5zm4.395-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667-1.465-.748-1.465-1.667.657-1.667 1.465-1.667zM35.352 45c0 2.757 1.971 5 4.394 5s4.395-2.243 4.395-5-1.972-5-4.395-5c-2.423 0-4.394 2.243-4.394 5zm4.394-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667c-.807 0-1.465-.748-1.465-1.667s.658-1.667 1.465-1.667zm0 0" data-original="#000000" fill="#ff5353"/> </svg></span> (<span class="header-cart edd-cart-quantity"><?php echo edd_get_cart_quantity(); ?></span>)
    </a>
    <?php
}
?>

[Shashank Sachan]

Hi David, It is not working.
Cant see cart icon on other pages in primary menu, if there are item/s in it.

[David]

hmmm try this instead:

<?php
if ( edd_item_in_cart() ) {
    ?>
    <a href="<?php echo edd_get_checkout_uri(); ?>">
        <span class="customicon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="25" height="25" x="0" y="0" viewBox="0 0 50.000022 50" xml:space="preserve" sodipodi:docname="shoppingcart.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1001" showgrid="false" inkscape:zoom="1.6210938" inkscape:cx="255.91394" inkscape:cy="200.13568" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg10"/>   <path d="M16.11 33.334h26.566c.654 0 1.229-.494 1.408-1.21l5.86-23.333a1.854 1.854 0 00-.24-1.461c-.276-.418-.71-.663-1.169-.663H12.731l-1.047-5.362C11.534.543 10.941 0 10.254 0h-8.79C.657 0 0 .746 0 1.667c0 .92.656 1.666 1.465 1.666h7.614l5.289 27.08c-1.557.77-2.65 2.535-2.65 4.587 0 2.757 1.972 5 4.395 5h26.563c.809 0 1.465-.746 1.465-1.667 0-.92-.656-1.666-1.465-1.666H16.113c-.807 0-1.465-.748-1.465-1.667 0-.918.655-1.664 1.461-1.666zM46.592 10L41.57 30H17.288l-3.906-20zM14.648 45c0 2.757 1.972 5 4.395 5 2.423 0 4.395-2.243 4.395-5s-1.972-5-4.395-5c-2.423 0-4.395 2.243-4.395 5zm4.395-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667-1.465-.748-1.465-1.667.657-1.667 1.465-1.667zM35.352 45c0 2.757 1.971 5 4.394 5s4.395-2.243 4.395-5-1.972-5-4.395-5c-2.423 0-4.394 2.243-4.394 5zm4.394-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667c-.807 0-1.465-.748-1.465-1.667s.658-1.667 1.465-1.667zm0 0" data-original="#000000" fill="#ff5353"/> </svg></span> (<span class="header-cart edd-cart-quantity"><?php echo edd_get_cart_quantity(); ?></span>)
    </a>
    <?php
}
?>

[Shashank Sachan]

Hello David
Thank you very much for your time.
I added the following code in function.php of generatepress along with the hook and it kind of work
Hook: generate_after_primary_menu
Display Location: Entire Site

<?php
$cart_contents = edd_get_cart_contents();
if ( ! empty( $cart_contents ) ) {
    ?>
    <a href="<?php echo edd_get_checkout_uri(); ?>">
        <span class="customicon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="25" height="25" x="0" y="0" viewBox="0 0 50.000022 50" xml:space="preserve" sodipodi:docname="shoppingcart.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1001" showgrid="false" inkscape:zoom="1.6210938" inkscape:cx="255.91394" inkscape:cy="200.13568" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg10"/>   <path d="M16.11 33.334h26.566c.654 0 1.229-.494 1.408-1.21l5.86-23.333a1.854 1.854 0 00-.24-1.461c-.276-.418-.71-.663-1.169-.663H12.731l-1.047-5.362C11.534.543 10.941 0 10.254 0h-8.79C.657 0 0 .746 0 1.667c0 .92.656 1.666 1.465 1.666h7.614l5.289 27.08c-1.557.77-2.65 2.535-2.65 4.587 0 2.757 1.972 5 4.395 5h26.563c.809 0 1.465-.746 1.465-1.667 0-.92-.656-1.666-1.465-1.666H16.113c-.807 0-1.465-.748-1.465-1.667 0-.918.655-1.664 1.461-1.666zM46.592 10L41.57 30H17.288l-3.906-20zM14.648 45c0 2.757 1.972 5 4.395 5 2.423 0 4.395-2.243 4.395-5s-1.972-5-4.395-5c-2.423 0-4.395 2.243-4.395 5zm4.395-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667-1.465-.748-1.465-1.667.657-1.667 1.465-1.667zM35.352 45c0 2.757 1.971 5 4.394 5s4.395-2.243 4.395-5-1.972-5-4.395-5c-2.423 0-4.394 2.243-4.394 5zm4.394-1.667c.808 0 1.465.748 1.465 1.667s-.657 1.667-1.465 1.667c-.807 0-1.465-.748-1.465-1.667s.658-1.667 1.465-1.667zm0 0" data-original="#000000" fill="#ff5353"/> </svg></span> (<span class="header-cart edd-cart-quantity"><?php echo edd_get_cart_quantity(); ?></span>)
    </a>
    <?php
}
?>

Code added in function.php of genertepress:

add_action( 'wp_footer', function() { 
    if ( ! empty( $cart_contents )  ) {        
        echo '<style type="customicon">.header-cart{ display: none; }</style>';    
    }
});

The last issue is caching I am using wp-rocket. And I have to clear the cache after removing item from cart to make it disappear.
Else everything is working fine.
🙂
Very happy with the support.

[David]

Glad to hear that!

[Author]

Posts