Variation photos don’t work when there’s a product image
-
On this eyeshadow page: https://thenakedtruthskincare.com/product/pressed-eye-shadow/
I have uploaded different variation photos to show different eyeshadow colours. When I select a different colour, I want the picture to change to the appropriate picture. This works ONLY if I remove my product image. If I have a product image, the variation photo does not change and only the product image remains. The rest of the photos stay on as a gallery.
However, I do not want to remove my product image because on the total shop page, there is no image and the product listing box looks different and smaller compared to all the other products that have a product image.
How do I set it up so that there is a product image and also the variation photos change when selecting from the drop down of colours?
The page I need help with: [log in to see the link]
-
Hi there,
By default, WooCommerce only allows one variation image to be uploaded per variation- so any “variation galleries” will need to be added via a plugin (such as this one).
Having said that, when selecting a variation, the product image should change. To narrow some things down, could you copy and paste your site’s system status report into this thread? You can get it from your dashboard by going to WooCommerce—> Status.
Best,
Ross
Hi Ross,
I’m not sure if the plugin will be useful to me as I don’t want a gallery for my variations. I have 1 photo each per colour (variations are the colours) and I just want the 1 photo to change depending on the variation selected. Example: If they select “pink” from the drop down variation, the picture will turn to the pink variation of the product.
This currently works only if I don’t have a product image attached to the product itself (see attached screenshot – I need to remove the orange eyeshadow for it to work):
https://drive.google.com/file/d/16vTDygPjgU4tcS-qviHSg89OJR80cR_m/view?usp=sharingBut if I do that, then in the shop gallery, this product has no image:
https://drive.google.com/file/d/1fQPBNnarRqK2KLzYixDlta8NxQHa5-yu/view?usp=sharingHere is my system report:
### WordPress Environment ### WordPress address (URL): https://thenakedtruthskincare.com Site address (URL): https://thenakedtruthskincare.com WC Version: 4.6.1 REST API Version: ? 4.6.1 WC Blocks Version: ? 3.4.0 Action Scheduler Version: ? 3.1.6 WC Admin Version: ? 1.6.2 Log Directory Writable: ? WP Version: 5.5.3 WP Multisite: – WP Memory Limit: 768 MB WP Debug Mode: – WP Cron: ? Language: en_CA External object cache: – ### Server Environment ### Server Info: Apache PHP Version: 7.3.23 PHP Post Max Size: 128 MB PHP Time Limit: 120 PHP Max Input Vars: 3000 cURL Version: 7.59.0 OpenSSL/1.0.2r SUHOSIN Installed: – MySQL Version: 5.6.40-84.0-log Max Upload Size: 128 MB Default Timezone is UTC: ? fsockopen/cURL: ? SoapClient: ? DOMDocument: ? GZip: ? Multibyte String: ? Remote Post: ? Remote Get: ? ### Database ### WC Database Version: 4.6.1 WC Database Prefix: wp_ Total Database Size: 24.16MB Database Data Size: 21.63MB Database Index Size: 2.53MB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_bv_ip_store: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_commentmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM wp_comments: Data: 0.00MB + Index: 0.01MB + Engine MyISAM wp_layerslider: Data: 0.00MB + Index: 0.00MB + Engine MyISAM wp_layerslider_revisions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM wp_links: Data: 0.00MB + Index: 0.00MB + Engine MyISAM wp_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 1.53MB + Index: 0.07MB + Engine MyISAM wp_postmeta: Data: 7.22MB + Index: 0.54MB + Engine MyISAM wp_posts: Data: 7.14MB + Index: 0.16MB + Engine MyISAM wp_termmeta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM wp_terms: Data: 0.01MB + Index: 0.03MB + Engine MyISAM wp_term_relationships: Data: 0.01MB + Index: 0.02MB + Engine MyISAM wp_term_taxonomy: Data: 0.01MB + Index: 0.01MB + Engine MyISAM wp_usermeta: Data: 0.02MB + Index: 0.01MB + Engine MyISAM wp_users: Data: 0.00MB + Index: 0.01MB + Engine MyISAM wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wfblockediplog: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wfblocks7: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wfconfig: Data: 0.09MB + Index: 0.00MB + Engine InnoDB wp_wfcrawlers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wffilechanges: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wffilemods: Data: 2.52MB + Index: 0.00MB + Engine InnoDB wp_wfhits: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wfhoover: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wfissues: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wfknownfilelist: Data: 1.52MB + Index: 0.00MB + Engine InnoDB wp_wflivetraffichuman: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wflocs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wflogins: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wfls_2fa_secrets: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wfls_settings: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wfnotifications: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wfpendingissues: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wfreversecache: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wfsnipcache: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wfstatus: Data: 0.06MB + Index: 0.03MB + Engine InnoDB wp_wftrafficrates: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_yoast_indexable: Data: 0.22MB + Index: 0.11MB + Engine InnoDB wp_yoast_indexable_hierarchy: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_yoast_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_yoast_primary_term: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_yoast_seo_links: Data: 0.14MB + Index: 0.11MB + Engine InnoDB wp_yoast_seo_meta: Data: 0.06MB + Index: 0.00MB + Engine InnoDB ### Post Type Counts ### amn_mi-lite: 2 attachment: 378 avia_framework_post: 10 customize_changeset: 3 nav_menu_item: 31 oembed_cache: 8 page: 64 popup: 1 popup_theme: 8 post: 61 product: 49 product_variation: 32 revision: 582 shop_order: 2 ### Security ### Secure connection (HTTPS): ? Hide errors from visitors: ? ### Active Plugins (27) ### BackupBuddy: by iThemes – 8.4.18.0 WordPress Backup & Security Plugin - BlogVault: by Backup by BlogVault – 4.36 CallRail Phone Call Tracking: by CallRail Inc. – 0.4.5 Disable Comments: by WPDeveloper – 1.11.0 Disable Gutenberg: by Jeff Starr – 2.2 Yoast Duplicate Post: by Enrico Battocchi & Team Yoast – 3.2.6 Export All URLs: by Atlas Gondal – 4.1 Pixel Cat Lite: by Fatcat Apps – 2.5.4 Facebook for WooCommerce: by Facebook – 2.2.0 Google Analytics for WordPress by MonsterInsights: by MonsterInsights – 7.12.3 Google XML Sitemaps: by Auctollo – 4.1.1 Easy HTTPS (SSL) Redirection: by Tips and Tricks HQ – 1.9.1 Insert Headers and Footers: by WPBeginner – 1.4.6 jQuery Updater: by Ramoonus – 3.5.1.2 Google Ads & Marketing by Kliken: by Kliken – 1.0.6 – Installed version not tested with active version of WooCommerce 4.6.1 Mailchimp for WooCommerce: by Mailchimp – 2.4.7 – Installed version not tested with active version of WooCommerce 4.6.1 Popup Maker: by Popup Maker – 1.12.0 RSS Includes Pages: by Marios Alexandrou – 3.7 Search & Replace: by Inpsyde GmbH – 3.2.1 SG Optimizer: by SiteGround – 5.6.8 Simple 301 Redirects: by Scott Nellé – 1.07 SM RSS Plugin: by Semantic Mastery – 1.21g TAO Schedule Update: by TAO Digital – 1.15 Tracking Code Manager: by IntellyWP – 1.12.3 WC Moneris Payment Gateway: by WPHEKA – 2.3 – Installed version not tested with active version of WooCommerce 4.6.1 WooCommerce: by Automattic – 4.6.1 (update to version 4.7.1 is available) Yoast SEO: by Team Yoast – 15.2 ### Inactive Plugins (3) ### Enable jQuery Migrate Helper: by The WordPress Team – 1.2.0 MalCare Security - Free Malware Scanner, Protection & Security for WordPress: by MalCare Security – 4.4 WP Content Scheduler With Range: by CedCommerce <[email protected]> – 1.1 ### Must Use Plugins (2) ### Endurance Browser Cache: by Mike Hansen – 0.4 Endurance Page Cache: by Mike Hansen – 2.0.5 ### Settings ### API Enabled: – Force SSL: – Currency: CAD ($) 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) Connected to WooCommerce.com: – ### WC Pages ### Shop base: #3179 - /shop/ Cart: #3298 - /cart/ Checkout: #3299 - /checkout/ My account: #3300 - /my-account/ Terms and conditions: ? Page not set ### Theme ### Name: Enfold Child Version: 1.0 Author URL: https://www.kriesi.at Child Theme: ? Parent Theme Name: Enfold Parent Theme Version: 4.6.2 Parent Theme Author URL: https://kriesi.at WooCommerce Support: ? ### Templates ### Overrides: – ### Action Scheduler ### Complete: 11 Oldest: 2020-11-19 17:12:12 -0500 Newest: 2020-12-04 12:47:46 -0500
Hi again,
Thanks for explaining! The first thing that needs to be done is to make a complete backup of the site, then update WooCommerce. Once it’s updated, head to WooCommerce>Status>Tools and update the WooCommerce database.
If that doesn’t fix the issue, let’s make sure that nothing is conflicting with WooCommerce here. To test, first, you’ll want to change the theme on your site to Storefront, then test. If that resolves the issue, you’ll want to get in touch with your theme’s developer and see if they have an update or fix for you. If changing the theme doesn’t help, you’ll want to deactivate all plugins except for WooCommerce and take a look. If that fixes the problem, re-enable the other plugins one by one to see where the issue is coming from. If you don’t want to test on your live site, then create a staging site using a plugin called WP Staging.
Let us know how this goes!
Hi again,
We haven’t heard from you in a while, so I’m going to mark this as resolved. Feel free to start a new thread if you have any more questions!
Best,
Ross
- The topic ‘Variation photos don’t work when there’s a product image’ is closed to new replies.