Thanks to the help of stack overflow I was able to make my filter work(Ajax filter for wordpress) but now I want to add a search input that search the titles of my posts (a custom post type called 'Contratistas').
So I have a few questions:
My form for my filter has POST, but the search (i've seen examples) always has GET, so, should I have two separete forms? If so, is there a way for submiting my search without a button? this is my code:
<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="search-field mb-3" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
<input type="submit" value="Search" class="mb-3">
</form>
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<div class="titulo mb-3">
<h3>Región</h3>
</div>
<?php
if( $terms = get_terms( array( 'taxonomy' => 'region', 'orderby' => 'name' ) ) ) :
echo '<select name="filtroRegion"><option value="">Seleccione una región</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>';
endif;
?>
<div class="titulo my-3">
<h3>Industrias</h3>
</div>
<?php
if( $terms = get_terms( array( 'taxonomy' => 'industria', 'orderby' => 'name' ) ) ) :
echo '<select name="filtroIndustria"><option value="">Seleccione una industria</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>';
endif;
?>
<button class="my-3 filtrar">Filtrar</button>
<button>Limpiar filtros</button>
<input type="hidden" name="action" value="myfilter">
</form>
As you can see i have two buttons but i only want the last one ('Filtrar')
I have no idea how to implement the search with the filters so that i can put my results in the same fashion as the one i get from the dropdowns.
Here is my filter:
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'], // ASC or DESC
'post_per_page' => -1,
'post_type' => 'contratista'
);
if (!empty($_POST['filtroRegion']) || !empty($_POST['filtroIndustria'])) {
$args['tax_query'] = array();
if (!empty($_POST['filtroRegion'])) {
$args['tax_query'][] = array(
'taxonomy' => 'region',
'terms' => $_POST['filtroRegion']
);
}
if (!empty($_POST['filtroIndustria'])) {
$args['tax_query'][] = array(
'taxonomy' => 'industria',
'terms' => $_POST['filtroIndustria']
);
}
if (count($args['tax_query']) > 1) {
$args['tax_query']['relation'] = 'AND';
}
}
$query = new WP_Query($args);
And my JQuery:
jQuery(function($) {
$('#filter').submit(function() {
var filter = $('#filter');
$.ajax({
url: filter.attr('action'),
data: $('#filter :input').filter(function(index, element) { return $(element).val() != ''; }).serialize(), // form data
type: filter.attr('method'), // POST
beforeSend: function(xhr) {
filter.find('.filtrar').text('Procesando...'); // changing the button label
},
success: function(data) {
filter.find('.filtrar').text('Filtrar'); // changing the button label back
$('#response').html(data); // insert data
}
});
return false;
}
}
Any help or guidance will be very appreciated. Thanks
I got it! Here's my working code in case somebody else needs it!
The answer was VERY simple! I only had to add this:
's' => $_POST['s']
Here is my function
function misha_filter_function(){
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'], // ASC or DESC
'post_per_page' => -1,
'post_type' => 'contratista',
's' => $_POST['s'],
);
//Same code as before:
if( !empty($_POST['filtroRegion']) || !empty($_POST['filtroIndustria']) ){
$args['tax_query'] = array();
if(!empty($_POST['filtroRegion']) ){
$args['tax_query'][] = array(
'taxonomy' => 'region',
'terms' => $_POST['filtroRegion']
);
}
}
$query = new WP_Query( $args );
//my post
And my form:
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<h3>Buscar</h3>
<input type="text" class="search-field mb-3" name="s" placeholder="Busqueda por nombre" value="<?php echo get_search_query(); ?>">
<div class="titulo mb-3">
<h3>Región</h3>
</div>
<?php
if( $terms = get_terms( array( 'taxonomy' => 'region', 'orderby' => 'name' ) ) ) :
echo '<select name="filtroRegion"><option value="">Seleccione una región</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>';
endif;
?>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
So I've been working on this for hours now. About 6 of them with no breaks and I cannot understand why this isn't working.
So I have this form:
<div id="wp-ajax-filter-search" class="full">
<form action="" method="get">
<div class="flex filters-grid">
<div id="#sortBy" class="flex filters-dropdown">
<p class="filters-title">
Sort By
</p>
<div class="filters-options">
<input class="wp-drop-filter-item" type="radio" id="alphabetically" value="title" name="sort_filter">
<label for="alphabetically">
Alphabetically
</label>
<input class="wp-drop-filter-item" type="radio" id="datenew2old" value="ASC" name="sort_filter">
<label for="datenew2old">
Date Added (New to Old)
</label>
<input class="wp-drop-filter-item" type="radio" id="dateold2new" value="DESC" name="sort_filter">
<label for="dateold2new">
Date Added (Old to New)
</label>
</div>
</div>
<div id="#countries" class="flex filters-dropdown">
<p class="filters-title">
Country
</p>
<?php
// set up a new query for each category, pulling in related posts.
$destinations = new WP_Query(
array(
'showposts' => -1,
'post_type' => 'destinations',
'post_status' => 'publish',
'order_by' => 'title',
'order' => 'ASC'
)
);
if ($destinations->have_posts()):
?>
<div class="filters-options">
<input class="wp-drop-filter-item <?php echo $country_slug ?>" type="radio" id="any" value="any" name="country_filter">
<label for="any">
Any
</label>
<?php while ($destinations->have_posts()) : $destinations->the_post();
global $post;
$post_slug = $post->post_name;?>
<input class="wp-drop-filter-item country-option" type="radio" id="<?php echo $post_slug ?>" value="<?php echo $post->ID ?>" name="country_filter" >
<label for="<?php echo $post_slug; ?>">
<?php echo get_the_title(); ?>
</label>
<?php endwhile; ?>
<?php
// Reset things, for good measure
$destinations = null;
wp_reset_postdata();
?>
</div>
<?php endif; ?>
</div>
<div id="#regions" class="flex filters-dropdown">
<p class="filters-title">
Region <span class="extra">(Choose Country First)</span>
</p>
<?php
// set up a new query for each category, pulling in related posts.
$regions = new WP_Query(
array(
'showposts' => -1,
'post_type' => 'regions',
'post_status' => 'publish',
'order_by' => 'title',
'order' => 'ASC'
)
);
if ($regions->have_posts()):
?>
<div class="filters-options">
<input class="wp-drop-filter-item" type="radio" id="any-region" value="any" name="region_filter">
<label class="region-option" for="any-region">
Any
</label>
<?php while ($regions->have_posts()) : $regions->the_post();
global $post;
$post_slug = $post->post_name;
$country = get_field( "country", $post );
$country_slug = get_post_field( 'post_name', $country ); ?>
<input class="wp-drop-filter-item" type="radio" id="<?php echo $post_slug ?>" value="<?php echo $post->ID ?>" name="region_filter">
<label class="region-option <?php echo $country_slug ?>" for="<?php echo $post_slug; ?>">
<?php echo get_the_title(); ?>
</label>
<?php endwhile; ?>
<?php
// Reset things, for good measure
$regions = null;
wp_reset_postdata();
?>
</div>
<?php endif; ?>
</div>
</div>
</form>
<ul id="ajax_filter_search_results" class="destinations grid"></ul>
</div>
Whenever you change one of the radio buttons, AJAX is triggered using this JS code:
var wpmafs = $("#wp-ajax-filter-search");
var wpmafsForm = wpmafs.find("form");
$(".wp-drop-filter-item").on("change",function(e){
e.preventDefault();
var sort_filter = $("input[name='sort_filter']:checked").val();
var country_filter = $("input[name='country_filter']:checked").val();
var region_filter = $("input[name='region_filter']:checked").val();
var data = {
action : "wp_ajax_filter_search",
sort_filter : sort_filter,
country_filter : country_filter,
region_filter : region_filter
};
console.log(data);
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
grid = $( "#ajax_filter_search_results" );
wpmafs.find(grid).empty();
if(response) {
for(var i = 0 ; i < response.length ; i++) {
var html = '<a class="grid-item destination" href="' + response[i].permalink + '">';
html += '<p class="grid-item-title">' + response[i].title + '</p>';
html += '<ul class="features">';
var features = response[i].features;
for(var k = 0 ; k < features.length ; k++){
if(k > 3) break;
html += '<li> <img width="8" height="8" src="/wp-content/uploads/2022/03/golf-escapes-sussex-uk-packages-benefits-copy.svg" class="attachment-medium size-medium">' + features[k]['point'] + '</li>';
}
html += '</ul>';
html += '<div class="bg-img">';
html += '<img src="' + response[i].image_url + '">';
html += '</div>';
html += '</a>';
wpmafs.find(grid).append(html);
}
} else {
var html = "<li class='no-result'>No matches found. Try a different filter.</li>";
wpmafs.find(grid).append(html);
}
},
error: function() {
grid = $( "#ajax_filter_search_results" );
wpmafs.find(grid).empty();
var html = "<li class='no-result'>It appears we're having some technical difficulties. Please try again shortly or call us.</li>";
wpmafs.find(grid).append(html);
}
});
});
And here's the AJAX function:
function wp_ajax_filter_search_callback() {
header("Content-Type: application/json");
if(isset($GET['sort_filter'])) {
$sortval = $GET['sort_filter'];
if($sortval == 'title'){
$orderby = $sortval;
$order = 'ASC';
} elseif ($sortval == 'ASC' || $sortval == 'DESC'){
$orderby = 'date';
$order = $sortval;
} else {
$orderby = 'title';
$order = 'ASC';
}
};
if(isset($_GET['country_filter'])) {
$location = $_GET['country_filter'];
if ($location != 'any'){
$loc_query[] = array(
'key' => 'country',
'value' => $location,
'compare' => "IN",
);
}
};
if(isset($_GET['region_filter'])) {
$region = $_GET['region_filter'];
if ($region != 'any'){
$region_query[] = array(
'key' => 'region',
'value' => $region,
'compare' => "IN",
);
}
};
$meta_query = array(
'relation' => 'AND',
$loc_query,
$region_query,
);
$args = array(
'post_type' => 'hotels',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => $orderby,
'order' => $order,
'meta_query' => $meta_query
);
$search_query = new WP_Query( $args );
if ( $search_query->have_posts() ) {
$result = array();
while ( $search_query->have_posts() ) {
$search_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"permalink" => get_permalink(),
"image_url" => get_the_post_thumbnail_url('', 'medium-large'),
"features" => get_field('featured_offer')
);
}
wp_reset_query();
echo json_encode($result);
} else {
}
wp_die();
}
I have used this code before on another website, so I know that it can work, but it's not working in this instance.
The country_filter and region_filter radio buttons are working. When you change them the AJAX call runs, and the wp_query is actually filtered.
The problem, however, is that the sort_filter radio button won't work for some reason.
So, to test I've been putting print_r("some random bit of text") and checking the network tab in my browsers inspector to see if that text appears in the Request. Under if(isset($_GET['country_filter'])) and if(isset($_GET['region_filter'])), the text displays. But, if I put it under if(isset($_GET['sort_filter'])) it doesn't display.
So, clearly, the AJAX code is getting to the if(isset($_GET['sort_filter'])) line and saying "Nope, it's not set". But it is.
And if I use console.log() in the JS code to log the data that is being sent to the AJAX call, I can clearly see that the value of the selected sort_filter radio button is being sent:
{action: 'wp_ajax_filter_search', sort_filter: 'title', country_filter: undefined, region_filter: undefined}
The request URL in the Network tab also has that information in it, for example:
https://my.staging.url/wp-admin/admin-ajax.php?action=wp_ajax_filter_search&sort_filter=title
Despite all that, I can't get the AJAX code to $GET the sort_filter radio button value and use it in the WP_Query.
Any help is totally appreciated. I'm going to get some shut-eye for a bit as I've completely burnt myself out on this but I look forward to seeing what help anyone can offer because this really is driving me up the wall and the deadline is fast approaching.
Enormous thanks in advance!
In your ajax callback function you have
if(isset($GET['sort_filter'])) {
$sortval = $GET['sort_filter'];
and it should be
if(isset($_GET['sort_filter'])) {
$sortval = $_GET['sort_filter'];
ie you are missing the _ out of both calls to $_GET
I have an ajax form that filters posts based on the category.
Setup:
HTML form
PHP function to echo ouput
jQuery ajax request to load php
function
Question: How can I parse a value to the php function ($test, see below) from within the jQuery ajax function?
Form - Outputs html select field and button to filter posts
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
echo '<select name="categoryfilter"><option>Select category...</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>';
endif;
?>
<button>Apply filter</button>
<input type="hidden" name="action" value="myfilter">
</form>
<div id="response"></div>
PHP function - Outputs result on button click in HTML form
function misha_filter_function($test){
// Do something with $test, but how to parse it with jQuery into this php function?
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'] // ASC или DESC
);
// for taxonomies / categories
if( isset( $_POST['categoryfilter'] ) )
$args['tax_query'] = array(
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['categoryfilter']
)
);
$query = new WP_Query( $args );
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo '<h2>' . $query->post->post_title . '</h2>';
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
add_action('wp_ajax_myfilter', 'misha_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');
jQuery - Question: how to parse php value $test to the above php function?
jQuery(function($){
$('#filter').submit(function(){
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').text('Processing...'); // changing the button label
},
success:function(data){
filter.find('button').text('Apply filter'); // changing the button label back
$('#response').html(data); // insert data
}
});
return false;
});
});
You serialize data so accesed by:
parse_str($_POST['data'], $inputValues); //$inputValues will be array with your form fields
So I have this widget that I coded base on wordpress standard. I declared a sort of variables to be use both backend and frontend purposes.
public function widget( $args, $instance ) {
global $post;
$sid = $instance['id'];
$name = $instance['name'];
$args = array( 'post_type' => 'content_manager','post_id' => $sid);
$query = new WP_Query( $args );
echo $args['before_widget'];
echo $args['after_widget'];
}
public function form( $instance ) {
global $post;
$args = array( 'post_type' => 'content_manager'); ....
$loop = new WP_Query( $args );
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
$sid = ! empty( $instance['id'] ) ? $instance['id'] : esc_html__( 'New ID', 'text_domain' );
$name = ! empty( $instance['name'] ) ? $instance['name'] : esc_html__( 'Empty Content', 'text_domain' );
I am using the variables to get the values in javascript
<script>
function defineValue(sel)
{
var title = sel.options[sel.selectedIndex].text;
var id = sel.options[sel.selectedIndex].value;
document.getElementById("<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>").value = title;
document.getElementById("<?php echo esc_attr( $this->get_field_name( 'id' ) ); ?>").value = id;
document.getElementById("<?php echo esc_attr( $this->get_field_name( 'name' ) ); ?>").value = title;
}
</script>
When I load the widget, the inputs and other options displays the names and IDs but in Javascript returns empty unless If I save it first.
I tried to test it
<?php echo esc_attr( $this->get_field_name( 'id' ) ); ?>
and this is the result
widget-content-loader-__i__-id
Why is that happen?
Notes:
First Inputs and other elements have ids and other attributes from that variables when I check in the DOM
<input class="widefat" name="widget-content-loader[21][title]" id="widget-content-loader-21-title" value="New title" type="text">
From this this script:
<input
class="widefat"
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
type="text"
id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
value="<?php echo esc_attr( $title ); ?>">
Thanks in advance
Javascript cant get value unless it is loaded into DOM,
Make sure that the elements are loaded before calling definevalue()
I Developing one project and I stuck in small thing which is very small for PHP Expert :D Which i'm not
I'm Trying to make Dropdown list of Custom taxonomies which work on select go to that Custom taxonomies page.
But After lot of search I found Solution But not doing action to go to the selected Custom taxonomies
First I found
<?php wp_dropdown_categories( 'taxonomy=my_custom_taxonomy' ); ?>
Second I found
function fjarrett_custom_taxonomy_dropdown( $taxonomy ) {
$terms = get_terms( $taxonomy );
if ( $terms ) {
printf( '<select name="%s" class="postform">', esc_attr( $taxonomy ) );
foreach ( $terms as $term ) {
printf( '<option value="%s">%s</option>', esc_attr( $term->slug ), esc_html( $term->name ) );
}
print( '</select>' );
}
}
Which I can use when I insert in any page code billow
<?php fjarrett_custom_taxonomy_dropdown( 'my_custom_taxonomy' ); ?>
Credit
https://frankiejarrett.com/2011/09/create-a-dropdown-of-custom-taxonomies-in-wordpress-the-easy-way/
BUT I DON'T KNOW NOW HOW I GONNA MAKE IT WORKING
Hope you can help me to find solution that from above any one solution can I able to make select and go thing.
Thanks in advance
POSSIBLE ANSWER - 1
I Found Possible Answer
<form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<?php
$args = array(
'show_option_none' => __( 'Select category' ),
'show_count' => 1,
'orderby' => 'name',
'name' => 'cat',
'echo' => 0,
'taxonomy' => 'MyCustomTaxonomys',
'value_field' => 'slug'
);
?>
<?php $select = wp_dropdown_categories( $args ); ?>
<?php $replace = "<select$1 onchange='return this.form.submit()'>"; ?>
<?php $select = preg_replace( '#<select([^>]*)>#', $replace, $select ); ?>
<?php echo $select; ?>
<noscript>
<input type="submit" value="View" />
</noscript>
</form>
It Give me URL
www.website.com/?cat=xxx where xxx is my custom taxonomy
But I Want URL
www.website.com/cat/xxx where xxx is my custom taxonomy
Is it possible?
You
could use something like this :
<?php
function fjarrett_custom_taxonomy_dropdown( $taxonomy ) {
$terms = get_terms( $taxonomy );
if ( $terms ) {
printf( '<select name="%s" class="postform">', esc_attr( $taxonomy ) );
foreach ( $terms as $term ) {
printf( '<option value="%s" data-location="%s">%s</option>', esc_attr( $term->slug ), get_term_link(term_id), esc_html( $term->name ) );
}
print( '</select>' );
}
}
?>
Then use your javascript code to redirect depending on the value of the attribute data-location
I did it this way like you say with PHP with wordpres:
<?php function click_taxonomy_dropdown($taxonomy, $title) { ?>
<select name="<?php echo $taxonomy;?>" id="<?php echo $taxonomy;?>">
<option value="-1"><?php echo $title;?></option>
<?php
$terms = get_terms($taxonomy);
foreach ($terms as $term) {
$link = get_term_link( $term, $taxonomy );
if($term->parent == 0){
printf( '<option class="level-1" value="'.$link.'">%s</option>', $term->name );
}
}
echo '</select>';
?>
<?php } ?>
And then with JS:
var dropdown1=document.getElementById("yourtaxonomy");
function onCatChange1(){
if(dropdown1.options[dropdown1.selectedIndex].value>"")
location.href=dropdown1.options[dropdown1.selectedIndex].value
}
The JS just get the ID of your select and then go to value when options are selected
AT End I Found One Alternate Working Solution Writing here so it will help someone needful
<?php
$categories = get_categories('taxonomy=xxxx');
$select = "<select name='' id='cat' class='postform'>n";
$select.= "<option value='-1'>Select category</option>n";
foreach($categories as $category){
if($category->count > 0){
$select.= "<option value='".$category->slug."'>".$category->name."
</option>";
}
}
$select.= "</select>";
echo $select;
?>
<script type="text/javascript">
<!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if (dropdown.options[dropdown.selectedIndex].value != -1) {
location.href = "<?php echo home_url();?>/yyyy/" + dropdown.options[dropdown.selectedIndex].value + "/";
}
}
dropdown.onchange = onCatChange;
-->
</script>
JUST SET Proper XXXX and YYYY Value and solve.
Credit: John B. Hartley
http://www.johnbhartley.com/2012/custom-taxonomy-category-dropdown/
Again Thank you all for your efforts
what I'm trying to accomplish is to have image thumbnails replace the dropdown box in a woocommerce variation product page. The way I went to trying to get that to work is when a user clicks on an variation product image, the (will be hidden) dropdown box will change to the correct value just as if the user had interacted with the dropdown box itself. the file I'm working with is variable.php.
Here is a snippet of the code. All my custom codes start with the option tag loop just before the closing Select tag.
$loop = 0; foreach ( $attributes as $name => $options ) : $loop++; $countimg = 0;?>
<select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>" >
<option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>…</option>
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
} elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
$selected_value = $selected_attributes[ sanitize_title( $name ) ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $name ) ) {
$orderby = wc_attribute_orderby( $name );
switch ( $orderby ) {
case 'name' :
$args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
break;
case 'id' :
$args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
break;
case 'menu_order' :
$args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
break;
}
$terms = get_terms( $name, $args );
$count = 1;
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) )
continue;
echo '<option id="' . $count . '" value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
$count++;}
} else {
foreach ( $options as $option ) {
echo '<option id="' . $count . '" value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
$count++;}
}
}
?>
</select>
<div>
<?php foreach ( $available_variations as $available_variation ) {
$countimg++;
$image_links = $available_variation['image_link'];
echo '<img id="' . $countimg . '" src="' . $image_links . '" onclick="selectVariationOption(this.id)" style="height:65px; margin-bottom:5px;">';
}?>
</div>
<script>
function selectVariationOption(clicked_id) {
document.getElementById("<?php echo esc_attr( sanitize_title( $name ) ); ?>").selectedIndex = clicked_id;
}
</script>
<?php
if ( sizeof($attributes) == $loop )
echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
?>
<?php endforeach;?>
</div>
</div>
What I did here was I added a numerical ID to the option tags and increases with each additional option available. I then showed the available image variations and added a numerical ID that looped to match the corresponding option ID. Finally, I used a simple javascript that when an image is clicked, the dropdown box changes to the correct selectedIndex. The problem is, the page doesn't react to the changes as if the dropdown box was directly interacted with. In short, nothing happens but the dropdown box changing visual value. I want it so that clicking on the image would be the exact same as clicking on an option in the dropdown box.
Let me know if you need more clarification or information. Thanks in advance!
Using the Variation Swatches and Photos plugin worked. Just had to go in and edit the plugin's variable.php to show all the information that was missing from my original variable.php file. Now I just have to spend a couple hours editing each product.