Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #372788

    The Woocommerce cart icon, and the flyout notifications are very slick, I love them!

    For the site I’m working on, I think it would look best if the cart icon appeared as the last icon in the Social Icons menu at the top of the header. Now I could just add a cart icon with a simple link to the cart to the social icons list, but then I wouldn’t have the flyout functions.

    How can I get the content from <ul class=”cart_dropdown… floating to the left of my <ul class=”social_bookmarks” ? Right now they are in separate divs.


    Hi hmsvictory!

    Open up /enfold/config-woocommerce/config.php and change line 782 from this.

    add_action( $position, 'avia_woocommerce_cart_dropdown', 10);

    To this.

    add_action( 'ava_inside_main_menu', 'avia_woocommerce_cart_dropdown', 10);



    Pretty close!

    Instead of moving to the main menu, can we just move it after (next to) the social icon menu? Inside the header_meta div.



    You’ll need to move it around with CSS.

    .cart_dropdown { top: -20px !important; }



    Elliott, thanks for your patience with me. That will work great. I can move the icon menu over a bit and style the cart button to match the others. No problem.

    Is there any way to turn off the easing behavior of the cart icon so it doesn’t slide in? I would also like it to be there all the time, even when it’s empty.



    Can you please post the link to your website?


    This reply has been marked as private.


    I added some CSS to your Quick CSS field to align it with your social icons. It’s going to display all the time, even when it’s empty, when you do this, https://kriesi.at/support/topic/ (Purchase code hidden if logged out) -social-icon-menu/#post-372896.

    If you do not see it when it’s empty then try clearing your browser cache.



    Thanks Elliott. I had updated config.php and the cart does display when empty. It’s also lined up with the menu so I appreciate the help. I can style the icon to match and move the other menu over when I have some time.

    The only problem I see is the way the cart “slides” in when each page opens – it doesn’t behave like the other icons which is distracting and I don’t think the client will like that, having one icon ease in on every page load. I don’t see anything in the css to control that, it must be in the javascript?


    Guys, I apprecaite the effort very much! For now I will turn off the flyout cart and use a different solution to put a cart link & summary next to the icon menu using the Woocommerce Menu Cart plugin to add a cart icon/link/total to my secondary menu next to the social icons. For now that will be fine.

    One of the best parts of enfold is the header options, having many different ways to assemble the information together. The flyout cart is great and it will work for many layouts – in the future it would be great to have a little more control where to put it so it can be visually integrated into the flow of the site.

    Thanks for helping me once again, I am very grateful.



    Please feel free to post your feature requests here – https://kriesi.at/support/enfold-feature-requests/
    Glad you figured it out! Let us know if you have any other questions or issues. Happy new year!

    Best regards,

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Moving Woocommerce Flyout Cart To Social Icon Menu’ is closed to new replies.