WP - Attribute and filter Region Sizing (EU, UK, US..)

Question

Here is what I'm trying to achieve:

As you can see here, you can choose shoe size based on the region (EU, UK, US).

After lot of research, I found the solution from @Hambos22 there to be exactly the one I am trying to do. But impossible to put in place neither @Hambos22 or @mikejolley solution. I think that I am missing some knowledge where to put these parts of code as I am trying to put everything inside 'function.php' but it's only displaying me the switcher.

I've added 2 more custom fields in the Attribute size (UK, US).

My website link

My attribute slug: size

Variables added with ACF: uk-size , us-size

My attribute default value: EU

Code I would like to put in place (but don't know the location):

Here is a php snippet

$us_size = get_field('us_size', $term);
    $uk_size = get_field('uk_size', $term);
    $cm_size = get_field('cm_size', $term);
    printf( '<div class="sizeRadio">
        <input type="radio" name="%1$s" value="%2$s" id="%3$s" %4$s>
        <label for="%3$s">
        <span class="label_show" data-region="eu">%5$s</span>
        <span data-region="us">%6$s</span>
        <span data-region="uk">%7$s</span>
        <span data-region="cm">%8$s</span>
        </label>
        </div>', $input_name, $esc_value, $id, $checked, $filtered_label, $us_size, $uk_size, $cm_size );
}

Here is a JS snippet

$('[data-chooseregion]').on('click', function(e) {
                        $(this).addClass('active--sizeSelect').siblings().removeClass('active--sizeSelect');

                        var $active = $('[data-region=' + $(this).data('chooseregion') + ']').addClass('label_show');

                        $('[data-region]').not($active).removeClass('label_show');
                        e.preventDefault();
                    });

Here is the markup for the switcher

<?php
    echo '<a class="sizeSelect active--sizeSelect" data-chooseregion="eu" href="#">EU</a>';
    echo '<a class="sizeSelect" data-chooseregion="us" href="#" >US</a>';
    echo '<a class="sizeSelect" data-chooseregion="uk" href="#" >UK</a>';
    echo '<a class="sizeSelect" data-chooseregion="cm" href="#" >CM</a>';
?>

Anyone could help me to sort it out?

By the way I would also love to apply that to my shop page as a filter in the left panel!

If any more information needed don't hesitate I would reply in less than 12 hours.

Cheers :)

Answer 1

For the single product page:

I finally sort it out and instead of creating a "dynamic" data's change, I chose to create a table from the 2 fields under my pa_size as follow:

if(!empty($terms)){
    echo '<button class="accordion">Size Chart <i class="fa-sitemap"></i></button>
        <div class="panel">
            <table class="sf-table standard_bordered"><tbody><tr><td><strong>EU</strong></td>';
                foreach ($terms as $term) {
                    $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $eu_s .'</td>';
                }
            echo '</tr><tr><td><strong>UK</strong></td>';
            foreach ($terms as $term) {
                    $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $uk_s .'</td>';
                }
            echo '</tr><tr><td><strong>US</strong></td>';   
                foreach ($terms as $term) {
                    $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                    echo '<td>'. $us_s .'</td>';
                }   
            echo '</tr></tbody></table></div>';
}

For the Filter on WC Shop page:

I've created a new "widget" going to my filter panel and also installed the handy plugin PHP Text Widget which Extends the default WordPress text widget making it able to execute PHP code.

Then put the following code in it:

<div class="filter-size">
<input type="button" name="filterEU" value="EU" onclick="sizesEU()" />
<input type="button" name="filterUK" value="UK" onclick="sizesUK()" />
<input type="button" name="filterUS" value="US" onclick="sizesUS()" />
</div>

    <?php
        global $product;
        $terms = get_terms( 'pa_size', $args );
        $page_url = esc_url( home_url( '/' ) );?>

    <div id="filterEU"> 
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $eu_s ?></a>
            <?php } ?>
        <?php endforeach; ?>
        </ul>
    </div>

    <div id="filterUK" style="display:none">
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $uk_s ?></a></li>
            <?php } ?>          
        <?php endforeach; ?>
        </ul>
    </div>

    <div id="filterUS" style="display:none">
        <ul class="jcaa_attr_select jcaa_attr_variable_select  jcaa_size_medium">
            <?php foreach( $terms as $term ):
            $slug = $term->slug;
            $num = (float)$slug;
            if ($num > 20){
                $eu_s = get_field('eu-size', 'pa_size_' . $term->term_id);
                $uk_s = get_field('uk-size', 'pa_size_' . $term->term_id);
                $us_s = get_field('us-size', 'pa_size_' . $term->term_id);
                $term_link = $page_url . 'product-tag/cf-size-eu-' . $eu_s . '-uk-' . $uk_s . '-us-' . $us_s; ?>
                <li><a class="jcaa_attr_option jcaa_obj_text" href="<?php echo esc_url($term_link ); ?>"><?php echo $us_s ?></a></li>
            <?php } ?>  
        <?php endforeach; ?>
        </ul>
    </div>

    <script>
    function sizesEU() {
       document.getElementById('filterEU').style.display = "block";
       document.getElementById('filterUK').style.display = "none";
       document.getElementById('filterUS').style.display = "none";
    }
    function sizesUK() {
       document.getElementById('filterEU').style.display = "none";
       document.getElementById('filterUK').style.display = "block";
       document.getElementById('filterUS').style.display = "none";
    }
    function sizesUS() {
       document.getElementById('filterEU').style.display = "none";
       document.getElementById('filterUK').style.display = "none";
       document.getElementById('filterUS').style.display = "block";
    }
    </script>

Don't hesitate if any question about it.

Cheers