how to get products on category hover wordpress
Friday, November 27, 2015
After hours of unsuccessful surfing, I create this to get products on hover.
First of all, create a page template and call it in page. If you want to know how to create, check here.
<script type="text/javascript">
$(document).ready(function(){
$('.bsamn').hide(); // .bsamn is the class in which the products will show up.
$('.cat-item a').mouseenter(function(){ // the class of category items
$('.bsamn').fadeIn('slow');
var url = '<?php echo site_url(); ?>/ajax'; // something like https://www.hussainbilal.com/ajax
var link = $(this).attr('href');
$.ajax({
type: "POST",
url: url,
data: {'link': link, 'status':'cat_link' },
success: function(msg){
$('.bsamn').html(msg);
console.log(msg);}
});
});
$('.cat-item a').mouseleave(function(){ $('.bsamn').fadeOut(5000);
});
});
</script>
First of all, create a page template and call it in page. If you want to know how to create, check here.
Now, just open your js or header file & paste this.
<script type="text/javascript">
$(document).ready(function(){
$('.bsamn').hide(); // .bsamn is the class in which the products will show up.
$('.cat-item a').mouseenter(function(){ // the class of category items
$('.bsamn').fadeIn('slow');
var url = '<?php echo site_url(); ?>/ajax'; // something like https://www.hussainbilal.com/ajax
var link = $(this).attr('href');
$.ajax({
type: "POST",
url: url,
data: {'link': link, 'status':'cat_link' },
success: function(msg){
$('.bsamn').html(msg);
console.log(msg);}
});
});
$('.cat-item a').mouseleave(function(){ $('.bsamn').fadeOut(5000);
});
});
</script>
Now open your template page and paste:
<?php
/*
Template Name: ajax
*/
$permlnk = $_POST['link'];
$prm2 = explode("=", $permlnk);
$html = '';
$args = array(
'posts_per_page' => -1,
'product_cat' => $prm2[1],
'post_type' => 'product',
'orderby' => 'title',
);
$the_query = new WP_Query( $args );
$html .= "<div class='product'>";
// The Loop
while ( $the_query->have_posts() ) {
$the_query->the_post();
$html .= "<li><a href='".get_permalink()."'>".get_the_title()."</a></li>";
}
$html .= "</div>";
echo $html;
Now open file : 'class-wc-widget-product-categories.php'. You will find it here: /wp-content/plugins/woocommerce/includes/widgets
there, add a line as screenshot:
echo '<div class="cat-item cat-item-6 bsamn"></div>';
Save & run it.
You're done. Thanks for being there. Drop a comment or mail me, if you find any error.
0 comments