Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #180396

    Hi guys,

    Im having trouble getting the woocommerce single product pages working correctly using propulsion theme.

    The page i am working on currently is here:

    I have used the exact same set of four images in:

    1. product variations images
    2. featured media images (these are the four icon images above the select / add to cart form on left side of page)
    3. product gallery images (these dont seem to show up anywhere except on the category pages).

    I have a few requirements for this page to work properly:
    1. One image shown for the product at full size (currently just tossed into the main content editor)
    2. The four icon images when clicked should change the main image.
    3. Selecting the different variations using the drop down menu should also change the main image.

    Apparently, this is standard woocommerce functionality so Im not sure where or why the propulsion theme deviates from it. Any help muchly appreciated! Thanks guys!



    Hey bodhimcgee!

    Basically you need to select the images two times. You need to add ALL product images (including all variation images) to the slideshow and then you need to set (the same images) as “variation images”. I wrote a script for Propulsion which compares the variation images with the existing slideshow images and if the variation image is part of the slideshow image set it will switch to this particular image. The script won’t work if you just add an image to the variation or if you choose different images for the slideshow and variations.



    Yup, Ive done exactly that. Four featured images added to the “slideshow” and the same four images added as product variations.

    The product image icons are there, but no main images shown for the product and therefore of course no switching either.

    Shouldnt the slideshow/featured images be shown in the main area by default? And then by adding the product variation images this provides the switching capability?

    Not sure where things are going wrong here but appreciate your help on this one.

    Thanks guys,



    Just a quick update, Ive had to put one image into the main content editor so that a large image of the product would be there as this is a live site. This image has nothing to do with the featured image slideshow or product variations.



    Please create us an admin account and post the login credentials as private reply. I’ll look into it and check why the switching capability doesn’t work for you.

    Best regards,

    This reply has been marked as private.


    This css in your custom.css is hiding the slideshow:

    .single .slideshow_container, .category-blog .slideshow_container {
    display: none!important;

    There is also some other script running that is modifying the slideshow height so deactiving your other plugins in addition to either removing or modifying that css will fix the issue.



    Hi Devin and Dude, thanks for the heads up on the css hiding it, wooops. Thats all fixed up and the images are switching which is great.

    Do you mind having a quick look at the result and let me know if whats you would expect?

    To me, the main image on the page should be switching, not just a medium sized icon above the four little images?

    As well, is there some code or a method available that youre aware of that will trigger the switch when the select box chooses the different styles?

    Many thanks, its getting closer.



    How it is now is correct. That smaller image is technically the “product” image output. The image inside the short description is just a static image.

    And unfortunately because of the way Propulsion was originally coded and the change in the way WooCommerce was coded later on to add the variation image switch script the two are not compatible. So the image doesn’t switch when the variation is selected from the dropdown.


    Thanks. Is it possible to add a caption under each of the images in the slideshow?




    Yes sure – you just need to click on the “Show” link next to the “Featured media” slideshow images and the title/caption options will pop up:

    Best regards,


    You guys rock! And one last thing, how do you make it so that the manual forward and back arrow keys for going to next and previous image are shown? Currently they are hidden using css.



    • This reply was modified 4 years ago by  bodhimcgee.
Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Woocommerce – Product Gallery, Featured Product Images & Product Variation Image’ is closed to new replies.