Product: Thumbnail Toggle Not Working Correctly in Product Gallery [mobile]

  • Resolved cometto

    (@cometto)


    11 months, 2 weeks ago

    Hi,

    I use flatsome theme with default woocommerce product gallery.
    I see a problem during browsing webstine on mobile.

    Problem is with product thumbs. After page load they seems not working (i click them and nothing happens – no right image in viewport). When i click on main product image and then back to thumbs its start working.

    I tried to:
    – disable all plugins
    – remove all functions.php snippets
    – remove all css

    Seems that other people have same problem: https://github.com/woocommerce/woocommerce/issues/27761

    Nothing helps. Can you help and check what is going on? Just try to choose any product thumb after page loads.

    • This topic was modified 11 months, 2 weeks ago by cometto.
    • This topic was modified 11 months, 2 weeks ago by cometto.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Beauty of Code (woo-hc)

    (@beautyofcode)

    Hey @cometto,

    Thanks for reaching out!

    It seems the product gallery is not working as expected on mobile, is this correct?

    Checking your site on mobile, I am unable to replicate the issue as the product thumbnails are working as expected on the initial page load:

    Does this perhaps occur on a specific device or browser?

    In the meantime, the mobile responsiveness is generally dependent on the current theme you are using. Does this issue still occur when temporarily switching to a default theme, such as Storefront?

    Rather than testing on a live site, you can create a a staging environment. This is a clone of your live site where you can test changes without affecting your live site. This can be done using the free WP Staging plugin.

    If switching your theme resolves the issue, it points to an issue with your current theme, and you would need to reach out to the theme developers for further help with this particular issue.

    If the issue is still present when using the Storefront theme, can you please share the following:

    • System Status Report:?you can find this via?WooCommerce?→?Status. Select?Get system report?and then?Download for Support. This will download a TXT file that has the contents of the SSR which you can then share with us here.
    • Screenshot: Please share a clear screenshot of what you are currently seeing on your end.

    If you do not already have a screenshot tool installed, Snipboard.io?can be used for easily sharing screenshots.

    Cheers!

    Thread Starter cometto

    (@cometto)

    @beautyofcode

    Hi,

    i recorded video: https://streamable.com/l4uiof
    This is after I switched to default thene (Twenty Twenty-Four) so the problem isnt caused by my main theme.

    I tested on 2 mobile devices and see same problem. As you can see on the video – after page loading my clicking in thumbs does nothing. It starts working only after i click main product image, and then back again to thumbs.

    Here is the file:

    `
### WordPress Environment ###

WordPress address (URL): https://liveflooring.com
Site address (URL): https://liveflooring.com
WC Version: 8.3.1
REST API Version: ? 8.3.1
WC Blocks Version: ? 11.4.9
Action Scheduler Version: ? 3.7.0
Log Directory Writable: ?
WP Version: 6.4.2
WP Multisite: –
WP Memory Limit: 4 GB
WP Debug Mode: –
WP Cron: ?
Language: pl_PL
External object cache: –

### Server Environment ###

Server Info: Apache
PHP Version: 8.2.10
PHP Post Max Size: 4 GB
PHP Time Limit: 300
PHP Max Input Vars: 1000
cURL Version: 7.74.0
OpenSSL/1.1.1w

SUHOSIN Installed: –
MySQL Version: 10.5.21-MariaDB-0+deb11u1
Max Upload Size: 4 GB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 8.3.1
WC Database Prefix: wp_
Ca?kowity rozmiar bazy danych: 153.64MB
Rozmiar bazy danych: 112.86MB
Rozmiar indeksu bazy danych: 40.78MB
wp_woocommerce_sessions: Dane: 0.13MB + Indeks: 0.02MB + Silnik InnoDB
wp_woocommerce_api_keys: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_woocommerce_attribute_taxonomies: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_woocommerce_downloadable_product_permissions: Dane: 0.34MB + Indeks: 0.86MB + Silnik InnoDB
wp_woocommerce_order_items: Dane: 1.52MB + Indeks: 0.19MB + Silnik InnoDB
wp_woocommerce_order_itemmeta: Dane: 28.52MB + Indeks: 5.03MB + Silnik InnoDB
wp_woocommerce_tax_rates: Dane: 0.02MB + Indeks: 0.06MB + Silnik InnoDB
wp_woocommerce_tax_rate_locations: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_woocommerce_shipping_zones: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_woocommerce_shipping_zone_locations: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_woocommerce_shipping_zone_methods: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_woocommerce_payment_tokens: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_woocommerce_payment_tokenmeta: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_woocommerce_log: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_actionscheduler_actions: Dane: 0.36MB + Indeks: 0.63MB + Silnik InnoDB
wp_actionscheduler_claims: Dane: 0.11MB + Indeks: 0.08MB + Silnik InnoDB
wp_actionscheduler_groups: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_actionscheduler_logs: Dane: 0.36MB + Indeks: 0.25MB + Silnik InnoDB
wp_adtribes_my_conversions: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_cmplz_cookiebanners: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_cmplz_cookies: Dane: 0.06MB + Indeks: 0.00MB + Silnik InnoDB
wp_cmplz_services: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_commentmeta: Dane: 0.14MB + Indeks: 0.17MB + Silnik InnoDB
wp_comments: Dane: 2.52MB + Indeks: 1.66MB + Silnik InnoDB
wp_cr_local_forms: Dane: 0.34MB + Indeks: 0.02MB + Silnik InnoDB
wp_estp_subscribers: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_lepopup_tabs: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_links: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_mailchimp_carts: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_options: Dane: 8.47MB + Indeks: 0.33MB + Silnik InnoDB
wp_postmeta: Dane: 16.52MB + Indeks: 13.03MB + Silnik InnoDB
wp_posts: Dane: 7.45MB + Indeks: 0.81MB + Silnik InnoDB
wp_posts_20200427: Dane: 34.52MB + Indeks: 0.53MB + Silnik InnoDB
wp_rank_math_404_logs: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_rank_math_analytics_ga: Dane: 0.22MB + Indeks: 0.20MB + Silnik InnoDB
wp_rank_math_analytics_gsc: Dane: 8.52MB + Indeks: 14.06MB + Silnik InnoDB
wp_rank_math_analytics_inspections: Dane: 0.19MB + Indeks: 0.11MB + Silnik InnoDB
wp_rank_math_analytics_keyword_manager: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_rank_math_analytics_objects: Dane: 0.05MB + Indeks: 0.02MB + Silnik InnoDB
wp_rank_math_internal_links: Dane: 0.11MB + Indeks: 0.05MB + Silnik InnoDB
wp_rank_math_internal_meta: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_rank_math_redirections: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_rank_math_redirections_cache: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_responsive_menu_pro: Dane: 0.05MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_css: Dane: 0.13MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_layer_animations: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_navigations: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_sliders: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_slides: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_revslider_static_slides: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_smush_dir_images: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_termmeta: Dane: 0.09MB + Indeks: 0.11MB + Silnik InnoDB
wp_terms: Dane: 0.05MB + Indeks: 0.03MB + Silnik InnoDB
wp_term_relationships: Dane: 0.08MB + Indeks: 0.05MB + Silnik InnoDB
wp_term_taxonomy: Dane: 0.05MB + Indeks: 0.03MB + Silnik InnoDB
wp_tm_taskmeta: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_tm_tasks: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_usermeta: Dane: 0.06MB + Indeks: 0.03MB + Silnik InnoDB
wp_users: Dane: 0.02MB + Indeks: 0.05MB + Silnik InnoDB
wp_wc_admin_notes: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_wc_admin_note_actions: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_wc_category_lookup: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_wc_customer_lookup: Dane: 0.09MB + Indeks: 0.06MB + Silnik InnoDB
wp_wc_download_log: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_wc_orders: Dane: 0.02MB + Indeks: 0.11MB + Silnik InnoDB
wp_wc_orders_meta: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_wc_order_addresses: Dane: 0.02MB + Indeks: 0.06MB + Silnik InnoDB
wp_wc_order_coupon_lookup: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_wc_order_operational_data: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_wc_order_product_lookup: Dane: 0.17MB + Indeks: 0.23MB + Silnik InnoDB
wp_wc_order_stats: Dane: 0.13MB + Indeks: 0.11MB + Silnik InnoDB
wp_wc_order_tax_lookup: Dane: 0.08MB + Indeks: 0.09MB + Silnik InnoDB
wp_wc_product_attributes_lookup: Dane: 0.17MB + Indeks: 0.09MB + Silnik InnoDB
wp_wc_product_download_directories: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_wc_product_meta_lookup: Dane: 0.09MB + Indeks: 0.13MB + Silnik InnoDB
wp_wc_rate_limits: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_wc_reserved_stock: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_wc_tax_rate_classes: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_wc_webhooks: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_woocommerce_p24_data: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB
wp_woocommerce_p24_order_map: Dane: 0.13MB + Indeks: 0.75MB + Silnik InnoDB
wp_woocommerce_p24_subscription: Dane: 0.02MB + Indeks: 0.06MB + Silnik InnoDB
wp_wpfm_backup: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_wpmelon_advbedit_temp: Dane: 0.02MB + Indeks: 0.00MB + Silnik InnoDB
wp_yith_wcwl: Dane: 0.02MB + Indeks: 0.02MB + Silnik InnoDB
wp_yith_wcwl_lists: Dane: 0.02MB + Indeks: 0.03MB + Silnik InnoDB

### Post Type Counts ###

acf-field: 1
acf-field-group: 1
attachment: 557
awl_filter_gallery: 1
blocks: 26
bwg_gallery: 1
bwg_tag: 2
cookielawinfo: 7
ct_afc: 1
ct_afsp: 1
custom_css: 2
custom-css-js: 7
customize_changeset: 414
elementor_library: 1
googlefeed: 1
inspire_invoice: 4
jetpack_migration: 2
jp_img_sitemap: 1
jp_sitemap: 1
jp_sitemap_master: 1
mailpoet_page: 1
nav_menu_item: 71
ngg_gallery: 1
ngg_pictures: 57
oembed_cache: 10
page: 21
post: 32
product: 19
product_variation: 538
product-feed: 1
quantity-rule: 1
rank_math_schema: 1
revision: 21
seopress_404: 1
seopress_bot: 1
seopress_schemas: 1
shop_order: 2070
shop_order_refund: 10
smartforms_preview: 1
spucpt: 2
tablepress_table: 22
tm_global_cp: 1
tt_font_control: 1
ux_template: 3
wcct_countdown: 3
wp_global_styles: 1
wp_navigation: 1
wp_template: 4
wpcf7_contact_form: 3
wppopups: 2
yith-wcbm-badge: 3

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (33) ###

TablePress: przez Tobias B?thge – 2.2.4
Edytor klasyczny: przez Kontrybutorzy WordPressa – 1.6.3
Complianz | GDPR/CCPA Cookie Consent: przez Wtyczki Really Simple – 6.5.5
Contact Form 7: przez Takayuki Miyoshi – 5.8.4
Customer Reviews for WooCommerce: przez CusRev – 5.38.6
Disable Cart Fragments: przez Optimocha – 2.3
Disable Bloat for WordPress & WooCommerce: przez Disable Bloat – 3.4.2
GTM4WP: przez Thomas Geiger – 1.19
Zast?powanie medium: przez ShortPixel – 4.1.4
Flexible Shipping PRO: przez WP Desk – 2.16.8
Flexible Shipping: przez Octolize – 4.23.3
FlyingPress: przez  – 4.8.0
Reviews and Rating - Google My Business: przez Noah Hearle
Design Extreme – 4.25

Media File Sizes: przez Jason Lemahieu – 1.8
Omnibus: przez Marcin Pietrzak – 2.5.0
WooCommerce Przelewy24 Payment Gateway: przez Przelewy24 Sp. z o.o. – 1.0.10
Odnawianie miniaturek: przez Alex Mills (Viper007Bond) – 3.1.6
Rank Math SEO PRO: przez Rank Math – 3.0.50
Rank Math SEO: przez Rank Math – 1.0.208.1
Smartsupp Live Czat: przez Smartsupp – 3.6
Sticky Menu (or Anything!) on Scroll: przez WebFactory Ltd – 2.32
TablePress Extension: Responsive Tables: przez Tobias B?thge – 1.8
Temporary Login Without Password: przez StoreApps – 1.8.3
Converter for Media: przez matt plugins – 5.11.5
Checkout Field Editor for WooCommerce: przez ThemeHigh – 2.0.0
Product Feed PRO for WooCommerce: przez AdTribes.io – 13.1.6
Variation Swatches for WooCommerce - Pro: przez Emran Ahmed – 2.0.29
Variation Swatches for WooCommerce: przez Emran Ahmed – 2.0.29
WooCommerce Advanced Bulk Edit: przez George Iron & Yas G. – 5.3.2
WooCommerce: przez Automattic – 8.3.1
Asset CleanUp Pro: Page Speed Booster: przez Gabe Livan – 1.2.4.7
WP Rollback: przez GiveWP.com – 1.7.3
WPS Hide Login: przez WPServeur
NicolasKulka
wpformation – 1.9.10


### Inactive Plugins (0) ###


### Dropin Plugins (2) ###

advanced-cache.php: advanced-cache.php
maintenance.php: maintenance.php

### Must Use Plugins (4) ###

Asset CleanUp Pro: Plugin Filtering: przez Gabriel Livan – 1.0
burst_rest_api_optimizer.php: przez  –
Loco Standalone Loader: przez Tim Whitlock – 1.0
WordPress automation by >Aplikacje_cyberFolks: przez  –

### Settings ###

API Enabled: –
Force SSL: –
Currency: PLN (z?)
Currency Position: right_space
Thousand Separator: 
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: –
HPOS feature screen enabled: –
HPOS feature enabled: –
Order datastore: WC_Order_Data_Store_CPT
HPOS data sync enabled: –

### WC Pages ###

Strona sklepu: #9976 - /sklep/
Koszyk: #9975 - /koszyk/
Zamówienie: #9974 - /zamowienie/
Moje konto: ? Dost?pno?? strony powinna by? publiczna
Regulamin: #4988 - /regulamin-sklepu/

### Theme ###

Name: Flatsome Child
Version: 3.0
Author URL: 
Child Theme: ?
Parent Theme Name: Flatsome
Parent Theme Version: 3.18.2
Parent Theme Author URL: https://uxthemes.com
WooCommerce Support: ?

### Templates ###

Overrides: flatsome/woocommerce/archive-product.php
flatsome/woocommerce/cart/cart-empty.php
flatsome/woocommerce/cart/cart-shipping.php
flatsome/woocommerce/cart/cart.php
flatsome/woocommerce/cart/mini-cart.php
flatsome/woocommerce/checkout/form-checkout.php
flatsome/woocommerce/checkout/form-coupon.php
flatsome/woocommerce/checkout/order-received.php
flatsome/woocommerce/checkout/terms.php
flatsome/woocommerce/checkout/thankyou.php
flatsome/woocommerce/content-product-cat.php
flatsome/woocommerce/content-product.php
flatsome/woocommerce/content-single-product.php
flatsome/woocommerce/content-widget-product.php
flatsome/woocommerce/global/breadcrumb.php
flatsome/woocommerce/global/quantity-input.php
flatsome/woocommerce/global/wrapper-end.php
flatsome/woocommerce/global/wrapper-start.php
flatsome/woocommerce/loop/loop-end.php
flatsome/woocommerce/loop/loop-start.php
flatsome/woocommerce/loop/pagination.php
flatsome/woocommerce/loop/rating.php
flatsome/woocommerce/loop/result-count.php
flatsome/woocommerce/loop/sale-flash.php
flatsome/woocommerce/myaccount/form-login.php
flatsome/woocommerce/myaccount/navigation.php
flatsome/woocommerce/notices/error.php
flatsome/woocommerce/notices/notice.php
flatsome/woocommerce/notices/success.php
flatsome/woocommerce/product-searchform.php
flatsome-child/woocommerce/single-product/photoswipe.php
flatsome/woocommerce/single-product/price.php
flatsome/woocommerce/single-product/product-image.php
flatsome/woocommerce/single-product/product-thumbnails.php
flatsome/woocommerce/single-product/rating.php
flatsome/woocommerce/single-product/related.php
flatsome/woocommerce/single-product/review.php
flatsome/woocommerce/single-product/sale-flash.php
flatsome/woocommerce/single-product/share.php
flatsome/woocommerce/single-product/short-description.php
flatsome/woocommerce/single-product/tabs/tabs.php
flatsome/woocommerce/single-product/title.php
flatsome/woocommerce/single-product/up-sells.php
flatsome/woocommerce/single-product-reviews.php
flatsome/woocommerce/single-product.php


### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
product-variation-management
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: customize-store
minified-js
new-product-management-experience
product-virtual-downloadable
product-external-affiliate
settings
async-product-editor-category-field

Daily Cron: ? Next scheduled: 2023-12-12 09:03:39 +01:00
Options: ?
Notes: 3
Onboarding: completed

### Action Scheduler ###

Complete: 1?233
Oldest: 2023-11-11 16:12:08 +0100
Newest: 2023-12-12 02:07:49 +0100

Failed: 84
Oldest: 2022-11-05 11:14:07 +0100
Newest: 2023-12-12 02:08:54 +0100

Pending: 2
Oldest: 2023-12-12 18:34:27 +0100
Newest: 2023-12-13 19:44:00 +0100


### Status report information ###

Generated at: 2023-12-12 09:43:15 +01:00
`

    Hey there!

    Thank you for sharing the video.

    I checked on my mobile and the gallery is working correctly.

    Here’s a video: https://streamable.com/hiodxi

    So this might be an issue with your mobile browser.

    Is your mobile browser updated?

    Can you please test this on a different mobile device to see if the issue persists?

    Thank you.

    Looking forward to your reply.

    Have a wonderful day!

    Thread Starter cometto

    (@cometto)

    @carolm29

    Hi,

    I tested from 3 mobile devices (2 with chrome and 1 with edge).

    Is it working on your device right after page loads? Your video starts when page is loaded (im not sure if you didnt click on image before video starts – in that case thumbs are working correctly).

    Problem with thumbs is happening during first few seconds after page loads (for first 4-5 seconds they are inactive). After that time it starts working.

    Mirko P.

    (@rainfallnixfig)

    Hi @cometto

    Problem with thumbs is happening during first few seconds after page loads (for first 4-5 seconds they are inactive). After that time it starts working.

    This is expected as the thumbnails need to load and the gallery won’t work until it’s fully loaded. You can try a lazy loading / image preloading plugin to improve the product page load times or reach out to your theme authors for other helpful recommendations.

    Thread Starter cometto

    (@cometto)

    thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Product: Thumbnail Toggle Not Working Correctly in Product Gallery [mobile]’ is closed to new replies.