WordPress shop: enable custormers to select product color using image thumbnails on Custom Fields

by

Store each custom field as a comma separated pair. Like this:

option_name, option_image_URL

Then we do this (within the loop)…

$options = array();
foreach( get_post_custom_keys( $post->ID ) as $key )
{
    $a = get_post_meta( $post->ID, $key, true )
    $a_array = explode( ',', $a );
    $options[] = $a_array[0] // first value of each array is the option, add it to another array
    echo '<img src="' . $a_array[1] . '" id="' . $a_array[0] . '"/>'; // display the image with the option name as the id attribute

}

Then loop through the options array:

<select name="your_option">
<?php
foreach( $options as $option )
{
   echo '<option id="' . $option . '" value="' . $option . '">' . $option . '</option>';
}
?>
</select>

Each of the images should have an id attributes should have an ID attribute that’s the same as one of the drop down options. You can then use some javascript to change the options around.

This javascript probably won’t work, but it will get you started:

jQuery('img').click(function() 
{
    var id = jQuery(this).attr('id');
    jQuery( 'option' ).removeAttr( 'selected' );
    jQuery( 'option #' + id ).attr( 'selected', 'selected');
}

Leave a Comment