Support/Polestar Theme/Change image transition in product gallery

[Resolved] Change image transition in product gallery

Tagged: 

  • Author
    Posts
  • February 27, 2018 at 2:35 pm #8887

    Kristin Ozanian
    Participant

    Hi, Andrew,

    This may be pretty obvious again but could you please help? I need to turn off the sliding effect in the WooCommerce product image gallery. I have the following in my child theme functions.php:

    remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );

    but it is still working. What am I missing?

    Thanks!

    February 28, 2018 at 2:33 pm #8890

    Andrew Misplon
    Keymaster

    Hi Kristin

    From a CSS point of view, Polestar isn’t setup to have no gallery type. That’s the first problem.

    But the main issue is if your remove all gallery support the images just link directly to the media file. Put another way, you won’t just lose the sliding effect, you’ll lose the gallery all together.

    You can test the issue by setting Theme Settings > WooCommerce > Gallery Slider and then removing the gallery slider:

    function polestar_child_setup() {
	remove_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'init', 'polestar_child_setup' );

    You could style the gallery images so that they are thumbnails below the main image but you still would have lost the gallery. Each image will just link to a blank media page.

    February 28, 2018 at 2:55 pm #8892

    Andrew Misplon
    Keymaster

    This isn’t a small customisation. I’ve copied chunks of code from another theme I’ve worked on but it isn’t super neat. Ideally the jQuery in the functions file should be in its own file but it’ll work fine in the footer.

    Essentially you have to add FlexSlider back and then customise it yourself. I can provide this child theme as a starting point but I can’t dive in much deeper than this. If you’re interested and feel like you can work on it further, if needs be then you can dive in.

    https://purothemes.com/wp-content/uploads/2018/02/polestar-child-kristen-01.zip

    Hope that helps 🙂

    March 3, 2018 at 12:29 pm #8911

    Kristin Ozanian
    Participant

    Sorry for replying late. Thanks for the time you have invested!

    I maybe didn’t explain well and mislead you with the “remove […] gallery-slider” line. I am going for this product gallery effect. I don’t want to remove the gallery alltogether, I just want to change the transition effect from “transform: translate3d” to no effect.

    As I understand it, I need to modify the flexslider options but I’m not sure how. I have found this in polestar\js\jquery.flexslider.js, line 880:

    if (slider.transitions) {
        target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + target + ",0,0)";
        dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
        slider.container.css("-" + slider.pfx + "-transition-duration", dur);
         slider.container.css("transition-duration", dur);
      }

    and I found the settings at line 1094 but modifying neither this file nor the minimized version has any effect. I am obviously not doing something or anything right 😀

    Additionally, I wasn’t sure I would be able to modify photoswipe to achieve this exact look so I disabled it and added a simple lightbox plugin. Do you think that’s ok?

    Again, thanks for your time!

    March 3, 2018 at 12:34 pm #8912

    Andrew Misplon
    Keymaster

    Thanks for the update. The effect here: https://shop.spoon-tamago.com/products/special-gift-wrapping-add-on is what the child theme I sent would do. Please, see the child theme linked in my previous reply. All of those steps would be required.

    March 3, 2018 at 2:08 pm #8917

    Kristin Ozanian
    Participant

    Oh, I understand now! Thank you again for your time!

    March 3, 2018 at 2:12 pm #8918

    Andrew Misplon
    Keymaster

    For sure!

    There might be a way to edit the existing gallery but I wasn’t able to find any documentation on doing that. If you did go that route you wouldn’t remove all galleries as you’d remove FlexSlider and have nothing to change. The method outlined in my child theme is one solution.

    All the best 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top