Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

WooWallet nav menu icons and text compatibility

This topic is resolved
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Using WooWallet. Superb, highly recommend you add it to your compatible plugins list? Check ref images.

    Only dilemma is adding an icon to the menu.

    1. I downloaded ‘menu shortcodes’ plugin to add the woo wallet shortcode of ‘wallet balance’ to be displayed.
    2. This plugin is not compatible with any classes or html codes.
    3. Failed to find any other plugins to add menu shortcodes. So am stuck with only a menu balance, no wallet icon.
    4. ven adding text ‘wallet’, the font comes out bulky and of a different face, which cannot be changed with HTML either.
    5. Tried adding css to customiser, then linking an image in, and referencing the image as a css class. This did not work either.
    6. downloaded two ‘menu icon’ plugins but are not compatible in conjunction with the ‘shortcode menu’ plugin.

    The authors option is adding this snippet.

    function woo_mini_wallet_callback() {
        if (!function_exists('woo_wallet') || !is_user_logged_in()) {
            return '';
        }
        ob_start();
        $title = __('Current wallet balance', 'woo-wallet');
        $mini_wallet = '<a class="woo-wallet-menu-contents" href="' . esc_url(wc_get_account_endpoint_url(get_option('woocommerce_woo_wallet_endpoint', 'woo-wallet'))) . '" title="' . $title . '">';
        $mini_wallet .= '<img style="width:16px;height:16px;float:left;margin:4px;" src="' . WOO_WALLET_ICON . '" /> ';
        $mini_wallet .= woo_wallet()->wallet->get_wallet_balance(get_current_user_id());
        $mini_wallet .= '</a>';
        echo $mini_wallet;
        return ob_get_clean();
    }
    add_shortcode('woo-mini-wallet', 'woo_mini_wallet_callback');

    It produces error. See attached in next post.

    This below one works fine, by removing one of the extra lines. But problem is that cannot add icon or text. It only has the balance….

    function woo_mini_wallet_callback() {
        if (!function_exists('woo_wallet') || !is_user_logged_in()) {
            return '';
        }
        ob_start();
        $title = __('Current wallet balance', 'woo-wallet');
        $mini_wallet = '<a class="woo-wallet-menu-contents" href="' . esc_url(wc_get_account_endpoint_url(get_option('woocommerce_woo_wallet_endpoint', 'woo-wallet'))) . '" title="' . $title . '">';
        $mini_wallet .= woo_wallet()->wallet->get_wallet_balance(get_current_user_id());
        $mini_wallet .= '</a>';
        echo $mini_wallet;
        return ob_get_clean();
    }
    add_shortcode('woo-mini-wallet', 'woo_mini_wallet_callback');

    How to add text and icon?

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne
    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne
    This reply has been marked as private.
    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    How do I set endpoint to be /user and not the WC endpoint of /user/wallet as specified in this snippet?

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    If it is easier, can I add a new wallet icon to this menu, and link it to /user?

    Please share instruction if this is possible as a work-around solution.

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    To summarize, the link to the wallet (see screenshot) should display an icon (like a wallet) and move to the right (next to the other icons)?

    Thanks in advance for your answer.

    Best regards,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    1. display wallet icon with balance next to existing icons on right
    2. link this icon/text to /wallet and not /user/wallet

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    To change this, simply add the following code snippet to your website:

    /* Display for Woowallet menu -item */
    @media screen and (min-width: 992px) {
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu {
    		width: 100%;
    		align-items: center;
    	}
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu .menu-item:first-child {
    		margin-left: auto !important;
    	}
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu .right {
    	    margin-left: auto;
        	margin-right: 20px;
    	}
    	.woo-wallet-menu-contents {
    		text-align: center;
    	}
    
    	.woo-wallet-menu-contents .woo-wallet-icon-wallet {
    		display: block;
    		margin-top: 5px;
    		margin-bottom: 3px;
    	}
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    For the link (/user/wallet), we advise you to ask the plugin support, they will be better able than us to provide you with a solution:
    https://wordpress.org/support/plugin/woo-wallet

    All the best,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    Thank you very much 🙂

    Small request… as the menu opens, the icon appears side by side with the text (as attached).

    Can it stack with small screen devices to have the wallet icon be above the price/number/text?

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    Hi @abourne,

    Here is the updated CSS snippet:

    /* Display for Woowallet menu -item */
    @media screen and (min-width: 992px) {
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu {
    		width: 100%;
    		align-items: center;
    	}
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu .menu-item:first-child {
    		margin-left: auto !important;
    	}
    	.main-navigation.navbar--classic-center .navbar-nav--main-menu .right {
    	    margin-left: auto;
        	margin-right: 20px;
    	}
    	.woo-wallet-menu-contents {
    		text-align: center;
    	}
    
    	.woo-wallet-menu-contents .woo-wallet-icon-wallet {
    		margin-top: 5px;
    	}
    }
    
    .main-navigation.navbar--classic-center .navbar-nav--main-menu .right a {
    	display: inline-block;
    	padding: 1rem;
    }
    .main-navigation.navbar--classic-center .navbar-nav--main-menu .woo-wallet-icon-wallet {
    	display: block;
    	text-align: center;
    	margin-bottom: 4px;
    }

    Please replace the previous snippet by this one and it should fix the issue.

    Regards,

    alex
    Participant
    • 81 Topics
    • 259 Posts
    @abourne

    It surely did. What doesn’t css do… thanks for the magic solutions.

    Regards

    Themosaurus
    Keymaster
    Themosaurus Support
    • 1 Topics
    • 1675 Posts
    @themosaurus

    You’re welcome. ?

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘WooWallet nav menu icons and text compatibility’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site