Add link to submenu - by nic_and_mel - on WordPress WooCommerce support

This topic has 30 replies, 4 voices, and was last updated 9 years ago ago by Robert Hall

  • Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 08:38

    Hello!

    I would like to add a link to the sub menu (Newsletter | My account | Log in). Is it possible to add another link there (what I really would like to add there is a currency switcher there (2 flags) by shortcode).

    Is this possible?

    Best regards
    Daniel

    29 Answers
    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 20, 2015 at 09:24

    Hello

    You may edit woopress\wp-content\themes\woopress\framework\theme-fuctions.php starting from line 1072 or enter “etheme_top_links” in the search within this document.

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 09:35

    Ho, and thanks for the answer. However I am not that great at coding. Is there any easier way to add a shortcode there, or would it be possible for you to show me the complete code to add a shortcode into the sub menu? I guess it is only a couple of lines of code, but I am lost regarding this.

    Best regards
    Daniel

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 20, 2015 at 09:44

    You may include shortcode using text widget in Appearance->widgets->place in header top bar. Then we may try to change the place of your currency top links using css to the right position near “sign-in” and other links.

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 20:12

    Hello!

    Thank you for the input. Please see the attached image. I would like to be able to add either a link or currency links at the marked area. This header is the one that would fit our design the best. is this possible? I have a shortcode for this. It would be great if it was possible somehow.

    Thank you in advance.

    Best regards
    Daniel

    Top header info

    Avatar: Eva
    Eva Kemp
    Support staff
    April 20, 2015 at 20:40

    Hello,

    In this case you have to edit header.php file and add your customization.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 21:02

    Do you have any info on how to do this? Sorry, but my coding knowledge is quite basic…

    Best regards
    Daniel

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 21:52

    One more thing: How can I get the register link in the top menu, as on your demo-site:
    registration

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 20, 2015 at 23:48

    Hi! I fixed the get the register link. I had to activate everybody can register in woo commerce for it to work.

    However I would still be grateful if you could help me out regarding the coding for adding another link/shortcode in the “top header”

    Thanks.

    Best regards
    Daniel

    Avatar: Eva
    Eva Kemp
    Support staff
    April 21, 2015 at 09:31

    Hello,

    Please provide us with the code you need to insert and give us FTP access in Private Content.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 21, 2015 at 11:30

    Hello!

    The code I would like to add is the shortcode for the currency switcher from Woocommerce multilingual [currency_switcher] or the widget, and also the widget for language selection (unfortunately there is no shortcake for the language selector from wpml).

    I can add this to the top bar for example in header 1, 4 and 9, no problem by using the place in top bar widget, but I really do prefer to use the header 11 since it is much more practical.

    Of course I can use the other headers, and also place it in the footer, however it would be much better to have between the top menu and the cart in header 11 if this is not to much work. The best thing would be if it was possible to add some code so that I can add other things there like links in the future :)…

    Best regards
    Daniel

    Please, contact administrator
    for this information.
    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 21, 2015 at 12:22

    Hello

    I have added shortcode to your theme-function.php Please provide us with correct wp-admin credentials because we are unable to login with these below.

    With best regards
    Brian Johnson

    Please, contact administrator
    for this information.
    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 21, 2015 at 13:28

    Hi.

    See the wp-admin credentials in private.

    However I can not access the wp-admin loginpage anymore. Are you working on something right now?

    Best regards
    Daniel

    Please, contact administrator
    for this information.
    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 21, 2015 at 17:20

    Hello

    I have checked your site and now top links are updated with your link. Please create Child theme to avoid overwriting of your files with possible theme update. You may add following code into the custom.css to fix layout of the top links:
    .curr_list_horizontal li{float:none!important;}

    With best regards
    Brian Johnson

    Avatar: Eva
    Eva Kemp
    Support staff
    April 21, 2015 at 17:23

    Hello,

    I’ve edited the code and added this one to custom.css file:

    ul.wcml_currency_switcher {
        padding-top: 10px !important;
    }
    ul.wcml_currency_switcher.curr_list_horizontal li {
        font-weight: normal;
        font-size: 12px;
    }

    Please check your site now.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 21, 2015 at 18:19

    Hello and thank you for your help.

    However, the currency converter links are not in line with the rest of the links (newsletter, sing in, register) but higher up. Also, the language switcher is not there.

    I guess this might be to much to ask for and also to much customisation. Maybe it is better if I just try to find another solution to the problem, maybe put the links in the footer, or use another header (even if I love header 11 🙂

    Is it tricky to reset it back to how it was before?

    Sorry for the problems. Sometimes I guess I want to much customisation, and just have to be happy with whats available 🙂

    Thank you again.

    Best regards
    Daniel

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 21, 2015 at 20:17

    1. Please provide us with language switcher code so we may insert it. You may change header because the implemented line of code is not within header.php now.
    2. Please provide us with picture or screenshot which describes how the layout should look. We will make adjustment to the color, size, font, position.
    Also we strongly recommend you to create Child Theme for any customization because it can be lost if you decide to make an update of the theme.

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 21, 2015 at 21:49

    Hi!

    1. Unfortunately wpml does not provide a code for language switcher. You can only use it as a widget.

    They have this code for adding adop down, but that not what I want, and they suggest I create a custom language switcher. It seems like to much work.

    I did try out the widget shortcode, and this is the shortcode that you can implement. If you can add it and get it to look like in my attached image, it would be great. However, it might be good if I can remove it easily. If you can fix it, can you also point me to where I find the changed code and how to change it back?

    2. See attached image for the look I am after (this should also work if I use another header, then the links all will be in the top header, correct?

    3. I will try to set up a child theme but have never done this.

    Thanks for all your support. Please let me know if it is to much work/tricky or dont work. Then I will use another solution.

    Best regards
    Daniel

    header image

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 22, 2015 at 12:03

    Hello
    1. I have added widget area “language switcher” and put WMPL widget there. You may find widget and Currency code which we inserted in functions.php of the Child Theme in wp-content/woopress-child/.
    2. Yes you may change header and no change should appear for layout of links. They are placed within function “top-links”. You may check it in Child Theme.
    3. It is implemented.
    I have added following css code into the custom.css:
    .links .lastItem{height:12px!important;}#lang_sel_list li:after {display:none;}
    #lang_sel_list {height:15px!important;}

    .links .currency_switcher{width:150px;padding-left:6px;}
    .links .currency_switcher ul {position:absolute; height:0px!important;line-height:27px}
    .links .currency_switcher ul li{font-size:12px;padding:0!important;margin:0!important;font-style:normal!important;font-weight:200!important;}
    .links .cur_word:after{display:none!important}
    

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 22, 2015 at 13:38

    Thank you! It looks nice now 🙂

    Great support.

    One last question. I have never worked with the child theme. If I want to do changes to the function.php or other files, do I do this in the child theme, and then they will show on the site? And if something goes wrong with my changes, how do I revert so that the changes I made in the child them is reset?

    Best regards
    Daniel

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 22, 2015 at 14:07

    Oh, yes, and one more thing, sorry:

    On the mobile menu, the flags and currency looks really strange, wrong order and on top of each-other. Is this easy to fix?

    Almost there 🙂

    Best regards
    Daniel

    Avatar: Robert Hall
    Robert Hall
    Support staff
    April 22, 2015 at 14:21

    Hello,

    1) You can read more information about Child Theme here:
    https://codex.wordpress.org/Child_Themes
    2) Please add this code in custom.css file

    @media only screen and (max-width: 480px){
    .links .currency_switcher ul {
      position: relative;
      height: inherit;
      line-height: normal;
    }
    }

    Regards,
    Robert Hall.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 23, 2015 at 11:00

    Hi!

    I added the code into the customs css-file, but it still looks bad.

    Also, I have an additional question:
    On the iPhone/ipad the custom font I am using is not visible. I am using brandon grotesque. I have changed the references from raleway in the style.css, and added the font to my ftp. It works on my computer (safari), but not in firefox (like on the iphone/ipad). It reverts to standard tex (i.e helvetica).

    Where should I put the code for the style.css to pick up the correct font? And what is the code?

    PS: Can I add the style.css to the child theme as well, so that I keep the org in the reg. theme folder, so my changes in the style.css does not disappear at an update?

    Best regards
    Daniel

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 23, 2015 at 12:05

    1. Please provide us with picture or screenshot of how should mobile layout look.
    2. You may add the code from custom.css to the style.css of the Child Theme and place there also all your modifications of the default style.css. You can also transfer all code within default style.css except commented heading to the Child theme file and it may cause few minor errors. Therefore it is better to put only your customized code to the style.css of the Child Theme.

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 23, 2015 at 14:05

    HI again!

    Regarding the layout for the currency switcher, I think the best thing would be if it is a drop down menu. I can choose this in the back end for the currency switcher, but then of course the drop down meny looks really bad.

    I have made a few changes to the code in the css that you provided, but I can only get it to look like the attached image. The drop down is always above the line of the other links. I want it on the same line, as in the second image. Here is the code I made:

    .links .lastItem{height:12px!important;}#lang_sel_list li:after {display:none;}
    #lang_sel_list {height:15px!important;}

    .wcml_currency_switcher {padding-left:12px;height:26px;line-height:8px;background: transparent !important;font-size:11px;}
    .links .currency_switcher{width:80px;padding-left:0px!important;padding-right: 0px!important;}
    .links .currency_switcher ul {position:absolute; height:0px!important;line-height:26px;}
    .links .currency_switcher ul li{font-size:12px;padding-left:0!important;margin:0!important;font-style:normal!important;font-weight:400!important;border:0px!important; background: transparent !important;}
    .links .cur_word:after{display:none!important}

    Header drop down

    PS, did you have any info regarding how I get my font working for the side in other browsers and ipad/iphone? Now it only works in safari. I have added the font into the font folder in the theme, and also replaced the standard font raleway in style.css.

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 23, 2015 at 15:07

    You may try this code:

    .icl-en .icl-sv .currency_sel_widget-5 {
         background: transparent !important;
    }
    .links li{display: inline!important;}
    .links .lastItem{height:12px!important; display: inline-block!important;}#lang_sel_list li:after {display:none;}
    #lang_sel_list {height:15px!important;}
    
    .wcml_currency_switcher {display:inline!important;width:60px!important;padding-left:12px;height:26px;line-height: 9px;background: none !important;font-size: 11px;}
    .links .currency_switcher{width: 50px!important;padding-left:0px!important;padding-right: 0px!important;}
    .links .currency_switcher ul {position:absolute; height:0px!important;line-height:26px;}
    .links .currency_switcher ul li{font-size:12px;padding-left:0!important;margin:0!important;font-style:normal!important;font-weight:400!important;border:0px!important; background: transparent !important;}
    .links .cur_word:after{display:none!important}
    
    select.wcml_currency_switcher {
       margin-top: 10px;
      padding: 0px!important;
    }

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 26, 2015 at 11:02

    Hello!

    Thank you for the code, it did work, and now I can do changes to it to get it to look like I want or use drop down or just links, thank you 🙂

    One thing still: On the menu for mobile it looks all wrong and does not work properly. Please see the attached image (left). How can I get it to look like the second image (right)? (I have chosen to use drop down menus in the wpml and woo commerce multi currency plugins for the top header, and if it could be this in the mobile menu it would be great.

    Thank you in advance.

    Best regards
    Daniel

    mobile menu

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 27, 2015 at 10:56

    Hello

    Please add following code into the custom.css:

    .Switcher .textwidget{transform:translatey(15px)}
    #lang_sel ul ul{width:110px}
    .mobile-nav .cur_word{color:white;padding-left:9px}
    .mobile-nav .wcml_currency_switcher{margin-left:10px!important}
    .mobile-nav #lang_sel li > ul{display:block!important}
     #lang_sel{width:110px}
     .mobile-nav .links li{width:100%!important;}
     .mobile-nav #lang_sel ul{width:100%!important;padding:0!important;margin:0!important;}
     .mobile-nav #lang_sel a.lang_sel_sel {width:!important;padding:0 0 0 5px!important;margin:0!important;}
    
    

    With best regards
    Brian Johnson

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    April 27, 2015 at 20:59

    Hi!

    It worked nicely, thank you so much 🙂

    I now have turned of the function while I am testing a few things, but I have saved all info so I can easily start it up again (I have tried and it worked:)

    Thank you for great feedback and support.

    Best regards
    Daniel

    Avatar: Robert Hall
    Robert Hall
    Support staff
    April 27, 2015 at 21:49

    Hello,

    You’re welcome!

    Regards,
    Robert Hall.

  • Viewing 30 results - 1 through 30 (of 30 total)

The issue related to '‘Add link to submenu’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.