WooCommerce Variation Swatches and Images

WooCommerce Variation Swatches and Images is een stukje code om een variatie om te zetten in klikbare afbeeldingen of color swatches. Beide zijn mogelijk. In WooCommerce kan men standaard afbeeldingen en kleur gebruiken. Als er bij een variatie geen afbeelding wordt geplaatst zal de standaard gebruikt worden.

Dit is een mooie optie dat toegepast kan worden op heel veel producten en voornamelijk producten die in verschillende kleuren te koop zijn, van kleding tot speelgoed. Het werkt alleen met variaties maar dat lijkt mij logisch in dit geval. Met wat aanpassingen kan het ook voor andere variaties gebruikt worden.
Hier bespreken we alleen de basis van deze code maar wordt getracht het zo te brengen dat iedereen hiermee kan werken en het kan aanpassen naar eigen eisen en wensen.

Hier zullen we de volgende onderdelen bespreken:
Gebruik de links om direct naar het onderwerp te gaan.

WooCommerce Variation Swatches and Images is een stuk code dat ik heb ontwikkeld voor wanbetaler David Rusman van Dwork die mij niet wilde betalen voor dit werk. Hiermee komt automatisch de white label status te vervallen voor dit werk. David Rusman van Dwork is een wanbetaler. Meer informatie over David Rusman op businessinsider of download de pdf hier.

Met een WordPress Onderhoudspakket kunt u zorgeloos ondernemen.

WordPress Onderhoudspakket

Waarom WooCommerce Variation Swatches and Images?

Dit is eigenlijk alleen maar een esthetische oplossing om het selecteren van de kleur van een product mooier en duidelijker te maken. Het geeft een meer professionele uitstraling. Dit kan heel erg handig zijn voor producten die in verschillende kleuren worden verkocht. Denk bijvoorbeeld aan kleding maar ook aan producten voor het interieur waar de code eigenlijk voor is ontwikkeld.

Normaal wordt er door WooCommerce een selecteer optie getoond. Dit is niet zo mooi. Hiermee kan men bepalen of er afbeeldingen getoond worden of color swatches.
Er zijn verschillende plugins voor de optie maar die zijn vrij duur en zijn niet echt flexibel. Door hier de code te bieden hopen we dat we het hierdoor ook flexibel maken.

Woocommerce Variation Swatches and Images - Freelance webshop ontwikkeling

Demo WooCommerce Variation Swatches and Images

Een demo van deze WooCommerce Variation Swatches and Images kan je bekijken op Demo WooCommerce Variation Swatches and Images

De demo is puur fictief en dient alleen als demo en hier kunnen geen rechten aan ontleed worden. In deze demo kan men de verschillende kleur mogelijkheden selecteren van het product en de afbeelding hiervoor zal in het linker venster getoond worden. Als de prijs verschilt zal dit ook getoond worden.

Voor deze demo wordt gebruik gemaakt van een plugin dus kan afwijken van de code die hier wordt geboden. De basis is hetzelfde maar enkele aanpassingen waren nodig voor de werking van de plugin en voor het uiterlijk van de demo.

WooCommerce Variation Swatches and Images

Deze code die hier wordt getoond kan geplaatst worden in het thema maar aangeraden wordt dit in een child-theme te plaatsen. We moeten ook nog een WooCommerce template aanpassen maar eerst gaan we WooCommerce voorbereiden voor onze code. Eerst maken we een nieuwe eigenschap(attribuut) aan en passen we een template aan. Daarna kunnen we de code opbouwen in onze functions.php. Beste is dit te plaatsen in een child-theme.

Nieuwe product eigenschap aanmaken

De eigenschappen(attributen) zijn WordPress taxonomieën. Dus hieronder kunnen we later onze verschillende kleuren plaatsen. Omdat we hier te maken hebben met kleuren maken we de eigenschap “kleur” aan.

Log in op WordPress en ga naar Producten >> Eigenschappen. Bij naam vul je “Kleur” in en klik je op “Attribuut toevoegen”. De slug wordt dan vanzelf aangemaakt.

WooCommerce maakt de taxonomie aan maar plaatst er altijd “pa_” voor. Dus onze nieuwe eigenschap voor WooCommerce is “pa_kleur”. Let op dat het allemaal kleine letters zijn. Dit hebben we later nodig voor de code die we in function.php gaan plaatsen.

WooCommerce template aanpassen

Het aanmaken van de eigenschap was de makkelijkste stap. Nu gaan we een WooCommerce template aanpassen en wel variable.php. Deze is te vinden in de WooCommerce map op de server. Ga via ftp naar wp-content >> plugins >> woocommerce >> templates >> single-product >> add-to-cart en kopieer de file variable.php. Deze moet in je child-theme of je huidige theme geplaatst worden. Als in het thema de map “woocommerce” nog niet bestaat maak je deze eerst aan. In deze map maak je een nieuwe map “singe-product” aan. En als laatst maak je in de map “single-product” de map “add-to-cart”. In deze map moet variable.php geplaatst worden. Het pad naar het bestand wordt dan /woocommerce/single-product/add-to-cart/variable.php

Nu kunnen we deze template gaan aanpassen. Open het bestand en zoek naar <tr> deze staat op regel 37. Deze moet veranderd worden in het volgende.


<tr class="<?php echo esc_attr(sanitize_title($attribute_name)); ?>">

En sla dit bestand op in je thema of child-theme. Hier hoeven we nu niets meer aan te doen. WooCommerce zal nu automatisch de standaard template overschrijven met deze template.

Dit zorgt ervoor dat de naam van de eigenschap(attribuut) nu een class wordt. Hiermee kunnen we de standaard eigenschap die WooCommerce plaats verbergen met CSS en kunnen we dit gebruiken voor het script om het geheel werkend te maken.

Hiermee hebben we nu een eigenschap en is de template voorbereid voor onze code. Nu wordt het tijd om naar het leukste deel te kijken, de code.

De code voor de backend voor WooCommerce Variation Swatches and Images

Eerst beginnen we met het gedeelte van de backend van WooCommerce. Dit is eigenlijk meer om standaard kleuren en of afbeeldingen te gebruiken voor als er geen afbeelding wordt geplaatst bij de variatie van het product.

Ten eerste als je nog geen placeholder afbeelding hebt maak deze dan aan en plaats deze in het theme of child-theme. Hier gebruiken we de clw-placeholder.png in de map img. Uiteraard kan je de naam van de afbeelding en de map zelf bepalen maar dat moet dan verwerkt worden in de volgende functie.
Deze code moet geplaatst worden in functions.php van je thema of child-theme.

Als je de afbeelding plaatst in het child theme, gebruik dan deze code


// Function to get url of the placeholder image in theme
function clw_placeholder_img_src() {
    return get_template_directory_uri().'/img/clw-placeholder.png';
}

Maar als je het in je huidige thema plaatst, gebruik dan de volgende code:


// Function to get url of the placeholder image in theme
function clw_placeholder_img_src() {
    return get_stylesheet_directory_uri().'/img/clw-placeholder.png';
}

Nu wordt het tijd om eerst de CSS en het script te laden voor de color picker en dat doen we met de volgende code.


// Enqueue color picker style and script
add_action('admin_enqueue_scripts', 'clw_kleur_add_color_picker');
function clw_kleur_add_color_picker($hook) {
    if(is_admin()) {

        // Add the color picker css file   
        wp_enqueue_style('wp-color-picker'); 
 
        // Include our custom jQuery file with WordPress Color Picker dependency
        wp_enqueue_script('custom-script-handle', plugins_url('custom-script.js', __FILE__), array('wp-color-picker'), false, true);
    }
}

Nu we weten dat alles voor de color picker worden geladen kunnen we de extra velden aanmaken voor de pagina waar we de kleuren aanmaken.


// Create a image upload and color picker field to the create term page
add_action('pa_kleur_add_form_fields', 'clw_add_pa_kleur_fields', 10, 2);
function clw_add_pa_kleur_fields() { ?>
<div class="form-field term-thumbnail-wrap">
    <label><?php _e('Thumbnail 300 x 300', 'woocommerce'); ?></label>
    <div id="cat_thumbnail" style="float: left; margin-right: 10px;"><img id="cat_thumbnail_image" src="<?php echo esc_url(clw_placeholder_img_src()); ?>" width="100px" height="100px" /></div>
    <div style="line-height: 100px;">
        <input type="hidden" id="cat_thumbnail_id" name="cat_thumbnail" />
        <button type="button" class="upload_image_button button" style="vertical-align: bottom;"><?php _e('Upload/Add image', 'woocommerce'); ?></button>
        <button type="button" class="remove_image_button button" style="vertical-align: bottom;"><?php _e('Remove image', 'woocommerce'); ?></button>
    </div>
    <script type="text/javascript">
        if(!jQuery('#cat_thumbnail_id').val()) {
            jQuery('.remove_image_button').hide();
        }
        var file_frame;
        jQuery(document).on('click', '.upload_image_button', function(event) {
            event.preventDefault();
            if(file_frame) { file_frame.open(); return; }
            file_frame = wp.media.frames.downloadable_file = wp.media({
                title: '<?php _e('Choose an image', 'woocommerce'); ?>',
                button: {text: '<?php _e('Use image', 'woocommerce'); ?>'},
                multiple: false
            });
            file_frame.on('select', function() {
                var attachment = file_frame.state().get('selection').first().toJSON();
                var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
                jQuery('#cat_thumbnail_id').val(attachment.id);
                jQuery('#cat_thumbnail_image').attr('src', attachment_thumbnail.url);
                jQuery('.remove_image_button').show();
            });
            file_frame.open();
        });
 
        jQuery(document).on('click', '.remove_image_button', function() {
            jQuery('#cat_thumbnail_image').attr('src', '<?php echo esc_js(clw_placeholder_img_src()); ?>');
            jQuery('#cat_thumbnail_id').val('');
            jQuery('.remove_image_button').hide();
            return false;
        });
        jQuery(document).ajaxComplete(function(event, request, options) {
            if(request && 4 === request.readyState && 200 === request.status && options.data && 0 <= options.data.indexOf('action=add-tag')) {
                var res = wpAjax.parseAjaxResponse(request.responseXML, 'ajax-response');
                if(!res || res.errors) { return; }
                jQuery('#cat_thumbnail_image').attr('src', '<?php echo esc_url(clw_placeholder_img_src()); ?>');
                jQuery('#cat_thumbnail_id').val('');
                jQuery('.remove_image_button').hide();
                jQuery('#display_type').val('');
                return;
            }
        });
    </script>
    <div class="clear"></div>
    <p>Max. afbeelding afmeting 300px x 300px.</p>
</div>
<div class="form-field term-featured-wrap">
    <label><?php _e('Kleur', 'woocommerce'); ?></label>
    <div>
        <input type="text" id="cat_color_id" class="clw-color-field" name="cat_color" value="#f2f2f2"/>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('.clw-color-field').wpColorPicker();
    });
    jQuery(document).ready(function() {
        jQuery('input.clw-color-field').on('change', function() {
            var Color = jQuery('.clw-color-field').val();
            if(Color || Color !== '') {
                jQuery('span.clw-color-example').css('color', newval);
            }
        });
    });
    </script>
    <div class="clear"></div>
    <p>Selecteer een kleur</p>
</div>
<?php }

Dit zal er ongeveer uitzien als in de volgende afbeelding.

Woocommerce Variation Swatches and Images - Custom Fields Create Page

Nu worden deze velden getoond als je een nieuwe kleur aan wilt maken maar het is ook nodig dat we deze velden hebben op de pagina waar we de kleur kunnen bewerken. En dat doen we met de volgende code.


// Create a image upload and color picker field to the edit term page
add_action('pa_kleur_edit_form_fields', 'clw_edit_pa_kleur_fields', 10, 2);
function clw_edit_pa_kleur_fields($term) {
    $cat_thumbnail = get_term_meta($term->term_id, 'cat_thumbnail', true);
    if($cat_thumbnail) {
        $image = wp_get_attachment_thumb_url($cat_thumbnail);
    } else {
        $image = clw_placeholder_img_src();
    }
    $cat_color = get_term_meta($term->term_id, 'cat_color', true);
    if($cat_color) {
        $featured = $cat_color;
    } else {
        $featured = '#f2f2f2';
    } ?>
 
    <tr class="form-field">
        <th scope="row" valign="top"><label><?php _e('Thumbnail 300 x 300', 'woocommerce'); ?></label></th>
        <td>
            <div id="cat_thumbnail" style="float:left;margin-right:10px;"><img src="<?php echo esc_url($image); ?>" width="100" height="100" /></div>
            <div style="line-height:100px;">
                <input type="hidden" id="cat_thumbnail_id" name="cat_thumbnail" value="<?php echo $cat_thumbnail; ?>" />
                <button type="button" class="upload_image_button button" style="vertical-align: bottom;"><?php _e('Upload/Add image', 'woocommerce'); ?></button>
                <button type="button" class="remove_image_button button" style="vertical-align: bottom;"><?php _e('Remove image', 'woocommerce'); ?></button>
            </div>
            <script type="text/javascript">
                if('0' === jQuery('#cat_thumbnail_id').val()) { jQuery('.remove_image_button').hide(); }
                var file_frame;
                jQuery(document).on('click', '.upload_image_button', function(event) {
                    event.preventDefault();
	               if(file_frame) { file_frame.open(); return; }
                    file_frame = wp.media.frames.downloadable_file = wp.media({
                        title: '<?php _e('Choose an image', 'woocommerce'); ?>',
                        button: { text: '<?php _e('Use image', 'woocommerce'); ?>' },
                        multiple: false
                    });
                    file_frame.on('select', function() {
                        var attachment = file_frame.state().get('selection').first().toJSON();
                        var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
                        jQuery('#cat_thumbnail_id').val(attachment.id);
                        jQuery('#cat_thumbnail img').attr('src', attachment_thumbnail.url);
                        jQuery('.remove_image_button').show();
                    });
                    file_frame.open();
                });
                jQuery(document).on('click', '.remove_image_button', function() {
                    jQuery('#cat_thumbnail').find('img').attr('src', '<?php echo esc_js(clw_placeholder_img_src()); ?>');
                    jQuery('#cat_thumbnail_id').val('');
                    jQuery('.remove_image_button').hide();
                    return false;
                });
            </script>
            <div class="clear"></div>
            <p class="description">Max. afbeelding afmeting 300px x 300px.</p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top"><label><?php _e('Kleur', 'woocommerce'); ?></label></th>
        <td>
            <div>
                <input type="text" id="cat_color_id" class="clw-color-field" name="cat_color" value="<?php echo $featured; ?>"/>
            </div>
            <script type="text/javascript">
                jQuery(document).ready(function(){
                    jQuery('.clw-color-field').wpColorPicker();
                });
            </script>
            <div class="clear"></div>
            <p>Selecteer een kleur</p>
        </td>
    </tr>
<?php }

De custom velden voor de edit page is vergelijkbaar met de create page. Deze custom velden zullen er ongeveer als volgt uitzien:

Woocommerce Variation Swatches and Images - Custom Fields Edit Page

Nu zijn beide extra velden te zien op beide pagina’s maar nu moeten we deze gaan opslaan en dat doen we met de volgende code.


// Save the image and color fields for edit and create page
add_action('edited_pa_kleur', 'clw_save_pa_kleur_fields', 10, 2);
add_action('create_pa_kleur', 'clw_save_pa_kleur_fields', 10, 2);
function clw_save_pa_kleur_fields($term_id) {
    if(!current_user_can('manage_options')) return;
    if($_POST['cat_thumbnail']){
        if(isset($_POST['cat_thumbnail'])) {
            update_term_meta($term_id, 'cat_thumbnail', $_POST['cat_thumbnail']);
        } 
    } else {
        update_term_meta($term_id, 'cat_thumbnail', '');
    }
    if($_POST['cat_color']){
        if (isset($_POST['cat_color'])) {
            update_term_meta($term_id, 'cat_color', $_POST['cat_color']);
        }
    } else {
        update_term_meta($term_id, 'cat_color', '');
    }
}

Nu hebben we de nieuwe velden en deze worden nu ook opgeslagen in de database. En voor ons eigen gemak gaan we de waarden van deze velden tonen in de lijst met kleuren. Dus eerst maken we twee nieuwe kolommen aan met de volgende code:


// Add the columns Image and Color
add_filter('manage_edit-pa_kleur_columns', 'pa_kleur_columns', 10, 2);
function pa_kleur_columns($columns) {
    $new_columns = array();
    if(isset($columns['cb'])) {
        $new_columns['cb'] = $columns['cb'];
        unset($columns['cb']);
    }
    $new_columns['thumb'] = __('Image', 'woocommerce');
    $new_columns['featured'] = __('Kleur', 'woocommerce');
    $columns = array_merge($new_columns, $columns);
    $columns['handle'] = '';
    return $columns;
}

Als laatst moeten deze kolommen ook gevuld worden met een afbeelding of een kleurtje. Hiervoor gebruiken we de volgende code:


// Show the Image and Color in the term list
add_filter('manage_pa_kleur_custom_column', 'manage_pa_kleur_thumbnail', 10,3);
function manage_pa_kleur_thumbnail($deprecated,$column_name,$term_id) {
    if($column_name == 'thumb') {
        $thumbnail_id = get_term_meta($term_id, 'cat_thumbnail', true);
        if ($thumbnail_id) {
            $image = wp_get_attachment_thumb_url($thumbnail_id);
        } else {
            $image = clw_placeholder_img_src();
        }
        $image = str_replace(' ', '%20', $image);
        echo '<img src="'.esc_url($image).'" alt="'.esc_attr__('Thumbnail', 'woocommerce').'" class="wp-post-image" height="60" width="60"/>';
    }
    if($column_name == 'featured') {
        $featured_color = get_term_meta($term_id, 'cat_color', true);
        if($featured_color) {
            $featured = $featured_color;
        } else {
            $featured = '#f2f2f2';
        }
        echo '<span class="clw-color-example" style="display:block;width:46px;height:46px;background-color:'.$featured.'"></span>';
    }
}

In de volgende afbeelding is te zien hoe dit eruit komt te zien als we enkele kleuren hebben aangemaakt.

Woocommerce Variation Swatches and Images - Term List

En dit is zoals uiteindelijk de lijst met kleuren en afbeeldingen eruit kan komen te zien. Duidelijk en overzichtelijk en makkelijk om aan te passen en aan te vullen.
Bij zwart is goed te zien wat er gebeurd als er geen afbeelding en kleur aanwezig is.
Uiteraard is het niet altijd nodig om alles te gebruiken. Als je alleen afbeeldingen wilt gebruiken dan plaats je alleen die. Net zo goed kan men alleen de color picker gebruiken om een kleur te kiezen.

Vraag vrijblijvende een offerte aan.

Offert Aanvragen

De code voor de frontend voor WooCommerce Variation Swatches and Images

Tot nu toe hebben we alle code voor de backend van WordPress en WooCommerce klaar maar nu moeten we het nog tonen op de product pagina. HIervoor is de volgende code dat ook in functions.php geplaatst moet worden. Het is ook mogelijk om dit in de variable.php te plaatsen. Verstandiger is om dit in functions.php te plaatsen.

Deze code plaatst de HTML en de benodigde style en script om de variatie om te zetten in afbeeldingen of swatches.


// Add Swatches(HTML, Style and Script) before add to cart form
add_action('woocommerce_before_add_to_cart_form', 'clw_swatches_before_add_to_cart_form', 10, 0);
function clw_swatches_before_add_to_cart_form() {
 
global $product;
$color = $product->get_attribute('pa_kleur');
 
// if product has attribute 'pa_color' value(s)
if(!empty($color)){ ?>
    <div id="clw-variation-color">
    <style type="text/css">
    #clw-variation-color h3{color:#0b253e;font-family:'PT Sans',sans-serif;font-size:1.2rem;font-weight:700;line-height:26px;margin:0 0 0 5px}
    #clw-variation-color input.hidden-radio {display:none}
    #clw-variation-color .color-variations-dropdown, #clw-variation-color .variation-kleuren {display:bock;width:100%}
    #clw-variation-color .variation-kleuren {margin-left:-4px;margin-right:-4px}
    #clw-variation-color label.crindel-var-label {display: inline-block;vertical-align:top;width:calc((100% / 8) - 8px);margin:0 4px;border:1px solid transparent;max-width: 60px}
    #clw-variation-color input.hidden-radio:checked+label {border:1px solid #0b253e}
    #clw-variation-color label.crindel-var-label img {display:block}
    span.clw-color-example {width:100%;height:100%;display:block;padding-bottom:100%;max-width:60px;box-sizing:border-box;position:relative}
    tr.pa_kleur{display:none}
    #clw-variation-color label.crindel-var-label.var-label-txt span.clw-color-example {background-color:#fff}
    #clw-variation-color label.crindel-var-label.var-label-txt span.clw-term-name {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:16px;font-weight:700;font-family:'PT Sans',sans-serif;line-height:1.2em;text-align:center;color:#0b253e}
    </style>
<?php $available_variations = $product->get_available_variations();
    if(count($available_variations) > 0){
 
    $output = '<div class="color-variations-dropdown">
        <div class="variation-kleuren">
        <h3>Kleur</h3>';
 
        foreach($available_variations as $variation){
            $option_value = array();
 
            foreach($variation['attributes'] as $attribute => $term_slug){
                if($attribute == 'attribute_pa_kleur') {
                    $taxonomy = str_replace('attribute_', '', $attribute);
                    $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
                    $term = get_term_by('slug', $term_slug, $taxonomy);
                    $term_name = $term->name; // Attribute value term name
                    $variation_id = $variation['variation_id'];
                    $default_value = $product->get_variation_default_attribute($taxonomy);
 
                    if($default_value == $term_slug) {
                        $checked = ' checked="checked"';
                    } else {
                        $checked = '';
                    }
 
                    if(has_post_thumbnail($variation['variation_id'])) {
                        $img = wp_get_attachment_image_src(get_post_thumbnail_id($variation['variation_id']), 'thumbnail');
                    } else {
                        $cat_thumbnail = get_term_meta($term->term_id, 'cat_thumbnail', true);
                        if($cat_thumbnail && $cat_thumbnail !== '') {
                            $img = wp_get_attachment_image_src($cat_thumbnail, 'thumbnail');
                        } else {
                            $img = '';
                        }
                    }
 
                    $option_value[] = $attribute_name . ': '.$term_name;
                }
            }
            $option_value = implode(' | ', $option_value);
 
            if($img && $img !== '') {
                $output .= '<input type="radio" class="hidden-radio" id="'.$variation_id.'" name="'.$attribute.'" value="'.$term_slug.'"'.$checked.'><label class="crindel-var-label" for="'.$variation_id.'"><img class="crindel-var-kleur" src="'.$img[0].'"></label>';
            } elseif($img == '') {
                $cat_color = get_term_meta($term->term_id, 'cat_color', true);
                if($cat_color && $cat_color !== '') {
                    $output .= '<input type="radio" class="hidden-radio" id="'.$variation_id.'" name="'.$attribute.'" value="'.$term_slug.'"'.$checked.'><label class="crindel-var-label" for="'.$variation_id.'"><span class="clw-color-example" style="background-color:'.$cat_color.'"></span></label>';
                } else {
                    $output .= '<input type="radio" class="hidden-radio" id="'.$variation_id.'" name="'.$attribute.'" value="'.$term_slug.'"'.$checked.'><label class="crindel-var-label var-label-txt" for="'.$variation_id.'"><span class="clw-color-example"><span class="clw-term-name">'.$term_name.'</span></span></label>';
                }
            }
        }
        $output .= '</div>
            </div>';
 
        echo $output;
    } ?>
    <script type="text/javascript">
    jQuery(document).on('change', '#clw-variation-color input', function() {
        jQuery('#clw-variation-color input:checked').each(function(index, element) {
            var $el = jQuery(element);
            var thisName = $el.attr('name');
            var thisVal  = $el.attr('value');
            jQuery('select[name="'+thisName+'"]').val(thisVal).trigger('change');
        });
    });
    jQuery(document).on('woocommerce_update_variation_values', function() {
        jQuery('#clw-variation-color input').each(function(index, element) {
            var $el = jQuery(element);
            var thisName = $el.attr('name');
            var thisVal  = $el.attr('value');
            $el.removeAttr('disabled');
            if(jQuery('select[name="'+thisName+'"] option[value="'+thisVal+'"]').is(':disabled')) {
                $el.prop('disabled', true);
            }
        });
    });
    </script>
    </div>
 
<?php }
}

Dit zou er ongeveer uit kunnen zien als onderstaande afbeelding. Althans zo ziet er uit op de demo.

Woocommerce Variation Swatches and Images - Freelance webshop ontwikkeling

De werking is vrij eenvoudig. Ten eerste wordt de bestaande optie om kleuren te selecteren verborgen en worden er radio buttons gebruikt om de kleuren te tonen als afbeeldingen of color swatches. Afhankelijk van wat er beschikbaar is. Ten eerste wordt altijd gekeken of voor de variatie een afbeeldingen is geplaatst. Als deze er niet is dan wordt er gekeken naar de standaard swatches of hex kleuren van de color picker.

Toepassingen en gebruik

Deze code voor WooCommerce Variation Swatches and Images kunnen gebruikt worden voor alle producten waar men e kleur kan kiezen. Met enkele aanpassingen kunnen allerlei soort variaties aangepast worden om swatches en of afbeeldingen te gebruiken. Het is een mooie oplossing en maakt het voor de klant makkelijker te kiezen. Dit is uiteraard bevoordelijk voor de verkoop.

De belangrijkste reden om deze code hier te delen is omdat de persoon voor wie ik dit heb gemaakt, David Rusman van Dwork, mij niet heeft betaald. Vermoedelijk wil hij hier een plugin van maken en misschien doorverkopen of wat dan ook. Het leek dan ook de meest logische reactie om deze code te delen met iedereen.

Het is jammer dat mensen die begrijpen hoeveel tijd en energie erin zit dergelijke zaken te bedenken en dit mogelijk te maken met code. Wat mij verder stoorde was dat wanbetaler David Rusman altijd klaagde over zijn klanten alsof hij alle schuld op de klant wilde afschuiven. Jammer dat er nog steeds dit soort personen aanwezig zijn die geen begrip en respect hebben voor hun klanten en zelfs niet voor de mensen die de belangrijkste werkzaamheden uitvoeren en waar maken.

De code kan gebruikt worden zoals hier getoond wordt. De code is gratis maar Cornelis de Leeuw van Weenen is de auteur en heeft dus alle auteursrechten maar is niet verantwoordelijk voor het gebruik hiervan.