Cart Icon in Header on Mobile

Support
#1

How can I show a cart icon (to access Woocommerce cart) in the header of our website. Using X-Theme. Currently we have Logo to left and Navbar to the Right on mobile, but want to display the cart in the header for easy access for customers. Thanks!

#2

Hello @MarineMooring,

Thanks for writing in!

Please take a look at the solution shared in following thread:

Thanks.

#3

Thank you, this is a step in the right direction. Can you please link me to this thread so I can see the full conversation? Thank you!

#4

Hello @MarineMooring,

Thanks for updating the thread. :slight_smile:

Sure, please click on the title below to load full thread.

Thanks.

#5

Thank you! Would it be possible to understand where the Price and Item info is pulling from? The two are running together so it looks like “$0.000ITEMS” rather than “$0.00 0 ITEMS”.

#6

Hey @MarineMooring,

You can adjust the settings of the navbar cart menu item via X > Theme Options > WooCommerce. I checked it on my local setup ad it seems to be displaying fine. Can you please share the page URL so we can take a look?

Thanks!

#7

It is mobiletesttm.wpengine.com

#8

Hi @MarineMooring,

Thank you for providing the URL. To fix this, please add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .cart-menu-item-x {
        margin-top: 25px !important;
        color: #000;
    }
    .x-btn-navbar-woocommerce .x-cart.outer-inner {
        padding: 5px;
    }
    .x-btn-navbar-woocommerce .x-cart.outer-inner .outer {
        margin-right: 10px;
        color: #767575;
    }
    .x-btn-navbar-woocommerce .x-cart.outer-inner .inner {
        color: #767575;
    }
}

Please note that the code provided above and the JS customization you followed serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

#9

Awesome! Thank you so much! That did the trick.

#10

You’re welcome! :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.