Enable cart sidebar on tablet horizontal mode.

Hello
I noticed that clicking the cart icon at 1024 res I redirect my users to the cart page. (first image)
Is it possible to enable the hidden side bar like it happening at 768 res (second image)?
Regards

Hello,

You need to edit your cart element for your desktop layout from WoodMart >> Header Builder >> Your default header, select desktop layout and edit the cart element and select the position as “HIDDEN SIDEBAR”.

Screenshot for clarification: https://jmp.sh/w7lnUTi

After doing this save the changes and then check back your site after clearing your site and browser cache.

Best Regards.

I know that.
Below is the combination I prefer:

1. I want the same behavior in all mobile devices until 1024 res (hidden sidebar)

2. For desktop devices I prefer the dropdown cart.
Can’t we do that somehow?

Hello,

As there are two different layouts available in our header. One layout for desktop and the other is for mobile devices.

If you want to use “hidden sidebar” in mobile devices then use that functionality in the cart element used in your mobile layout.

Screenshot for clarification: https://jmp.sh/XyEvFRR

For the desktop screens you can use the “Dropdown” by editing the cart element exist in the desktop layout for headers.

Best Regards.

Hello
The problem is that the hidden sidebar doesn’t work for 1024 res.
Check the video to see
Regards

Hello,

I have seen your video attachment. Kindly deactivate your third party plugins and switch your theme to parent version(if you are using child theme), also if you have any custom code just remove it for a while and then test your site after removing the browser cache. This will fix your issue.

In case if the issue is still there then remain the third party plugins as disable and share your login credentials So I can test and help you out.

Best Regards.

Hello
I did what you said and found a custom code you have shared a long time ago.

@media (min-width: 991px){
body .whb-general-header-inner {
height: 65px;}
body .whb-visible-lg,
body .whb-hidden-mobile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;}
body .whb-hidden-lg {
display: none;}
.whb-general-header .sub-menu-dropdown,
.woodmart-header-links .menu-item-my-account .sub-menu-dropdown{
top:103%;}
.search-button:not(.mobile-search-icon),
.woodmart-header-links .menu-item-my-account .sub-menu-dropdown{
display: block;}
.woodmart-search-full-screen {
display: -webkit-box;
display: -ms-flexbox;
display: flex;}}

I remember I wanted the horizontal navigation to be visible on devices below 991 res.
I still want this function but what we have to do to make the hidden cart sidebar to work on this resolution?

Regards

Hello,

The code which you shared. If you undo that code from your site. Then the sidebar works, right?

If it works without that code then just undo that code and save the changes. You can share the ticket link for horizontal navigation code. So I can check and if possible we will try to add that code in the update of theme.

Best Regards.

Hello and Merry Christmas
Is there any way to prevent the redirection on cart page when you click the cart icon on the main navigation bar? I don’t want that happen.
Regards Leonidas

Hello,

Yes, by selecting the sidebar for cart element from your header builder you can avoid the direct redirection, so when someone clicks the cart icon the sidebar will be shown.

Screenshot for clarification: https://jmp.sh/a1MATU7

Best Regards.

Hello
I want the dropdwown instead. In this situation can we disable the click action entirely?

Hello,

No, the dropdown works on hover and while using dropdown for cart the button contains the direct link for cart page. So if someone clicks it will goes to the cart page.

Video for clarification: https://jmp.sh/W1lp2UK

Best Regards.

Hello
If you tell me which file contains the direct link I could possibly remove it. I don’ have problem to do it by myself
Regards

Hello,

If you want to edit or remove that cart link you need to go to wp-content\themes\woodmart\header-elements >> cart.php.

At line#24 you will find the link tag as “> so if you want to remove the link you can simply replace the link with

Screenshot for clarification: https://jmp.sh/gRnxbRf

Best Regards.

Thank you
With this modification I finally managed to solve the problem I had from the beginning of this conversation.You can close this ticket.
Regards

Most Welcome :)

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts