Product image swap for a partially selected variation

  • Resolved Tim

    (@timstl)


    8 years, 5 months ago

    I have a product with 7 attributes. When a user selects all 7 attributes, the image swaps out to the image associated with my variation as expected.

    However, I need the image to swap out as a user selects other attributes. It is essentially a product builder. I need a way to associate images with partial variations, so as they “build” their product through the dropdowns the image correlates with what they have selected.

    Has anyone ever done anything like this or know of a plugin that can support it? Googling didn’t lead to much.

    Thanks,

    Tim

    https://www.ads-software.com/plugins/woocommerce/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Mike Jolley (a11n)

    (@mikejolley)

    Images are associated with the final variation, not specific attributes, so this one isn’t possible out of the box.

    You can set defaults and pre-populate options so images are shown right away however.

    Thread Starter Tim

    (@timstl)

    Thanks for the quick response and confirming it wasn’t available out of the box.

    If anyone else needs to do this, I was able to work around the problem with a few steps:

    1) I made an admin interface using Advanced Custom Fields that lets you select a series of attributes and add a corresponding image. It’s a repeater field with multiple taxonomy (attribute) fields and an image field.

    2) When viewing a product (is_product()) I put the information from the ACF repeater into a json object using wp_localize_script.

    3) I wrote some javascript that watches for the variation dropdowns to change. It then loops through the json object and looks for a combination of attributes that match the current selections. If one is found it swaps out the image. WooCommerce still handles the image swap when all attributes are selected and a variation is found.

    I haven’t shared my code here because it’s not very flexible and mixed in with a bunch of other javascript, but hopefully those steps help.

    Thanks,

    Tim

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Product image swap for a partially selected variation’ is closed to new replies.