Woocommerce checkout link on mobile

[LauraCrisci]

Hi wonderful support staff!

I’m not quite sure how to ask this question, but I have looked for an answer and can’t find a solution either. What I need to do is either have a “proceed to cart” button on the individual products pages or have a checkout or cart button outside of the menu because in mobile mode, the menu is compressed so there is no visible way to check out after looking at an item unless you open the menu up to get to the cart icon.

Ideally, I would like to have both the link on the items (maybe as a button or just a link like the ‘continue shopping’ is set up now) AND have the cart icon in the header outside of the menu so they can see it and access it…AND it would also let people who are just looking around know that there is a shop on site.

Everything works just fine on desktop. The problem is only because of the compressed menu that has to be opened to be seen on mobile devices.

The website is http://lauracrisci.com and I will supply the WP credentials in case you want to have a look around…

[mldarshana]

Hi Laura,

Thanks for writing in! Technically this would be possible, but it would be outside the scope of the support as we do not provide custom development.

You can read some related information from here (https://theme.co/apex/forum/t/add-ecomms-menu-to-topbar/15217/4?u=mldarshana).

Thanks!

[LauraCrisci]

Hi,

I can appreciate that you don’t do custom development, but really all I am trying to do is have the mobile view reflect the already working desktop view. If you check http://lauracrisci.com, you’ll see that there is the menu with the ‘shop’ links in it in a dropdown, and then alongside of that is an icon with the picture of the shopping cart. But, when I go to the mobile view, the icon gets put into the hidden menu. I don’t want it to do that. I want that to remain next to the menu like it does in the desktop version.

Can you point me to how to have that happen? Or, I did get pointed to a link in a previous post that told me how to put a ‘continue shopping’ link within the single product pages. I just want to do the same but with ‘proceed to checkout’ this time. Can you point me to that piece of code? Or can I just use the same one and change the destination and the words of the functions.php that I used in the child theme to do that link?

I just don’t see why it works in the desktop version and yet the icon gets put into the menu on the mobile version. Any help with this would be greatly appreciated

[nabeel]

Hi again,

To show the cart icon outside the mobile menu, try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-nav-wrap.mobile li.x-menu-item-woocommerce').addClass('cart-menu-item-x').insertAfter('.x-btn-navbar');
});

Then add the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    .cart-menu-item-x {
        display: none;
    }
}
@media screen and (max-width: 979px) {
    .cart-menu-item-x {
        float: right;
        margin-right: 20px;
        list-style: none;
        margin-top: 24px;
        display: block;
        padding: 10px 15px;
        background: #fff;
        border: 2px solid #9b9a9a;
        border-radius: 10px;
    }
    .cart-menu-item-x i {
        color: #9b9a9a;
    }
}

As you see this requires custom scripting and the code provided above 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!

[LauraCrisci]

Awesome! Worked like a charm, thank you!!

[Prasant]

You are most welcome.