[FlightwaveParticipant]

Hi there,
I must be missing an obvious setting here – but when you add something to the cart in our site – the cart icon in the navbar doesn’t show the number of items in the cart. I’ve used woocommerce in other applications before – and its standard to have a little number by the cart that shows the number of items in the car. Where is the setting to turn this on?

Thanks!

[RahulModerator]

Hi There,

Thanks for writing in!

Because this requires a template change, I’d advise that you setup a child theme.https://community.theme.co/kb/how-to-setup-child-themes/

This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Customization Best Practices

After that, add following code in your child theme’s functions.php file:

function x_woocommerce_navbar_cart() {

  $cart_info   = x_get_option( 'x_woocommerce_header_cart_info', 'outer-inner' );
  $cart_layout = x_get_option( 'x_woocommerce_header_cart_layout', 'inline' );
  $cart_style  = x_get_option( 'x_woocommerce_header_cart_style', 'square' );
  $cart_outer  = x_get_option( 'x_woocommerce_header_cart_content_outer', 'total' );
  $cart_inner  = x_get_option( 'x_woocommerce_header_cart_content_inner', 'count' );

  $data = array(
    'icon'  => '<i class="x-icon-shopping-cart" data-x-icon=""></i>',
    'total' => WC()->cart->get_cart_total(),
    'count' => sprintf( _n( '%d Item', '%d Items', WC()->cart->cart_contents_count, '__x__' ), WC()->cart->cart_contents_count )
  );

  $modifiers = array(
    $cart_info,
    strpos( $cart_info, '-' ) === false ? 'inline' : $cart_layout,
    $cart_style
  );

  $cart_output = '<div class="x-cart ' . implode( ' ', $modifiers ) . '">';

    if ( WC()->cart->get_cart_contents_count() == 0 ) {
      $cart_output .= '<span class="inner">Cart</span>';
    } else {
      foreach ( explode( '-', $cart_info ) as $info ) {
        $key = ( $info == 'outer' ) ? $cart_outer : $cart_inner;
        $cart_output .= '<span class="' . $info . '">' . $data[$key] . '</span>';
      }
    }

  $cart_output .= '</div>';

  return $cart_output;

}

Hope this helps!

Thanks.

[FlightwaveParticipant]

Hi Rahul,

Thanks for the response.
I am already using a child theme – so that part was already set up.
I added the suggested code to the child theme’s functions.php file.
The cart does show the number of items now – but now the navbar layout is completely messed up. It also rendered the tabs on my Edge product page non-functioning.

I removed the code from the child theme’s functions.php file, but the navbar is still messed up, the tabs still don’t work, and the cart still shows the number of items.

How can I get things back to where they were?

Thanks!

[FlightwaveParticipant]

I figured out how to get the table working again.
But the navbar placement is messed up – and the cart is still showing the number of items even though I’ve removed the code suggested from the child theme’s functions.php file.
What am I doing wrong? Please help.

The nav menu bar was centered in the middle of the page – and perfect – but now the logo is all the way to the left, the other items are all the way to the right, and the submenu doesn’t line up like it was before.

[LelyModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look on your setup? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[FlightwaveParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

By default, number of items on the navbar cart was already added by X theme. In your case, it is hidden because of custom CSS. See this:http://screencast-o-matic.com/watch/cbnbjH6lPl
Please remove the following CSS:

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer {
    float: none;
}
.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.inner {
    display: none !important;
}

Your number is centered when I checked.

Hope this helps.

[FlightwaveParticipant]

This reply has been marked as private.

[FlightwaveParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for sending us the screenshots.

#1] This is what I am seeing compare to your screenshot:
http://prntscr.com/ea6hzy

#2] You will not find the css in the customizer because it is located in your custom.css file. Please see this screenshot:
http://prnt.sc/ea6he2

#3] If you want to have more control and make sure that the logo and menu is always at the center, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-navbar .x-container.max.width {
    width: auto !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

Hope this helps.

[FlightwaveParticipant]

OK – please excuse the mess – I ended up restoring from one of the daily backups. The navbar and site in general are returned to their former glory before they got messed up.

That said – i’m back to the original question – how to get the navbar cart icon to show how many items are in the cart.

Originally we hired a web developer to build our site. Apparently they made some custom adjustments in the “custom.css” and “functions.php” files that are inside the child theme folder. I’m guessing this has altered the cart icon functionality from the way it was originally intended to work. How can I restore the cart icon to the way it was originally supposed to work and look as it comes with X?

Thanks so much in advance for your help!

[LelyModerator]

Hi There,

I did checked again, and like on my previous reply we have to remove that custom CSS that was added to hide it. See this:http://screencast-o-matic.com/watch/cbnrjo6Dhn
Remove this:

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.inner {
    display: none !important;
}

It is on this file::https://dev.flightwave.aero/wp-content/themes/themes/x-flightwave/custom.css?ver=1.0.0&nocache=1

Now if you visit the file and that part is not there anymore, this means we’re seeing cache content. Please clear cache and try again.

[FlightwaveParticipant]

Hi Lely,

Thanks for the response.
I removed that CSS from the custom.css file in the child theme folder.
I cleared my browser’s cache.
I added an item to the cart.
Nothing has changed – the cart icon in the navbar still does not show number of items in the cart.

I watched your screencast video – i can see how it works on your end – and I can even replicate it by using the same “inspect element” function. But deleting that code from the custom.css file isn’t changing the display on the webpage.

Is there perhaps other code I need to change?

Thanks.

[Paul RModerator]

Hi,

Can you try another browser, it is showing up fine on my end and it’s working.

See Video – https://www.screencast.com/t/h6nCrxrhgyLg

[FlightwaveParticipant]

This reply has been marked as private.

[Author]

Posts