Woocommerce Product categories as tabs - php

Question

I have writtern a function which shows my woocommerce product categories as tabs and related products as tab content.
`<?php
$product = wc_get_product( $post->ID );
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' );
}
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
) );
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
echo '<li class="tab">' . $category->name . '</li>';
}
echo '</ul>';
foreach ( $categories as $category ) {
$args = array(
'post_type' => 'product',
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category->slug,
),
),
);
$query = new WP_Query( $args );
echo '<div id="' . $category->slug . '" class="tab-content car">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-cont">';
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?> <br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div><?php
echo '</div>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
?>
<script>document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll(".tabs li");
var tabContents = document.querySelectorAll(".tab-content");
tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
tabContents.forEach(function(content) {
content.style.display = "none";
});
document.querySelector(tabId).style.display = "flex";
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});
});</script>
`
but when we load the page all the tabs are closed, but i want to add a tab which shows all the product and is active by default when page is load.
is there any way to achive this? and if you want to change the whole fuction with a better function than it is also welcomed
Edit:
<?php
$product = wc_get_product( $post->ID );
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' );
}
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => false,
) );
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
echo '<li class="tab active">All</li>';
foreach ( $categories as $category ) {
echo '<li class="tab">' . $category->name . '</li>';
}
echo '</ul>';
echo '<div id="all" class="tab-content car">';?>
// Query and display all products here
<h1>Prodcuts</h1>
<div class="post-intro">Kuch Saste mai dikahu madam? <img src="https://images.all-free-download.com/images/graphicwebp/road_tested_208353.webp" alt=""></div>
<?php
// Set the number of posts to fetch and the offset (i.e. how many posts to skip)
$num_posts = 3;
$offset = 0;
$product = wc_get_product( $post->ID );
$price = get_post_meta( get_the_ID(), '_regular_price', true);
// $price will return regular price
$sale = get_post_meta( get_the_ID(), '_sale_price', true);
// $sale will return sale price
// Create a new instance of the WP_Query class
$posts = new WP_Query( array(
'post_type' => 'product', // Fetch only posts (not pages or other post types)
'posts_per_page' => $num_posts, // Set the number of posts to fetch
'offset' => $offset // Set the offset (how many posts to skip)
) );
// Check if the query has posts
if ( $posts->have_posts() ) {
// Loop through the posts and output their data
while ( $posts->have_posts() ) {
$posts->the_post(); ?>
<div class="post-cont">
<?php if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?><br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div>
</div>
<?php
}
} else {
}
// Reset the post data after the query
wp_reset_postdata();
?>
</div>
<?php echo '</div>';
foreach ( $categories as $category ) {
$args = array(
'post_type' => 'product',
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category->slug,
),
),
);
$query = new WP_Query( $args );
echo '<div id="' . $category->slug . '" class="tab-content car">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="post-cont">';
if ( has_post_thumbnail( $product->id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
<?php } ?> <br>
<div class="post-details">
<div class="post-title">
<?php the_title(); ?>
</div>
<div class="shop-button-cont">
<div class="shop-button"><?php echo 'Shop Now'; ?></div>
<div class="sale-prise">
<?php echo $price = get_post_meta( get_the_ID(), '_sale_price', true);?>
</div>
<div class="reg-prise">
<?php echo $sale = get_post_meta( get_the_ID(), '_regular_price', true); ?>
</div>
</div>
</div><?php
echo '</div>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll(".tabs li");
var tabContents = document.querySelectorAll(".tab-content");
tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
var tabId = this.querySelector("a").getAttribute("href");
if (tabId === "#all") {
tabContents.forEach(function(content) {
content.style.display = "none";
});
} else {
tabContents.forEach(function(content) {
content.style.display = "none";
});
document.querySelector(tabId).style.display = "flex";
}
tabs.forEach(function(tab) {
tab.classList.remove("active");
});
this.classList.add("active");
});
});
});
</script>

Answer 1

You can add 'active' class in the PHP on one of the li tags.
echo '<div class="tabs-container">';
echo '<ul class="tabs">';
foreach ( $categories as $category ) {
$active_class = ( $category->slug === 'first-category' ) ? 'active' : '';
echo '<li class="tab ' . $active_class . '">' . $category->name . '</li>';
}
echo '</ul>';
Or you can use javascript to add the active class after the page is loaded.
// Get the list of tabs
var tabsList = document.querySelector('.tabs');
// Get the first tab
var firstTab = tabsList.firstElementChild;
// Add the "active" class to the first tab
firstTab.classList.add('active');