Filter products With tags in Woo-Commerce in Wordpress.
function product_filter_by_tag(){
ob_start();
?>
<style>
.tag_swatch_button {
transition: all .2s ease-in-out;
-webkit-appearance: none;
border-radius: 0;
font-family: inherit;
appearance: none;
background: none;
font-weight: 500;
font-size: 18px;
cursor: pointer;
padding: 12px 15px;
outline: none;
opacity: 1;
border: none;
color: #000;
}
.tag_swatch_button:hover,
.tag_swatch_button.active {
background-color: #000;
color: #fff;
}
.tag_swatch_item {
border-radius: 4px;
height: auto;
width: 30.33%;
float: left;
margin: 0 1.5% 30px 1.5%;
text-align: center;
font-size: 20px;
line-height: initial;
font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
text-transform: capitalize;
}
.tag_swatch_hide {
display: none;
}
</style>
<script>
function tag_checkClass() {
if ( $('.tag_swatch_item').hasClass('tag_swatch_hide') ) {
$('.tag_swatch_item').removeClass('tag_swatch_hide');
}
}
// Check active classes
jQuery(document).ready(function($){
// Category filters
/* $('.tag_all').click( function() {
tag_checkClass();
}); */
// Active tag
$('.tag_swatch_button').click(function(){
$('.tag_swatch_button').removeClass('active');
$(this).addClass('active');
})
$('.tag_swatch_button.tag_all').click( function() {
tag_checkClass();
// alert('hello');
$('.tag_swatch_item:not(.tag_all)').toggleClass('tag_swatch_hide');
});
});
</script>
<?php
$tags = get_terms( 'product_tag' );
/* $term_array = array();
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
$term_array[] = $term->name;
}
}
echo '<pre>';
print_R($terms);
echo '</pre>';
die();
$page_id = get_the_ID();
$cats = get_field('categories',$page_id); */
?>
<section class="filter_swatch">
<div class="container">
<div class="buttons">
<button class="tag_swatch_button tag_all active">All</button>
<?php
if(!empty($tags)){
foreach($tags as $tag) {
?>
<script>
jQuery(document).ready(function($){
$('.tag_swatch_button.tag-<?php echo $tag->term_id; ?>').click( function() {
tag_checkClass();
// alert('hello');
$('.tag_swatch_item:not(.tag-<?php echo $tag->term_id; ?>)').toggleClass('tag_swatch_hide');
});
});
</script>
<button class="tag_swatch_button tag-<?php echo $tag->term_id; ?>"><?php echo $tag->name; ?></button>
<?php
}
}
?>
</div>
<div class="swatch_grid">
<?php
if(!empty($tags)){
foreach($tags as $tag) {
$cat_id = $tag->term_id;
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'product_tag',
'field' => 'id',
'terms' => $cat_id,
),
)
);
$firstloop = new WP_Query($args);
$loop = new WP_Query($args);
?>
<?php
$product_id_array[] = array();
while ( $firstloop->have_posts() ) {
$firstloop->the_post();
$product_id = get_the_ID();
if (!in_array($product_id,$product_id_array)) {
?>
<a href="<?php the_permalink(); ?>" class="tag_swatch_item tag_all project_bx">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
<?php //the_content(); ?>
</a>
<?php
$product_id_array[] = $product_id;
}
}
?>
<?php
while ( $loop->have_posts() ) {
$loop->the_post();
?>
<a href="<?php the_permalink(); ?>" class="tag_swatch_item tag-<?php echo $tag->term_id; ?> project_bx tag_swatch_hide">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
<?php //the_content(); ?>
</a>
<?php
}
?>
<?php
}
}
/* echo '<pre>';
print_r($product_id_array);
echo '</pre>'; */
?>
</div>
</div>
</section>
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
add_shortcode('product_filter_tag', 'product_filter_by_tag');
Comments
Post a Comment