Return to previous page

Mobile version of shop page and navigation need repair

This topic has 12 replies, 3 voices, and was last updated 2 months, 2 weeks ago ago by Luca Rossi

Safe Desires

Participant

August 18, 2024 at 05:53

Please look at the notes in the video:
1) The logo is covering text underneath
2) Pictures are not loading until I start scrolling. So only placeholders are shown when arriving at the page. I am assuming it has something to do with lazy load
3) When clicking on a category, I don’t see an option to reset categories, go back or choose another category. Clicking on the Shop link only reloads the current category filters.
4) Is there a way to have products be shown as a grid that are aligned horizontally? So, even when there is add to cart, choose options and different number of sizes or colors to choose from, all products line up horizontally to each other.

Please, contact administrator
for this information.

#410571 Copied Theme version: 9.3.17

11 Answers
Luca Rossi

Support staff

August 19, 2024 at 05:45
Dear Safe Desires Team,

We hope this message finds you well. I am writing to inform you of a few updates and suggestions regarding your website’s functionality:

1. We have adjusted the z-index of your logo container, and I am pleased to report that the issue has now been resolved.

2. We attempted to replicate the issue you reported but were unable to do so on our end. Could you please try disabling all lazy load options in your cache plugins and within the XStore theme to see if that resolves the issue?

3. To access the feature you mentioned, please click on the sidebar and then switch back to the Categories tab. You can view the process here: [https://prnt.sc/UGAw2-3xpHaz](https://prnt.sc/UGAw2-3xpHaz).

4. Additionally, we recommend adding the following CSS code to enhance the responsiveness of your site on mobile devices. Please insert it under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (max-width: 600px){
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
    }
    .products-grid::before {
        display: none;
    }
}
```
You can view the expected result here: [https://prnt.sc/puadK4IM5xlv](https://prnt.sc/puadK4IM5xlv).

Should you require any further assistance or have additional queries, please do not hesitate to contact us.

Best Regards,
8Theme’s Team
#410657 Copied
Safe Desires

Participant

August 19, 2024 at 07:03

#3:
I cannot expect my visitor to open up a menu again to pick another category. The filter option should always be available and users should always be able to click on a link that takes them to the main shop page.

In my new screen recording:
0:08
When clicking on Stockings, Corsets, Nipple Covers or Pajamas, the loaded page is completely messed up.

1:06
When clicking on a box, the text e918 appears. Please correct that to a checkbox.

1:12
No option to add to cart, wishlist, buy now
Also, can the M, L (size letters) by centered instead of top-justified?
During this time, no filter option is shown

1:46:
This page has the options to add to cart, but not to add to whislist. this page for some reason shows the filter icon on the left. How can we make sure that this filter icon is always available? Also, is there a way to make it more prominent? Users can easily miss this small button and may not know what it’s for. In this
Screenshot_20240818_225506_Chrome.jpg, you can see what a common set-up is. A filter button that floats at the top of the shop page.

1:50
The fly-out filter only shows two categories and is not showing all colors.

2:09
Why are the columns so narrow all of the sudden?

Also. when I click on “Shop All”, I want to see the safedesires.com/shop page. Instead, it’s taking me back to the home page

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#410667 Copied
Luca Rossi

Support staff

August 20, 2024 at 09:02
Hi @Safe Desires,

When clicking on Stockings, Corsets, Nipple Covers or Pajamas, the loaded page is completely messed up.

When clicking on a box, the text e918 appears. Please correct that to a checkbox.

No option to add to cart, wishlist, buy now
Also, can the M, L (size letters) by centered instead of top-justified?
During this time, no filter option is shown

It seems the styles were missing and the elements have broken. Can you please help us to completely turn off the cache plugins and then check again?

This page has the options to add to cart, but not to add to whislist. this page for some reason shows the filter icon on the left. How can we make sure that this filter icon is always available? Also, is there a way to make it more prominent? Users can easily miss this small button and may not know what it’s for. In this
Screenshot_20240818_225506_Chrome.jpg, you can see what a common set-up is. A filter button that floats at the top of the shop page.

The add to cart & wishlist buttons are hidden from mobile by default. To show them on mobile device, add this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
body[data-elementor-device-mode=mobile] .etheme-product-hover-mask3:not(:hover) footer {
    opacity: 1;
    visibility: visible;
    right: 20px;
}
```
The fly-out filter only shows two categories and is not showing all colors.

Did you remove the filter button?

Why are the columns so narrow all of the sudden?

It seems from the custom CSS codes. Did you sort it out?

Also. when I click on “Shop All”, I want to see the safedesires.com/shop page. Instead, it’s taking me back to the home page

The Shop All link is already linked to the shop page: https://prnt.sc/3IBGdapWriXY.

Best Regards,
8Theme’s Team
#410801 Copied
Safe Desires

Participant

August 20, 2024 at 16:49

Why are the columns so narrow all of the sudden?

It seems from the custom CSS codes. Did you sort it out?

I removed the code that you suggested to add a couple of days ago (@media (max-width: 600px){…) This fixes most my categories, but pajamas is still too narrow.

WP Rocket seemed to have caused some of the menu issues.

Please see private area content for more issues.

Please contact administrator
for this information.

#410903 Copied
Luca Rossi

Support staff

August 22, 2024 at 07:29
Dear @Safe Desires,

We hope this message finds you well. We have implemented a solution to address the issue of the header overlapping the filter canvas on your website. Please add the following custom CSS to rectify this:
```
.sidebar-position-left {
    z-index: 999999;
    position: relative;
}
```
You can view the corrected layout here: [Screenshot](https://prnt.sc/FN28g-RjuRwS)

Additionally, we have noticed that other categories remain visible when a specific category is selected. Kindly review the following video that demonstrates this issue: [Video Link](https://www.awesomescreenshot.com/video/30736424?key=29220f5b3eff0da0a6e53fbc1cbf084e)

Please be aware that the full list of categories will only be displayed on the shop page. When visiting category archive pages, only the children of the current category (if any exist) will be shown.

Thank you for your attention to these matters. Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#411091 Copied
Safe Desires

Participant

August 23, 2024 at 00:34

Please be aware that the full list of categories will only be displayed on the shop page. When visiting category archive pages, only the children of the current category (if any exist) will be shown.

The other category options don’t disappear on the desktop version. Is there not a way to have the mobile version work the same way? Or at least offer a category reset button to show them all again?

#411220 Copied

Luca Rossi

Support staff

August 23, 2024 at 17:05

Hi @Safe Desires,

We’re very confused on your points.

Are you on the shop page or the product categories page?

Here are the screenshots how it looks on the shop page(https://safedesires.com/shop/?filter_cat=bodysuits) for now, the other product categories are still showing(and it will not work on the product categories page as we mentioned in previous reply):

1. Desktop: https://prnt.sc/YAWkAPHVgGwm
2. Mobile: https://prnt.sc/vTPWq7T5ZWje

Best Regards,
The 8Theme Team

#411400 Copied

Safe Desires

Participant

August 23, 2024 at 19:40

I guess I don’t understand why, when navigating to the Shop page using a category link, the user can no longer reset or add other product categories again, but when a user starts in the shop page and then makes a category selection, all other categories are still available to be used.

For now, I want to make sure that the menu is not off-set incorrectly. In my screen-recording, you can see at the 12 second mark, that the logo is covering the filter menu. I think the filter menu should start below the logo.

Files is visible for topic creator and
support staff only.

#411412 Copied

Rose Tyler

Support staff

August 25, 2024 at 09:20

Hello, @Safe Desires,

“that the logo is covering the filter menu” – fixed using custom CSS code – https://prnt.sc/J_8huvRXUTkm (there was unclosed { in custom CSS code on your site).

“I guess I don’t understand why, when navigating to the Shop page using a category link, the user can no longer reset or add other product categories again, but when a user starts in the shop page and then makes a category selection, all other categories are still available to be used.” – please describe the problem on more time with videos and do the same for the desired result.
Thank you for your cooperation.

Best Regards,
The 8Theme Team

#411517 Copied

Safe Desires

Participant

August 28, 2024 at 04:36

The layout issue is back.

Files is visible for topic creator and
support staff only.

#411889 Copied

Luca Rossi

Support staff

August 28, 2024 at 10:09

Dear @Safe Desires,

We are pleased to inform you that the syntax error in your custom CSS has been resolved. We kindly ask you to review the changes at your earliest convenience to ensure everything is functioning as expected.

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

#411957 Copied
Tagged: mobile shop page, mobile version repair, navigation fix, woocommerce mobile issues, woocommerce repair, wordpress shop repair, wordpress templates
Viewing 12 results - 1 through 12 (of 12 total)