Left Vertical Position thumbnails not square

Hi, I want to make them square and small. How can I do that?

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.wd-v-thumb-custom .product-image-thumbnail img {
      top: 20px;
   left: 45px;
   height: 80%;
     border-radius: 30px;
   width: 70px;
}

Best Regards.

Hi, you can see that, it’s not looking good.

2nd. In mobile device I want to show like this as I show in image

Attachments:

You must be logged in to view attached files.

By Mistake I sent wrong screenshot. Please check these screenshots

Attachments:

You must be logged in to view attached files.

Hello,

You Can change the value as per your requirements where you want to adjust. You can use this code for desktop only.

You can select the thumbnail position from Theme Settings > Single Product > Images > Thumbnail Position. If you want to change only on mobile devices use our theme preset feature.

Here is our article on how to use presets:
https://xtemos.com/docs-topic/theme-settings-presets/

Best Regards.

Hi, using your codes thumbnails look good but still taking large space and video icon big and not on above thumbnail.

For mobile I don’t want to show thumbnails, only main image and dots blow the image so user can slide as i show you in my attached screenshot

Hello,

01. Try to add the following custom CSS code for the video icon in Theme Settings > Custom CSS > CSS for desktop:

.product-image-thumbnail.wd-with-video:before {
     top: calc(50% - 0.1em);
      width: 30px;
   height: 30px;
   }

02. Enable the option Carousel pagination in the main gallery” option https://prnt.sc/zW2APUyvACDy

Best Regards.

1. I would like to display the image gallery dots below the image gallery, not inside it.

Additionally:

The red boxed thumbnail looks good but is clickable. Still talking large place
There is a large space between the thumbnail and the main image for desktop
I want to show dots below the image not above the image for mobile and tablet.
The video icon is still not above (Center) the thumbnail.

Here are the codes you provided.

.wd-v-thumb-custom .product-image-thumbnail img {
top: 20px;
left: 45px;
height: 80%;
border-radius: 10px;
width: 100px;
}

.product-image-thumbnail.wd-with-video:before {
top: calc(50% – 0.1em);
width: 30px;
height: 30px;
}

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the WP admin login details of your site so I will check and give you a possible solution?

Best Regards.

Here are the details

Hello,

Sorry to say that your given login details are not working, please share the correct login details of your site.

Best Regards.

Please use these details

Hello,

Sorry to say i am unable to login your site:
https://ibb.co/2564YbH

Best Regards.

After I update my theme, plugin, and apply patches, I got this error “swiper.min.js?ver=7.4.1:1 Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters
A @ swiper.min.js?ver=7.4.1:1”

Attachments:

You must be logged in to view attached files.

Hi, I figure out this error because of CDN, I’m using bunny CDN, everything was fine but after updating the theme, this error appears. Please guide what should I do now?

Hello,

Can you please share the WP admin login details of your site with the site login URL so I can check and give you a possible solution?

Best Regards.

Hi

Hi, my website not looking good to my customers. non of product images look good in any device. but for me. everything is fine. I use clarity Microsoft, so I can check my customers recording and they are leaving website because of image gallery. Please check it fast or I have to restore the backup.

Here you can check the recording

Hello,

Now your images on product pages are showing fine now:
https://ibb.co/qNNDpN2

For carousel dots in mobile, Go to Theme Settings > Custom CSS > Add this code in Mobile CSS:

.woocommerce-product-gallery .wd-nav-pagin-wrap {
bottom: -22px !important;
}

Best Regards.

Hi, Thank you for the solution, Can you please login to my website and go to LiteSpeed Cache > CDN and Enable “Use CDN Mapping”. After that check website in mobile device, I can see only product feature image which is large and only single image showing. If I turn off the CDN, everything fine.

Hello,

Sometimes, issues with caching plugins can be resolved by adjusting the plugin’s settings. You can try reactivating LiteSpeed Cache and carefully reviewing its configuration options to see if there are any settings causing conflicts. Make sure it’s configured correctly for your specific setup.

If you want to continue using LiteSpeed Cache and can’t resolve the issue on your own, consider reaching out to LiteSpeed’s support for assistance. They might be able to help you troubleshoot and configure the plugin correctly.

Best Regards.

Hi, have to tried CDN option and check website on Mobile after enabling CDN?

Hello,

Sorry to say it is not our theme issue. It is related to cache plugin. But I have checked your site and enabled the option “Use CDN Mapping” https://ibb.co/YQcRr5D and have not found the issue on your site.

Best Regards.

You should have check website on mobile.

Hello,

Yes, I have checked on mobile device.

Best Regards.

Hi, Suddenly all my SVGs are disappear and got these error messages

Warning file_get_contents(https://www.craple.com/wp-content/uploads/2023/12/Discount-Offer.svg): Failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden
wp-content/plugins/woodmart-core/post-types.php:728
1 Plugin: woodmart-core
Warning file_get_contents(https://www.craple.com/wp-content/uploads/2023/12/retail-delivery-man.svg): Failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden
wp-content/plugins/woodmart-core/post-types.php:728
1 Plugin: woodmart-core
Warning file_get_contents(https://www.craple.com/wp-content/uploads/2023/12/retail-247.svg): Failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden
wp-content/plugins/woodmart-core/post-types.php:728
1 Plugin: woodmart-core
Warning file_get_contents(https://www.craple.com/wp-content/uploads/2023/12/retail-payment.svg): Failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden
wp-content/plugins/woodmart-core/post-types.php:728
1 Plugin: woodmart-core
Warning file_get_contents(https://www.craple.com/wp-content/uploads/2023/12/approval.svg): Failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden
wp-content/plugins/woodmart-core/post-types.php:728
1 Plugin: woodmart-core

I’m using query monitor. I didn’t update any plugin or I just disabled Disable Swiper slider script on mobile devices I enable it back but no change.

Attachments:

You must be logged in to view attached files.

Hello,

It seems that the file_get_contentsfunction for URLs is disabled on your server. You need to contact your provider and ask to enable this option.

Best Regards.

I’m getting this error for my video products.

Uncaught TypeError: Cannot read properties of undefined (reading ‘classList’)
at HTMLElement.<anonymous> (productGalleryVideo.min.js?ver=7.4.2:1:4921)
at S.slideChange (productImagesGallery.min.js?ver=7.4.2:1:1810)
at swiper.min.js?ver=7.4.2:1:13688
at Array.forEach (<anonymous>)
at swiper.min.js?ver=7.4.2:1:13674
at Array.forEach (<anonymous>)
at S.emit (swiper.min.js?ver=7.4.2:1:13494)
at S.updateActiveIndex (swiper.min.js?ver=7.4.2:1:24351)
at S.slideTo (swiper.min.js?ver=7.4.2:1:29679)
at S.init (swiper.min.js?ver=7.4.2:1:61320)

Product without video, no error

Hello,

I have not seen any errors on your site. The video is playing fine on your site.
Screenshot for clarification:
https://ibb.co/ZKvzWhp

Best Regards.

[Author]

Posts