Moving woocommerce cart icon in header

So here is a header with the "flatsome" theme, they have a header builder and you can move the cart icon to different locations.
https://virtualgeorge.info/test/

Many themes have it in a top bar or in the main nav menu.

I like the oceanwp theme and it adds the cart icon by default to the main nav menu as you can see here:
http://newteethmarketing.com/brighterway/

There is a custom header builder where I can add text or html widgets and I am wondering if its possible to move that cart icon from the menu to another location? I tried just viewing & copying the html and placed that in another location and it did display the cart icon & item count but when I clicked on the icon it didn't display the drop down cart form as it should.

I found many cart icon plugins but they all just added the cart icon to the main menu, nothing with a shortcode.

Any ideas on the code or a plugin that would allow me to place a woo cart icon with item count some besides the main menu where it is now on the last example?

Thanks!!!

  • Predrag Dubajic

    Hi George,

    Hope you're doing well.

    I'm afraid that I'm not familiar enough with the them you are using and it might be best getting in touch with theme devs or support for info about doing this from theme options.

    What you can do is add a small script that will move the cart to menu and keep the dropdown functionality.

    You can do this by adding this to your child theme functions.php or as a mu-plugin:

    function move_cart_to_menu() { ?>
    
    	<script type="text/javascript">
    		jQuery( document ).ready(function() {
    		    jQuery( '.header-nav-main .cart-item' ).appendTo( jQuery( '.header-bottom-nav' ) );
    		});
    	</script>
    
    <?php }
    add_action( 'wp_footer', 'move_cart_to_menu' );

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.