I have this code that outputs products from my category which I have taken from this answer
I have created a dropdown navigation, how can I display the products for each category once I hover over the category link using the php code to query my 8 products.
HTML for Dropdown
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Computers</a>
<a href="#">Televisions</a>
<a href="#">Phones</a>
</div>
</div>
</body>
</html>
Example PHP output for category: computers
<?php
// Here set your product category SLUG (can be multiple coma separated)
$product_categories = array('computers');
$wc_query = new WP_Query( array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => 5,
'tax_query' => array( array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $product_categories,
'operator' => 'IN',
) )
) );
?>
<ul>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<li>
<h3>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<li>
<?php _e( 'No Products' ); ?>
</li>
<?php endif; ?>
</ul>