Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #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!

    #1231051

    Hey 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,
    Nikko

    #1231068

    Hi 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! :-)

    #1231828

    Hey,

    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,
    Yigit

    #1231883

    Hi 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 ;-)

    #1232475

    Hi 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,
    Nikko

    #1232827

    Hi 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?

    #1232846

    Also, 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)

    #1232854

    Hi 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,
    Nikko

    #1233058

    Hi 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 a display: 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!

    #1233137

    Hi 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,
    Nikko

    #1233163

    Hi, 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.

    #1233174

    Hi 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,
    Nikko

    #1233201

    Hi Nikko,
    thanks, i will test it.

    #1233242

    Hi roihaddl,
    If your test is working, could you please tell me how you integrated this in the original function?
    Thank you very much! ;-)

    #1233243

    Hi 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.

    #1233663

    Hi 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,
    Nikko

    #1263424

    Hi 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!

    #1263498

    Hi fcp,

    Yes, you should be able to use it and just add some code to add the wishlist icon.

    Best regards,
    Nikko

    #1263527

    Hi 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!

    #1263910

    Hi 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,
    Nikko

    #1264773

    Hello,

    in my Enfold is not working, i have error: Cannot redeclare function avia_woocommerce_cart_placement.

    can you help me?

    #1264775

    Hi,

    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,
    Yigit

    #1265027

    Hi Nikko,
    Thanks a lot for your reply!
    By doing this, wishlist icon seems to be displayed, but shopping cart icon is not displayed anymore… :-(

    #1265117

    Hi 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,
    Nikko

    #1265187

    Sure 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.

    #1265402

    Hi 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,
    Nikko

    #1265648

    Hi Nikko,
    Your code works perfectly.
    Thank you so much for your help on this!
    Regards

    #1265688

    Hi fcp,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 29 posts - 1 through 29 (of 29 total)
  • The topic ‘Add icon next to shopping cart icon’ is closed to new replies.