Can Pro Theme Mobile Header & Footer Do This?

Support
#1

Wanted to run a couple of questions by you guys and gals!

  1. I was wondering if pro theme’s cart off canvas style can mimic mobile version of mvmtwatches.com’s cart without any deep coding?

  2. Is it possible to have the mobile footer collapse menu function from mvmtwatches.com be done in pro theme footer? I’ve tried using the navigation drop-down, collapse and layered but no success.

  3. Instead of having the mobile cart cover the whole screen when clicked. Is it possible to have the off canvas swipe in view but stacked under the header menu?

Any insight would help. Adding images from mvmtwatches.com

Thanks again

#2

Hey @raelbey13,

  1. Regretfully, this can’t be totally achieved. It’s not the Cart elements only gets the WooCommerce default minicart interface. Namely, it’s the checkout form that is not available. You will instead go to the Checkout page.

  2. The interface looks like an accordion. You can use the Accordion element for this. You will need to use manual HTML links in the accordion shortcode though.

  3. You will need to display a Cart Dropdown in place of the Cart Off Canvas using the Hide During Breakpoints option in those elements.

Thanks.

#3

Greetings, @christian_y,

  1. Would be nice to have some form of customization in an update if one uses Woocommerce(I am). Just a suggestion

  2. Thanks for the insight. I got the accordion situation complete and working. I was racking my brain all last night for that one XD.

  3. I tried your suggestion but the cart dropdown doesn’t function when you click on it.

  4. Is there a way in the off cart canvas to hide the view cart button? I attempted this using this code(below) but it only hides in the back office and just stacks in the front

.x-off-canvas-content .x-mini-cart .x-interactive {
display:none;
}

I couldn’t properly figure the code out to expand the checkout button during that process.

Thanks again christian for your assistance.

#4

Hello @raelbey13,

Your feedback has been duly noted.

And to hide the mini cart button, please use this code in the custom css for the header:

.x-off-canvas-content .woocommerce-mini-cart__buttons.buttons {
    display: none;
}

Hope this helps.

#5

Hey, @RueNel

Just tried it and the results move both of them.

I utilized the css

.x-off-canvas-content .x-interactive {
display: none;
}

And that hides the view cart button in the back office but still shows when you view as a visitor.

#6

Hello @raelbey13,

The code should have work because I have tested it first before giving it to you. You might have installed any caching plugin like W3 Total Cache, LiteSpeed cache, etc. Please clear your plugin cache first before testing your site again. Caching is best to turn ON when you are done building your site.

Please let us know how it goes.

#7

I don’t have a cache plugin installed yet.

If you’d like access to see check it out yourself. I can give you access.

#8

Hey @raelbey13,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#9

Greetings @RueNel,

Here’s the link and access to the back office.

#10

Hi,

Thanks for providing your login credentials.

Please try this code instead.

.x-off-canvas-content .x-mini-cart .buttons .x-anchor:first-child {
    display:none;
}

Thanks

#11

Thanks @paul.r,

Checked my desktop, ipad and andriod smartphone. It worked! The view cart is gone.
Checkout button is on the left side and only half of the width on my ipad and android smartphone

I tried adding the code
.x-anchor-text-primary {
width: 100%;
}

It didn’t help. Any code suggestion?

#12

Hi @raelbey13,

I checked and the checkout button is in full-width on tablet view. And that’s incorrect CSS since it will apply to an element with that class name.

Would you mind providing a screenshot of how you’re currently seeing it?

Thanks!

#13

Here’s what I’m seeing

#14

Hi There,

Please also add this custom CSS:

p.woocommerce-mini-cart__buttons.buttons a.checkout.wc-forward.x-anchor {
    width: 100% !important;
}

Hope it helps :slight_smile:

#15

Indeed it worked. I’d like to thank the whole staff for assisting me. I made the right choice making this the only theme I use in my businesses :slight_smile:

I need to study the forum more, so I can get this pro theme coding down.

Thanks Thai & staff

#16

You’re welcome! :slight_smile:

#17

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