X Pro Slider & Woo Commerce Product Images

Beta
#1

Hello,

Loving the new sliders and what we can do with them natively!

One question I do have, is there a way that we can make custom product images sliders using the X Pro slider to replace the woo commerce standard image gallery?

Cheers,
Jonathan

#2

Hi @Maratopia_Digital,

I just added a Dynamic Content statement to help with this. It will be in the official release. Configuration would go something like:

  • Add a Looper Provider set to Dynamic Content
  • Look for “Product Gallery IDs” in the Dynamic Content UI, or type in {{dc:woocommerce:product_gallery_ids}}
  • Add an Image element somewhere inside the Looper Consumer
  • Click the Dynamic Content icon on the image control and choose “Looper > Current Item”

You won’t get 1:1 parity with what the WooCommerce product gallery can do, but this will at least let you automate access to the gallery images and pipe them into Sliders.

3 Likes
#3

Hi @alexander!

I have tested it and it works great!

One thing came up though, and it looks like a bug.

I have assumed that if we want to use a lightbox with product gallery images, we would need to link them like this:

{{dc:woocommerce:product_image}}

However, this shows "> above the image on the front end, and the image is leading to 404. Here’s my test product gallery slider:

image
image761Ă—658 40.6 KB

Thanks!

1 Like
#4

Hi @Misho,

How are you adding the lightbox? I’m not sure why it would be outputting broken HTML like that. Thanks!

#5

Hi @alexander a related question, shall it be possble to use the Slider with WooCommerce:

  • Single Product (Related Products)

  • Single Product (Upsells)

  • Cart Cross Sells

1 Like
#6

Hi @alexander,

I have activated WP Featherlight, which turns into Lightbox any media that links to itself. However, the lightbox itself is not relevant: the error is present also with a deactivated plugin.

I don’t have any further code on the product layout. As soon as I paste the link, it creates the error.

8fnSXQWBXX
8fnSXQWBXX1188Ă—654 258 KB

No console errors.

Furthermore, if I do {{dc:woocommerce:featured_image}} the error is gone, but that one will just load the featured image into each of the slides.

Thanks!

#7

@strobley, It would be possible if we had looper providers for those product queries, but that takes custom code at this time.

@Misho, thanks for confirming! I tried putting {{dc:woocommerce:product_image}} in the Link field and see the same issue. I’ve fixed this for the release. It’s trying to output an entire <img> tag instead of the Image URL.

2 Likes
#8

Thanks @alexander and @Misho! This is brilliant that we can now have native product galleries for woo-commerce websites!

I was also just wondering if it’s also possible to have the slider pagination actually be the image thumbnail?

2 Likes
#9

We don’t have anything to do this out of the box, but it’s possible with a bit of work to setup. You could use the data-x-slide-goto attribute on any element to cause it to jump to a particular slide index.

#10

ah thanks @alexander, I thought about that custom attribute but just wanted to double-check there wasn’t another way.

Would there be a way for the data-x-slide-goto value to be automatically populated based on the number of images?

#11

Thanks for the update @alexander - hopefully an enhancement sometime down the line :slight_smile:

#12

@Maratopia_Digital,

Try something like this:

  • Setup a Looper Provider
  • Inspect the Element that you are using as the Consumer and open the Dev Toolkit.
  • Search for “Rewind” and turn that on. This will let you add another element as a consumer of the same items without any performance loss.
  • Inside the second consumer, have an element with data-x-slide-goto set to {{dc:looper:index}}

That should give you a way to click on a button in a list and trigger it move to a corresponding slide.

2 Likes