Return to previous page

Styling issues on website – styles not working with load more and product page issue

This topic has 19 replies, 3 voices, and was last updated 1 years, 2 months ago ago by Rose Tyler

Maitreya Patni

Participant

September 3, 2023 at 18:42

Hi, I have 2 issues to share with you today.

1. We have set some custom CSS styles on the shop page and when we use “Load more” for pagination, the styles do not load. Here is a recording for reference: https://drive.google.com/file/d/1aoLW9p-9VQVlbDA6gZkxwLHDsOYrklg2/view?usp=sharing

2. On the product page itself, there is a slider for related products set to 2 columns on mobile devices, but on real devices, it shows 3 columns instead of 2 which ruins the design and look of the website. Here are the reference images:
a. Settings: https://drive.google.com/file/d/1omQWBQWaTtcxhRI9Fvma2QzkVuPqXqAo/view?usp=sharing
b. Real device: https://drive.google.com/file/d/1tFo4kEo0ptSVbMmSHGqIzjiolwummrUD/view?usp=sharing

Please look at these issues at your earliest and help us figure out a solution for this.
Thanks

#366521 Copied Theme version: 9.1.13 WooCommerce version: Latest

18 Answers

Tony Rodriguez

Support staff

September 4, 2023 at 08:05

Hello, @Maitreya Patni,

Thank you for choosing XStore as your WooCommerce WordPress theme.

1. We suggest disabling all third-party plugins (including cache plugins & Litespeed cache & Server cache (CDN)) that do not come bundled with XStore (https://www.8theme.com/documentation/xstore/plugins/included-plugins/), clearing the cache of the browser, and then checking again. It is possible that one of the additional plugins is causing the issue.

If the issue still persists, please keep all third-party plugins deactivated on your site and grant permission to debug your site, which includes deactivating all third-party plugins and on-site Customization. This will allow us to investigate and assist you accordingly.

Please note that you should take a complete backup of your site before proceeding.

In addition, please provide your site’s WP Admin URL and credentials in the private content area of this topic, so that we can look into it further:

WP Admin URL:
WP Admin Username:
WP Admin Password:

2. If you can see the changes in the Customizer but not on the page front, it is likely a cache issue. If it is functioning correctly in the Customizer, it should also be functioning on the front end.

We recommend that you temporarily disable any caching (CDN) and cache plugins, flush the server cache completely, and clear the browser cache before checking again.

We trust that this will resolve the issue you are experiencing.

Should you have any further questions or concerns, please do not hesitate to contact us. Our support team is always ready and available to assist you.

Best Regards,
8Theme’s Team.

#366538 Copied

Maitreya Patni

Participant

September 4, 2023 at 10:59

I have already tried that. It does not change anything. The problem still exists. I am providing you admin access so that you can check it out yourself.
I am awaiting your reply.

Please contact administrator
for this information.

#366555 Copied

Tony Rodriguez

Support staff

September 4, 2023 at 12:39

Hello, @Maitreya Patni,

1. We are pleased to inform you that your issue has been successfully resolved. We kindly request you to revisit your site after clearing your browser cache. The solution involved the addition of CSS code in the following location: Xstore > Theme Options > Theme Custom CSS > Global CSS. This action has effectively addressed your issue.

For your reference, we have attached an image below: https://postimg.cc/Ln7b1tth

2. We are pleased to inform you that the issue you reported has been resolved. We kindly request you to revisit your site after clearing your browser cache. Please note that we have deactivated the Jetpack and Light Speed Cache plugins on your site.

The issue was solely related to the cache and nothing else.

For further reference, we recommend watching the attached video. https://www.veed.io/view/19df4dba-5d63-494f-aa51-fd57efe583f7?sharingWidget=true&panel=share

Best Regards,
Team 8Theme.

#366568 Copied

Maitreya Patni

Participant

September 4, 2023 at 15:34

The first has been resolved. Thank you for that.
The second issue, however, still persists. I have checked the website on a real mobile device and on the product page, there are still 3 columns in the related products slider instead of 2. Kindly take a look into that. It displays 2 columns on browser, but on real devices, it shows 3.

#366587 Copied

Rose Tyler

Support staff

September 4, 2023 at 16:13

Hello, @Maitreya Patni,

We appreciate your prompt response.

Could you kindly provide us with the specific details of the device and browser you are currently using? Additionally, have you attempted to clear your browser’s cache? We would also appreciate it if you could try accessing from a different device to see if the issue persists.

In the Private Content area, we provide a screenshot from Samsung mobile, Chrome browser.

Best Regards,
Team 8Theme.

Please contact administrator
for this information.

#366592 Copied

Maitreya Patni

Participant

September 4, 2023 at 16:16

I am using Samsung S21 FE, and I am using Firefox Focus, which does not require clearing cache because it loads everything in incognito.

#366593 Copied

Rose Tyler

Support staff

September 4, 2023 at 18:27

Hello, Maitreya Patni,

We appreciate your prompt response.

1/ What about other mobile devices and browsers?

2/ What about related products from our demo https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/ ?

Best Regards,
Team 8Theme.

#366605 Copied
Rose Tyler

Support staff

September 5, 2023 at 13:57
Hello, Maitreya Patni,

We added for you the next php snippet to your child-theme/functions.php:
```
add_filter('products_related_per_view_tablet_land', function($count, $all_counts) {
    return $all_counts['mobile'];
}, 10, 2);
```
Please, check now!
Don’t forget to clear all cache.

Best Regards,
Team 8Theme.
#366674 Copied
Maitreya Patni

Participant

September 5, 2023 at 15:42

Hello, Rose,

The snippet you have added works. Thank you for helping us sort this issue out. Was this an issue with the template that we imported? Or is this happening to other templates as well?

#366692 Copied

Rose Tyler

Support staff

September 6, 2023 at 07:39

Hello, Maitreya Patni,

You’re welcome!
We would like to inform you that the issue you encountered was due to the default behavior for the tablet (all templates). However, it has been modified by the custom code.

Best Regards,
Team 8Theme.

#366727 Copied

Maitreya Patni

Participant

September 6, 2023 at 15:56

Oh, okay. Thanks again.

I had one more issue. When I search for some products, there is some issue with how the products are displayed.
Check reference: https://prnt.sc/b9mOSltHXFMk

#366798 Copied

Rose Tyler

Support staff

September 6, 2023 at 18:29

Hello, Maitreya Patni,

The issue at hand appears to be stemming from the following code: https://prnt.sc/ilirPbYxj3EF + https://prnt.sc/LZrOS2BIADti + https://prnt.sc/t_37FvCmEPG8. We kindly request you to locate where this code has been added and either remove or modify it.

Best Regards,
Team 8Theme.

#366804 Copied

Maitreya Patni

Participant

September 6, 2023 at 23:58

The white color code was added on the products page, and the styles which were earlier not loading when clicking on load more.
Is there any way to correct this? Specifically for the products in search menu?

#366814 Copied

Rose Tyler

Support staff

September 7, 2023 at 06:01

Hello, @Maitreya Patni,

We appreciate your prompt response.

We regret to inform you that we cannot assume responsibility for your custom code. We kindly request you to remove the code. Following this, our team will review your Shop page and suggest a code that will work fine in both your shop and search areas.

We appreciate your understanding and cooperation in this matter.

Best Regards,
Team 8Theme.

#366822 Copied
Maitreya Patni

Participant

September 8, 2023 at 06:14
Hi, Rose,

I understand. Thank you for the help. I will await your response.
I had one more question though, if I had the issue with 3 columns showing up on a different installation, will this code that you provided work in that case as well?
Code:
```
add_filter('products_related_per_view_tablet_land', function($count, $all_counts) {
    return $all_counts['mobile'];
}, 10, 2);
```
#366938 Copied
Rose Tyler

Support staff

September 8, 2023 at 06:57

Hello, Maitreya Patni,

1/ “I understand. Thank you for the help. I will await your response.” – As we can see, you did not remove the code we aks for “We kindly request you to remove the code. Following this…” We can’t remove that code for you, because It is unclear to us where exactly you added it.

2/ Yes, the code should work.

Best Regards,
Team 8Theme.

#366942 Copied

Maitreya Patni

Participant

September 8, 2023 at 12:33

We can’t remove the custom css code right now as the website is live. The code has been added via the Yellow Pencil plugin if that helps.
I wanted to ask one more question: Is it possible to design the Woocommerce product page separately for mobile?

#366982 Copied
Rose Tyler

Support staff

September 8, 2023 at 13:14
Hello, Maitreya Patni,

1/ Please add the next code in Theme Options > Theme custom CSS:
```
@media (min-width: 900px) {
    .products.products-loop.products-grid .price, 
    .products.products-loop.products-grid.product-title {
        opacity: 0;
    }
}
.products.products-loop.products-grid .product-details .product-title a,
.products.products-loop.products-grid .woocs_price_code .woocommerce-Price-amount bdi {
    color: white;
}
```
and delete 3 lines of your code https://prnt.sc/ilirPbYxj3EF + https://prnt.sc/LZrOS2BIADti + https://prnt.sc/t_37FvCmEPG8 , all should be fine after that.

2/ Please open up new topics for new questions – https://www.8theme.com/forums/xstore-wordpress-support-forum/
There is no option to design the Woocommerce product page separately for mobile, unfortunately.

Best Regards,
Team 8Theme.
#366985 Copied
Tagged: load more issue, product page problem, styling issues, website styles, woocommerce templates, wordpress solutions
Viewing 19 results - 1 through 19 (of 19 total)