Find Answers and Get Support › Forums › Gwangi – PRO Multi-Purpose Membership, Social Network & BuddyPress Community Theme › Theme Customizer › Additional CSS › WooWallet nav menu icons and text compatibility
- This topic has 11 replies, 2 voices, and was last updated 6 years, 2 months ago by
Themosaurus.
-
AuthorPosts
-
alexParticipant@abourne
- 81 Topics
- 259 Posts
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?
Screenshot-176
Screenshot_2018-11-28-GYMR
Screenshot_2018-11-28-GYMR4
Screenshot_2018-11-28-GYMR3
Screenshot_2018-11-28-GYMR2
November 28, 2018 at 19:56 #3908@themosaurus- 1 Topics
- 1675 Posts
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-walletAll the best,
December 3, 2018 at 15:37 #3995@themosaurus- 1 Topics
- 1675 Posts
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,
December 5, 2018 at 10:24 #4063@themosaurus- 1 Topics
- 1675 Posts
You’re welcome. ?
Best regards,
December 6, 2018 at 14:40 #4105 -
AuthorPosts
The topic ‘WooWallet nav menu icons and text compatibility’ is closed to new replies.