Variation previews not showing

  • Resolved chriscookz

    (@chriscookz)


    6 years ago

    On this page you can see the first image of the black hat shows correctly as a preview. If you click the black hat with the red bill, the preview box is blank.

    I’ve been able to confirm that the preview images ARE loaded on the page, but they’re stacked vertically on top of each other. If you open Chrome’s developer tools you can see this. I’ve also taken screenshots, hopefully you can access imgur since I can’t upload them here: https://imgur.com/a/i07zh79

    Image 1 is the first product preview, shown, because the translate on the woocommerce-product-gallery__wrapper class is at 0,0,0.

    Image 2 is when I hover over the second div inside that figure wrapper, which should be the black hat red bill, and you can see the image is below the black hat, not to the right of it.

    Image 3 is after I’ve clicked the black hat red bill preview thumb and I’m hovering over the first div of the all black hat in the developer tools. You can see that image has moved to the left, and the translate on the wrapper is at -456px,0,0 to cause that movement to happen.

    Image 4 is hovering over the black hat red bill div, and you can see that it too has moved over to the left and is still directly beneath the all black hat image. If the images had been stacked horizontally, this black hat red bill image would now be showing in the preview box, which is what is expected. Since they’re stacked vertically, they will not show.

    I’m pretty comfortable with CSS, but I cannot figure out why these images are stacking vertically. I’ve tried forcing them into an inline-block, but it doesn’t seem to matter. They’re floated left like they should be, the width on the figure wrapper is huge (1800%), I can’t figure it out. If they would stack horizontally, they’d show.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Hey there,

    Thank you for all of that information!

    I’d like some more insight into your site – could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status.
    Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

    Thread Starter chriscookz

    (@chriscookz)

    Thanks Hannah! Here is the status report:

    
### WordPress Environment ###

Home URL: https://www.chriscookz.com
Site URL: https://www.chriscookz.com
WC Version: 3.5.1
Log Directory Writable: ?
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: –

### Server Environment ###

Server Info: LiteSpeed
PHP Version: 5.6.38 - We recommend using PHP version 7.2 or above for greater performance and security. How to update your PHP version
PHP Post Max Size: 250 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.60.0
OpenSSL/1.0.2k

SUHOSIN Installed: –
MySQL Version: 10.1.36-MariaDB-cll-lve
Max Upload Size: 250 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 3.5.1
WC Database Prefix: ccm_
MaxMind GeoIP Database: ? The MaxMind GeoIP Database does not exist - Geolocation will not function. You can download and install it manually from https://dev.maxmind.com/geoip/geoip2/geolite2/ to the path: . Scroll down to "Downloads" and download the "MaxMind DB binary
gzipped" file next to "GeoLite2 Country". Please remember to uncompress GeoLite2-Country_xxxxxxxx.tar.gz and upload the GeoLite2-Country.mmdb file only.

Total Database Size: 4.64MB
Database Data Size: 4.08MB
Database Index Size: 0.56MB
ccm_woocommerce_sessions: Data: 0.26MB + Index: 0.02MB
ccm_woocommerce_api_keys: Data: 0.00MB + Index: 0.01MB
ccm_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_order_itemmeta: Data: 0.01MB + Index: 0.00MB
ccm_woocommerce_tax_rates: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB
ccm_woocommerce_log: Data: 0.00MB + Index: 0.00MB
ccm_commentmeta: Data: 0.00MB + Index: 0.00MB
ccm_comments: Data: 0.06MB + Index: 0.05MB
ccm_failed_jobs: Data: 0.00MB + Index: 0.00MB
ccm_links: Data: 0.00MB + Index: 0.00MB
ccm_mailchimp_carts: Data: 0.00MB + Index: 0.00MB
ccm_options: Data: 3.03MB + Index: 0.21MB
ccm_postmeta: Data: 0.26MB + Index: 0.14MB
ccm_posts: Data: 0.45MB + Index: 0.08MB
ccm_queue: Data: 0.00MB + Index: 0.00MB
ccm_snippets: Data: 0.00MB + Index: 0.00MB
ccm_termmeta: Data: 0.00MB + Index: 0.01MB
ccm_terms: Data: 0.00MB + Index: 0.01MB
ccm_term_relationships: Data: 0.00MB + Index: 0.01MB
ccm_term_taxonomy: Data: 0.00MB + Index: 0.00MB
ccm_usermeta: Data: 0.01MB + Index: 0.01MB
ccm_users: Data: 0.00MB + Index: 0.01MB
ccm_wc_download_log: Data: 0.00MB + Index: 0.00MB
ccm_wc_webhooks: Data: 0.00MB + Index: 0.00MB
ccm_wdi_feeds: Data: 0.00MB + Index: 0.00MB
ccm_wdi_themes: Data: 0.00MB + Index: 0.00MB
ccm_wtbp_columns: Data: 0.00MB + Index: 0.00MB
ccm_wtbp_tables: Data: 0.00MB + Index: 0.00MB

### Post Type Counts ###

attachment: 42
contx_post_type: 1
custom_css: 1
customize_changeset: 81
jetpack_migration: 2
jp_img_sitemap: 1
jp_sitemap: 1
jp_sitemap_master: 1
nav_menu_item: 4
nimble_post_type: 1
option-tree: 1
page: 20
post: 9
product: 7
product_variation: 63
revision: 176
scheduled-action: 214
shop_coupon: 2
wc_product_table: 1
wdi_instagram: 1
wpcf7_contact_form: 2

### Security ###

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

### Active Plugins (7) ###

Contact Form 7: by Takayuki Miyoshi – 5.0.5
Jetpack by WordPress.com: by Automattic – 6.7
Printful Integration for WooCommerce: by Printful – 2.0.5 – Not tested with the active version of WooCommerce
WooCommerce Product Table Lite: by Kartik Gahlaut – 1.3.0 – Not tested with the active version of WooCommerce
Instagram Feed by 10Web: by 10Web – 1.3.9
Woo Attributes Coupon: by Gaurav Nagpal – 2.0.0 – Not tested with the active version of WooCommerce
WooCommerce: by Automattic – 3.5.1

### Settings ###

API Enabled: ?
Force SSL: –
Currency: USD ($)
Currency Position: left
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)

### WC Pages ###

Shop base: #343 - /shop/
Cart: #344 - /cart/
Checkout: #345 - /checkout/
My account: #346 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: Imagely Journal
Version: 1.0.0
Author URL: https://www.imagely.com
Child Theme: ?
Parent Theme Name: Genesis
Parent Theme Version: 2.7.1
Parent Theme Author URL: https://www.studiopress.com/
WooCommerce Support: ? Not declared

### Templates ###

Overrides: –
    Thread Starter chriscookz

    (@chriscookz)

    Go ahead and cancel this ticket! I figured out my issue. It was with the theme I was using, simple CSS change, I just couldn’t isolate it the other day. Thanks for the help.

    Plugin Support Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Hey there,

    I’m glad to hear you found it – thanks for letting us now! I’ll mark this thread as resolved now.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Variation previews not showing’ is closed to new replies.