Component With Parameters - Woocommerce-Style Images

[whitemedia]

Hi,

We have created a Component with Parameters, which emulates the basics of a Woocommerce product, and is going to be used for affiliate products on our website. We have done this as we do not want the affiliate products to use the Woocommerce system and they will be created as Custom Post Types.

Everything is exactly as we want it with the exception of the product image(s).

Is there a way to replicate Woocommerce’s ability to have several images, displaying the main image in full and additional images as thumbnail, until they are clicked when they display in the main image space (see screenshot below)? I am thinking along the lines of an ACF Pro Gallery, but do not know if this will help achieve what I am looking for?

In addition, can the Woocommerce hover/zoom be replicated for images?

I would be grateful for any help you can suggest!

Thanks,
Christopher

[whitemedia]

Any ideas on this one?

[ruenel]

Hello @whitemedia,

Thanks for writing in!

You can use the Slider element with a Looper Provider Dynamic Content assuming that you are using ACF Pro to create the gallery field of your product. You can then use custom slider navigation that uses thumbnail images which upon clicking on the thumbnail will display the bigger image in the slider.

Hope this makes sense.

[whitemedia]

Hi @ruenel,

Thank you - I think that makes sense. I will try to have a go at it over the coming days! Also, yes, the plan is to use an ACF Gallery for the secondary images.

For the moving of the image upon mouse movement I have found a half solution at https://css-tricks.com/moving-backgrounds-with-mouse-position/. The only issue here is that it uses hard-coded CSS and JS, rather than Cornerstone’s functionality. Whilst I can make it work using the exact instructions, it defeats the point as it is incapable of using Cornerstone’s dynamic data from parameters. Do you think the steps in the link can be made to happen using Cornerstone’s standard features where a div has a background image pulled from parameters?

Thanks,
Christopher

[ruenel]

Hello Christopher,

I think it is also possible. You can add a DIV in the slide which will display the bigger image. Using the Effects, you can make the DIV only visible when you hover over the image in your slider. Thus, displaying a particular part of the image as you move the mouse within the image.

Best Regards.