-
AuthorPosts
-
July 16, 2020 at 11:02 pm #1231039
Hi,
I would like to add a “My account” icon next to my shopping cart icon (see mockup in private content).
If needed, you can find a link and credentials to my website in private content.
Thanks a lot!July 17, 2020 at 12:09 am #1231051Hey fcp,
You can use header widget to add it: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Hope this helps.Best regards,
NikkoJuly 17, 2020 at 12:51 am #1231068Hi Nikko,
Thanks for your reply.
I followed your link to add a widget area to my header.
Then I added a widget with some HTML code to display an icon in the zone.
The icon is correctly displayed, but to the left and top of my header (see screenshot in private content).
How could I display this widget zone next to my shopping cart icon?
Thanks a lot! :-)July 20, 2020 at 7:20 pm #1231828Hey,
I checked your website and it shows up right next to cart icon. I attached a screenshot in private content field.
I believe this was related to errors in your style.css file. Could you please check and confirm? :)
Regards,
YigitJuly 20, 2020 at 11:21 pm #1231883Hi Yigit,
No, this is not related to errors in my style.css file.
I only move it from its original place using this code:#header .widget { position: absolute!important; left: 89%!important; top: 14%!important; }
but this is absolutely not a solution. The icon is never at the same place. It depends on screen size.
What I need is adding an icon which really belongs to my menu, next to my cart.
In this thread https://kriesi.at/support/topic/my-account-icon/ I found this code which seems to add an icon before main menu:
// add account icon add_action('ava_after_main_menu', function() { echo '<a class="mobile-account" href="#"><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span></a>'; });
or this code which seems to add an icon after secondary menu:
// add account icon add_action('avia_meta_header', function() { echo '<a class="mobile-account" href="#"><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span></a>'; });
but which function could add an icon before cart icon in the logo area?
I also found this code in this thread https://kriesi.at/support/topic/extra-icon-next-to-shopping-cart-icon/:
add_action( 'init', 'avia_woocommerce_cart_placement', 10); function avia_woocommerce_cart_placement() { $position = avia_get_option('header_position', 'header_top') == "header_top" ? "ava_main_header" : "ava_inside_main_menu"; if(avia_get_option('cart_icon') == "always_display_menu") { $position = "ava_inside_main_menu"; if( strpos( avia_get_option('header_layout'), 'bottom_nav_header') !== false && avia_get_option('header_position') == 'header_top') { $position = "ava_before_bottom_main_menu"; } } add_action( $position, 'avia_woocommerce_cart_dropdown', 10); add_action( $position, 'avia_woocommerce_quote_dropdown', 10); } function avia_woocommerce_quote_dropdown() { global $woocommerce, $avia_config; $output = "Something here"; echo $output; }
It seems to add element in the logo area, but it also deals with quote dropdown and so on, and I don’t need all this stuff…
Which function is the good one to simply add an icon to the shopping cart area?
Thanks ;-)
July 23, 2020 at 4:00 am #1232475Hi fcp,
Please remove all the things you added for header widget.
Then in your child theme’s functions.php, please add this code:add_action( 'init', 'avia_woocommerce_cart_placement', 10); function avia_woocommerce_cart_placement() { $position = avia_get_option('header_position', 'header_top') == "header_top" ? "ava_main_header" : "ava_inside_main_menu"; if(avia_get_option('cart_icon') == "always_display_menu") { $position = "ava_inside_main_menu"; if( strpos( avia_get_option('header_layout'), 'bottom_nav_header') !== false && avia_get_option('header_position') == 'header_top') { $position = "ava_before_bottom_main_menu"; } } add_action( $position, 'enfold_woocommerce_cart_dropdown', 10); } function enfold_woocommerce_cart_dropdown() { global $woocommerce, $avia_config; $cart_subtotal = $woocommerce->cart->get_cart_subtotal(); $link = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : $woocommerce->cart->get_cart_url(); $id = ""; $added = wc_get_notices('success'); $trigger = !empty($added) ? "av-display-cart-on-load" : ""; if(avia_get_option('cart_icon') == "always_display_menu") { $id = 'id="menu-item-shop"'; } $output = ""; $output .= "<ul {$id} class = 'menu-item cart_dropdown {$trigger}' data-success='".__('was added to the cart', 'avia_framework')."'><li class='cart_dropdown_first'>"; $output .= "<a class='cart_dropdown_link' href='".$link."'><span ".av_icon_string('cart')."></span><span class='av-cart-counter'>0</span><span class='avia_hidden_link_text'>".__('Shopping Cart','avia_framework')."</span></a><!--<span class='cart_subtotal'>".$cart_subtotal."</span>-->"; $output .= "<div class='dropdown_widget dropdown_widget_cart'><div class='avia-arrow'></div>"; $output .= '<div class="widget_shopping_cart_content"></div>'; $output .= "</div>"; $output .= "</li></ul>"; $output .= "<ul id='menu-item-profile' class='menu-item'>"; $output .= "<li class='profile-item'><a href='#replace_with_link'><span ".av_icon_string('profile')."></span></a></li>"; $output .= "</ul>"; echo $output; } add_filter('avf_default_icons', 'enfold_extra_icons'); function enfold_extra_icons($icons) { $icons['profile'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue80a'); return $icons; }
You will only need to replace this part of the code I gave:
$output .= "<li class='profile-item'><a href='#replace_with_link'><span ".av_icon_string('profile')."></span></a></li>";
if it’s only the link you need to change, then just replace #replace_with_link
Then to fix the styles, add this in Quick CSS:
#menu-item-profile { float: right; right: -34px; position: relative; } #menu-item-profile .profile-item a, #menu-item-shop .cart_dropdown_link { padding: 0 16px; display: block; }
Hope this helps.
Best regards,
NikkoJuly 24, 2020 at 12:44 am #1232827Hi Nikko,
It helps a lot and I already thank you very much for your work!
Your functions and css works perfectly on desktop (see Screenshot 1 in private content).
But I don’t know why, the #menu-item-profile element goes down on mobile and tablet (see Screenshot 2 in private content).
Do you know what’s the matter with this?July 24, 2020 at 2:06 am #1232846Also, between 768 and 989 pixels screen wide, a white space is added between my menu and my slider, because of this code:
#menu-item-profile { float: right; }
(see screenshot in private content)
July 24, 2020 at 4:25 am #1232854Hi fcp,
You’re welcome :)
Please add this CSS code in Quick CSS:@media only screen and (max-width:767px) { .responsive.html_bottom_nav_header #top #menu-item-profile { position: absolute; right: 40px; top: 0; margin: 0; } }
Best regards,
NikkoJuly 24, 2020 at 6:51 pm #1233058Hi Nikko,
Your code helps again.
I have one last question: I would only need to add this #menu-item-profile element on mobiles and tablets portrait.
I know I could add adisplay: none
to the element for screens largest than 768px, but is there a way to applicate the functions to one specific size of screen directly in the function itself, by adding some code in it?
Thanks a lot!July 25, 2020 at 5:13 am #1233137Hi fcp,
You’re welcome :)
I’m not really sure what function you’d like to set and on what specific size of the screen but I think there’s a way for it.
If it’s a php code then I’m not sure if there’s a way to detect screen size though mobile detection is possible.
I would suggest writing a javascript or jquery code which has ways to detect screen sizes then run your code if it’s using the specific screen size.
I hope the idea is helpful.Best regards,
NikkoJuly 25, 2020 at 8:57 am #1233163Hi, this code was very helpful for me. Is it possible to show with the icon, that the customer is logged in? Like other color or other icon?
Thanks for the great support.July 25, 2020 at 11:20 am #1233174Hi roihaddl,
Yes it’s possible but you would need to add a condition (if/else statement) and use is_user_logged_in() function provided by WordPress.
You can refer to the codex: https://developer.wordpress.org/reference/functions/is_user_logged_in/
Hope this helps :)Best regards,
NikkoJuly 25, 2020 at 2:04 pm #1233201Hi Nikko,
thanks, i will test it.July 25, 2020 at 10:45 pm #1233242Hi roihaddl,
If your test is working, could you please tell me how you integrated this in the original function?
Thank you very much! ;-)July 25, 2020 at 10:48 pm #1233243Hi Nikko,
The function I would like to set is the one you gave me in this thread, and I would need to enable it for screens from 0px to 767px only.July 28, 2020 at 6:16 am #1233663Hi fcp,
If you’re referring on the PHP code I posted first, then this should be the code to enable it on mobile screens (this won’t work on desktop and shrinking the browser):
if( wp_is_mobile() ) { add_action( 'init', 'avia_woocommerce_cart_placement', 10); function avia_woocommerce_cart_placement() { $position = avia_get_option('header_position', 'header_top') == "header_top" ? "ava_main_header" : "ava_inside_main_menu"; if(avia_get_option('cart_icon') == "always_display_menu") { $position = "ava_inside_main_menu"; if( strpos( avia_get_option('header_layout'), 'bottom_nav_header') !== false && avia_get_option('header_position') == 'header_top') { $position = "ava_before_bottom_main_menu"; } } add_action( $position, 'enfold_woocommerce_cart_dropdown', 10); } function enfold_woocommerce_cart_dropdown() { global $woocommerce, $avia_config; $cart_subtotal = $woocommerce->cart->get_cart_subtotal(); $link = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : $woocommerce->cart->get_cart_url(); $id = ""; $added = wc_get_notices('success'); $trigger = !empty($added) ? "av-display-cart-on-load" : ""; if(avia_get_option('cart_icon') == "always_display_menu") { $id = 'id="menu-item-shop"'; } $output = ""; $output .= "<ul {$id} class = 'menu-item cart_dropdown {$trigger}' data-success='".__('was added to the cart', 'avia_framework')."'><li class='cart_dropdown_first'>"; $output .= "<a class='cart_dropdown_link' href='".$link."'><span ".av_icon_string('cart')."></span><span class='av-cart-counter'>0</span><span class='avia_hidden_link_text'>".__('Shopping Cart','avia_framework')."</span></a><!--<span class='cart_subtotal'>".$cart_subtotal."</span>-->"; $output .= "<div class='dropdown_widget dropdown_widget_cart'><div class='avia-arrow'></div>"; $output .= '<div class="widget_shopping_cart_content"></div>'; $output .= "</div>"; $output .= "</li></ul>"; $output .= "<ul id='menu-item-profile' class='menu-item'>"; $output .= "<li class='profile-item'><a href='#replace_with_link'><span ".av_icon_string('profile')."></span></a></li>"; $output .= "</ul>"; echo $output; } add_filter('avf_default_icons', 'enfold_extra_icons'); function enfold_extra_icons($icons) { $icons['profile'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue80a'); return $icons; } }
Best regards,
NikkoNovember 27, 2020 at 3:31 am #1263424Hi Nikko,
Sorry for the late reply.
Your function works great!
Now I would need to add one more icon (linked to my wishlist page) next to the cart icon and the previous icon.
Could I use your previous function and add some code in it to achieve this?
Thanks a lot!November 27, 2020 at 11:49 am #1263498Hi fcp,
Yes, you should be able to use it and just add some code to add the wishlist icon.
Best regards,
NikkoNovember 27, 2020 at 2:49 pm #1263527Hi Nikko,
Thanks for your reply.
I don’t really know where to add pieces of code to achieve this :-(
Could you please help me to customize the code?
Thanks a lot!November 30, 2020 at 11:57 am #1263910Hi fcp,
I see, please add this code in functions.php of your child theme:
function enfold_default_icons($icons) { $icons['wishlist'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue807'); return $icons; } add_filter('avf_default_icons', 'enfold_default_icons');
Then you’ll also need to add this code in the enfold_woocommerce_cart_dropdown function:
$output = "<ul id='menu-item-wishlist' class='menu-item'>"; $output .= "<li class='wishlist-item'><a href='#replace_with_link'><span ".av_icon_string('wishlist')."></span></a></li>"; $output .= "</ul>";
place it above:
$output .= "<ul id='menu-item-profile' class='menu-item'>";
Best regards,
NikkoDecember 3, 2020 at 1:52 pm #1264773Hello,
in my Enfold is not working, i have error: Cannot redeclare function avia_woocommerce_cart_placement.
can you help me?
December 3, 2020 at 2:12 pm #1264775Hi,
Could you please post FTP logins here privately so we can fix it for you? It seems like “avia_woocommerce_cart_placement” function was declared multiple times :)
Best regards,
YigitDecember 4, 2020 at 3:17 pm #1265027Hi Nikko,
Thanks a lot for your reply!
By doing this, wishlist icon seems to be displayed, but shopping cart icon is not displayed anymore… :-(December 5, 2020 at 5:49 am #1265117Hi fcp,
Are you still referring to the same site? (link in private content).
I looked into functions.php and the code is not there.Best regards,
NikkoDecember 5, 2020 at 3:43 pm #1265187Sure I’m referring to the same site.
The code is not in my functions.php file because me website is online, so I removed the code immediately when I saw that my shopping cart icon was not displayed anymore.December 7, 2020 at 7:29 am #1265402Hi fcp,
I see, below this code that I gave before:
$output .= "<li class='profile-item'><a href='#replace_with_link'><span ".av_icon_string('profile')."></span></a></li>";
add this code (and replace the link):
$output .= "<li class='wishlist-item'><a href='#replace_with_link'><span ".av_icon_string('wishlist')."></span></a></li>";
And below this code:
$icons['profile'] = array('font' =>'awesome-font', 'icon' => 'uf2bd');
add:
$icons['wishlist'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue807');
Then add this CSS code:
.responsive.html_bottom_nav_header #top #menu-item-profile { display: flex; } .responsive.html_bottom_nav_header #top #menu-item-profile li { margin-left: 8px; }
Best regards,
NikkoDecember 8, 2020 at 1:02 am #1265648Hi Nikko,
Your code works perfectly.
Thank you so much for your help on this!
RegardsDecember 8, 2020 at 6:29 am #1265688Hi fcp,
We’re glad that we could help :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Add icon next to shopping cart icon’ is closed to new replies.