WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce Menu Cart
[resolved] Works a treat with UberMenu :) (15 posts)

  1. James
    Member
    Posted 1 year ago #

    Hi JPRunner,

    Just wanted to say well done - a plugin that does exactly what it says on the tin, without any fuss and works perfectly (even with UberMenu!). Settings in a sensible easy to find location under the WooCommerce menu and options are clear and make sense.

    One very small request if I may regarding the shopping trolley icon: the trolley ideally needs to come down a fraction so that the wheels are on the exact same level as the base of the text. Currently it's just ever so slightly above the line which makes it look like the last item in the menu (the shopping cart) is at a different height to the rest of the menu items. After checking against the bottom of the browser window it turns out the shopping cart text is correctly aligned with the other menu items, but the trolley icon is flying in the air slightly.

    Does that make sense? Maybe just more obvious with my theme, or perhaps I'm being overly picky (but for me this is the final 1% to make the plugin 100% perfect so I thought worth mentioning!).

    You can see the "problem" live on my site here:
    http://matchlessclueless.com

    Great plugin, thanks. James :)

    http://wordpress.org/extend/plugins/woocommerce-menu-bar-cart/

  2. Jeremiah
    Member
    Plugin Author

    Posted 1 year ago #

    Hi James,

    Glad you like it! Normally the plugin lines up just as you're wanting. I checked out your site, and it looks like there's a conflict with a plugin called "My Shortcodes" of which I was previously unaware. I found a fix, and I'll be sure to add it in the next update. For now, copy the following CSS and paste it into your theme's custom css file (probably named "custom.css").

    [class^="icon-"], [class*=" icon-"] {
        background-image: none;
        background-position: none;
        background-repeat: no-repeat;
        display: inline-block;
        height: auto;
        line-height: inherit;
        vertical-align: inherit;
        width: auto;
    }

    Also, if you're willing I would love if you took what you wrote here and reviewed & rated the plugin on the ratings tab. Thanks for your support! Let me know if you need anything else.

  3. James
    Member
    Posted 1 year ago #

    Hi Jprummer,

    Thanks for the quick response. The above code pasted into my custom css has indeed done the trick and the trolley is now firmly grounded!

    The css editor is showing up a couple of exclamation mark flags though with the code that maybe mean more to you than they do to me.

    Next to line #1:
    Attribute selectors with ^= are slow!
    Attribute selectors with *= are slow!
    Unqualified attribute selectors are known to be slow.

    Next to line #3:
    Expected (<bg-position>) but found 'none'.

    Any idea what these mean and how they should be tweaked accordingly please?

    Thanks, James :)

  4. Jeremiah
    Member
    Plugin Author

    Posted 1 year ago #

    Hi James!

    I dug into the css on the other plugin and I think this should do the trick:

    .icon-shopping-cart {
        background-image: none;
        background-position: none;
        background-repeat: no-repeat;
        background-position: none;
        display: inline-block;
        height: auto;
        line-height: inherit;
        vertical-align: inherit;
        width: auto;
    }

    I wouldn't worry too much about those flags. The "My Shortcodes" plugin is already using that method, so it probably won't have too much of an impact, but do try the updated code as it should be more efficient. Please let me know what you find. Also, thanks for the review. Much appreciated!

  5. James
    Member
    Posted 1 year ago #

    Thanks. I've tried the new css code above and this seems to work equally well, but without the line #1 errors I described above. The line #3 exclamation mark is still there, but I will ignore it as you suggest.

    One thing I did notice is that the line:

    background-position: none;

    is repeated twice on lines 3 and 5, so I have removed the second entry and it still seems to work fine, so my css block now looks like this:

    * To correct the formatting of the shopping cart trolley in the top menu */
    .icon-shopping-cart {
    	background-image: none;
    	background-position: none;
    	background-repeat: no-repeat;
    	display: inline-block;
    	height: auto;
    	line-height: inherit;
    	vertical-align: inherit;
    	width: auto;
    }

    So everything looks good in Chrome, so quick check in the dreaded IE9 and strangely both the shopping trolley icon and the associated text are both lifted a tiny fraction (say 0.5mm) above the lien of all the other menu items. I reverted back to your original CSS (and also tried adding in the repeated background-position line) and it is still the same.

    Hmmmm..... James

    P.S. I've reviewed and rated your plugin 5* :)

  6. James
    Member
    Posted 1 year ago #

    How do you get the code to show up nicely in the blue box as you have done above? I've just been through all the options I can see and nothing seems to work, except the block-quote as I've used above which doesn't look so good :(

    My test code...

    Oh, I see now - you use:
    <pre><code>My test code...</pre></code>

  7. Jeremiah
    Member
    Plugin Author

    Posted 1 year ago #

    You got it figured out! Thanks for the review. As far as the IE9 issue, I'm not exactly sure what's going on. My guess is it has to do with the line-height attribute. I've set it to inherit, but maybe you need to set it to your font-size (probably something like 16px). Just play with it a bit and see what works best.

  8. James
    Member
    Posted 1 year ago #

    Morning.

    Ok, so I finally got the line height issue in Internet Explorer and I think it is a css issue with the menu system I have created with the UberMenu plugin.

    Usually a completely unscientific trial-and-error approach changing various css lines 'live' using the Inspect Element option in Chrome, I tracked the issue down to the following property which is set to 1.2em by default.

    #megaMenu ul.megaMenu li a, #megaMenu ul.megaMenu li span.um-anchoremulator {
    line-height: 1.4em;
    }

    I changed it to 1.4em as per the above code and added this to my UberMenu custom css, and it seems to have done the trick! Everything is now all neatly lined up in both Chrome and IE.

    Regards, James :)

  9. James
    Member
    Posted 1 year ago #

    Further to the above, the block of css code you originally suggested as a fix can be cut down to the following:

    /* To correct the height and background of the shopping cart menu item */
    .icon-shopping-cart {
      background-image: none;
      vertical-align: inherit;
    }

    The 'background-image' line removed a shadow image behind the shopping trolley icon (which bizarrely seem to be facing the other way to the actual shopping trolley item!).

    The 'vertical-align' line brings the trolley down on to the same base line as the text.

    This seems to be a css styling issue with the UberMenu plugin rather than your shopping cart menu plugin, but thanks for your help in getting it sorted. I will post a thread on the UberMenu plugin website out of interest as it also affects the additional 'Logout' link that WooCommerce add at the end of the menu too.

    Regards, James

  10. James
    Member
    Posted 1 year ago #

  11. James
    Member
    Posted 1 year ago #

    Hi Jeremiah,

    Just had a reply back on the support thread from the guys at UberMenu, mainly concerning the WooCommerce link but I think you can probably use the same info to tweak the CSS applied to your 'Menu Cart' menu item too. Please see here:
    http://support.sevenspark.com/forum/topic/2369/positioning-of-menu-items-added-by-other-plugins-e-g-woocommerce-logout

    The bit of interest is:

    Thanks for the details, that’s helpful. I’ve looked again and found that it is indeed that because the menu item is not produced by UberMenu, it’s not given that line height. I’ll update the next version of UberMenu to better address this. But I also think that the Woo plugin should add the class “menu-item” to its LI so it identified what it’s injected as a menu item. This will help menu CSS to target it better.

    Regards, James

  12. Jeremiah
    Member
    Plugin Author

    Posted 1 year ago #

    Hi James,

    Thanks for letting me know. We've been working on the next release and it will fix all these issues. You may have to make some slight modifications after you update since the default styles will fix most of the issues you're having. I'm going to go ahead and mark this one as resolved as this will be arriving soon. :)

  13. James
    Member
    Posted 1 year ago #

    Just installed the WooCommerce 'Currency Converter' plugin, to allow customers to display prices in their chosen currency, see here:
    http://www.woothemes.com/products/currency-converter-widget/

    Great to see that the Menu Cart also changes between currencies (when 'display price' option) is selected as you click between the different options.

    Great job, rating increased to 6 stars (if only I could!) :)

  14. Ewout
    Member
    Plugin Author

    Posted 1 year ago #

    Wait until you see the next release, today or tomorrow, 7 stars i bet! :o)

  15. James
    Member
    Posted 1 year ago #

    Great update, still works a treat but with even more options :)

    With regards to UberMenu (as per my other post in this support forum) I've found that the UberMenu CSS overrides the MenuCart CSS so the alignment option doesn't have any effect. But this is easily fixed with the following code in your custom css files:

    /* To over-ride UberMenu with correct MenuCart plugin alignment */
    .wcmenucart-display-right {
    	float: right!important;
    }

    Just thought I'd append this here as it's a better titled thread for anyone searching on this subject in the future....

    Thanks guys, James

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags