Return to previous page

Mobile Sidebar area only woocommerce-MyAccount-navigation display

This topic has 6 replies, 3 voices, and was last updated 8 months ago ago by Andrew Mitchell

Kombajn88

Participant

April 16, 2024 at 11:35

Hello,

Is there any way I can add a mobile sidebar area, but only with a woocommerce-MyAccount-navigation (red square) ?

What I would like to do for mobile devices is to make the red square on the image slide out as a widget (mobile sidebar area).

Unfortunately trying to edit the css (remove cocpit part) also removes this element on the my account page.

Please help, thank you in advance

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#391849 Copied Theme version: 9.3.6

5 Answers

Jack Richardson

Support staff

April 16, 2024 at 14:53

Hello @Kombajn88,

We are grateful for your interest in our theme and commend your efforts in personalizing the Account page. In response to your request for assistance, we propose the following steps to achieve your desired outcome:

1. Develop a custom shortcode that exclusively displays the ‘my-account’ navigation. You can find an example here: https://prnt.sc/BzThHLSLRGd7. For guidance on creating a shortcode, please refer to the official WordPress documentation at: https://developer.wordpress.org/reference/functions/add_shortcode/.

2. Rather than using the complete [woocommerce_my_account] shortcode within a static block on your account canvas (https://prnt.sc/o1lb3YfWkmZl), you should implement your newly created shortcode, such as [woocommerce_my_account_custom_navigation].

Please note that additional customization falls beyond the purview of our standard support services.

If you require further customizations, we kindly invite you to submit a request via our customization panel at this link: https://www.8theme.com/account/#etheme_customization_panel. Be advised that customization services are subject to additional fees.

We appreciate your understanding and are here to support you.

Warm regards,

The 8Theme Team

#391878 Copied
Kombajn88

Participant

April 16, 2024 at 17:01
I was able to add, thank you very much for your help.

But I’m having trouble editing it now. The class id of this element when ejected is – .etheme-elementor-off-canvas__main .

And css on laptops works, but unfortunately on mobile devices it doesn’t (the whole window opens, I can’t adjust to make it 50% of the screen for example). Is this editable on phones?
```
.etheme-elementor-off-canvas__main {
    width: 250px;
}
```
Files is visible for topic creator and
support staff only.
#391901 Copied
Kombajn88

Participant

April 16, 2024 at 17:31
Dear Jack,

would you be able to help me still find the specific id class for the element in the picture? I want to add css to remove it on mobile devices (so that the sidebar performs its function), but I can’t find .elementor-1234 id class

In another topic, support pointed me to such a code example:
```
.active .elementor-4972 .woocommerce-MyAccount-navigation-wrapper.type-new {
     display: none;
}  
```
Thank you very much in advance for your help

Files is visible for topic creator and
support staff only.
#391905 Copied
Jack Richardson

Support staff

April 17, 2024 at 12:53

Dear @Kombajn88,

We hope this message finds you well. We are pleased to inform you that we have reviewed the implementations you have made, and they appear to be successful. However, we have identified a few areas that require further enhancements to optimize performance. We have taken the initiative to implement these improvements on your behalf:

1. We have added custom CSS (https://prnt.sc/WMUn8FQY3TDT) to extend the navigation to match the width of the off-canvas content. You can view the changes here: Before (https://prnt.sc/UFhY4tWqxmk7) vs After (https://prnt.sc/OwOrEWH8EESX).

2. We have introduced additional custom CSS (https://prnt.sc/arg0JcS2v9HS) to conceal the navigation within the main content of the page and expand the right zone to full-width.

3. We have activated the XStore condition for the sidebar off-canvas element on the account page. This ensures that the widget is displayed only when a customer is logged in (https://prnt.sc/6sLPhrVKypab), thereby preventing visibility to non-logged-in customers as previously occurred (https://prnt.sc/KoFjld5Ah1us).

We trust that these adjustments align with your requirements. Should you have any further requests or require additional modifications, please do not hesitate to contact us.

Best regards,

The 8Theme Team

#391997 Copied

Andrew Mitchell

Support staff

April 18, 2024 at 17:04

Dear Kombajn88,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#392137 Copied
Tagged: custom woocommerce sidebar, mobile sidebar display, optimized woocommerce themes, responsive woocommerce design, woocommerce myaccount navigation, wordpress woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Mobile Sidebar area only woocommerce-MyAccount-navigation display’' has been successfully resolved, and the topic is now closed for further responses

Mobile Sidebar area only woocommerce-MyAccount-navigation display

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection