Move "cart" and "my account" out of hamburger menu in mobile

I am trying to move “my account” and “cart” icons out of the hamburger menu in mobile. I would like to have them visible all times in mobile view. I was able to add the following code in my header.php to make cart icon visible all times, but it still remains in hamburger menu.

<div class=“mobile-cart-info”>
<?php echo 'cart->get_cart_url() . ‘" title="’ . __( ‘View your shopping cart’, ‘theshop’ ) . ‘">’ . sprintf (_n( ‘%d item’, ‘%d items’, WC()->cart->cart_contents_count, ‘theshop’ ), WC()->cart->cart_contents_count ) . ‘-’ . WC()->cart->get_cart_total() . ‘’; ?> </div>

  1. How can I remove the cart and my account from the drop down menu?
  2. Can you also provide the code for adding my account next to the cart?

thanks.

Hello there,

From the code you shared, it seems likely you’re using TheShop theme. Please open a new ticked on TheShop support channel here. In the body of your ticket query, please provide your site URL, so we can assist you in better way.

Regards,
Kharis

Kharis,

I am using sydney pro. I found the code in the forum somewhere not realizing it’s for TheShop theme. Can you help me with new code for Sydney Pro?

Thanks.

Hello there,

Instead adding the code directly in the header.php template file, I’d like to suggest you use jQuery solution which would be much easier. Remove the code you added and keep the header.php remains original. Then do these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   $(window).on('load resize', function() {
   
     if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

       var cartMenu     = $('.nav-cart').html();
       var accountMenu  = $('.header-account').html();
       $('.site-header .col-md-8').prepend('<div class="wc-menus">' + cartMenu + '<span class="header-account">' + accountMenu + '</span></div>');
       
     }
     
   });

})(jQuery);

  1. Update
  2. Add the following CSS code into Appearance > Customize > Additional CSS.

.wc-menus {
  display: none;
  width: 100px;
  position: absolute;
  top: 15px;
  right: 40px;
}

.wc-menus .cart-contents,
.wc-menus .header-account a {
  position: relative;
  margin: 0 15px;
}

@media only screen and (max-width:1024px) {
  
  li.nav-cart,
  li.header-account {
    display: none;
  }
  
  .site-header .col-md-8 {
    position: relative;
  }
  
  .wc-menus {
    display: block; 
  }  
  
}

@media only screen and (max-width:767px) {
  
  .wc-menus {
    top: 30px;  
  } 
  
}

Regards,
Kharis

Thanks, Khairs, but it’s not working. Can u please see if my javascript code is correctly inserted?

:::::::::

jQuery(function($) {

//Hide the default button
$(’.slide-inner a’).hide();

if( $(’.slide-item’).length ){

var slideText1 = 'World class tennis knowledge on your wrist while you play. Designed with Mats Wilander*.  &lt;span class="header-text-sml"&gt;*Former world #1 and 8-time Grand Slam champion.&lt;/span&gt;';
var slideText2 = 'Game Modifying Technology Improve your game – mental, technical, and physical.';
var slideText3 = 'For all players, no matter your skill level, experience, or age group.';
var slideText4 = 'Packed with valuable drills. Even create your own in real time, and try them out right away!';
var slideText5 = 'Main slide  title';

$( '.slide-item:nth-of-type(1) .slide-inner .maintitle' ).html(slideText1);
$( '.slide-item:nth-of-type(2) .slide-inner .maintitle' ).html(slideText2);
$( '.slide-item:nth-of-type(3) .slide-inner .maintitle' ).html(slideText3);
$( '.slide-item:nth-of-type(4) .slide-inner .maintitle' ).html(slideText4);
$( '.slide-item:nth-of-type(5) .slide-inner .maintitle' ).html(slideText5);

}

})

‘use strict’

$(window).on(‘load resize’, function() {

 if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

   var cartMenu     = $('.nav-cart').html();
   var accountMenu  = $('.header-account').html();
   $('.site-header .col-md-8').prepend('&lt;div class="wc-menus"&gt;' + cartMenu + '&lt;span class="header-account"&gt;' + accountMenu + '&lt;/span&gt;&lt;/div&gt;');
   
 }

});

})(jQuery);

:::::::::::::

Hello there,

Where did you copy the code from? From email or directly from our support forum. Other reason that usually causes the new jQuery code addition doesn’t take any change is site cache. If your site is cached by certain plugin like W3 Total Cache, you should flush cache after added the code.

To help me inspect the problem better, please share your site URL here.

Regards,
Kharis