Currently, the store is made to display products in certain tabs. This is the code I have in loop-start.php
<?php
/**
* Product Loop Start
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<section class="deals-wrapper product-list">
<div class="container">
<ul class="nav nav-tabs row justify-content-between" id="dealsTab" role="tablist">
<?php
$i = 0;
$categories = get_terms( array(
'taxonomy' => 'product_cat'
) );
foreach ( $categories as $key => $category ) {
$catname = $category->name;
$metaterms = get_term_meta($category->term_id);
$thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
//$terms = get_the_terms( $category->ID, 'product_cat' )
$display_category_on_shop_page = get_field('display_category_on_shop_page',$category);
if($display_category_on_shop_page == "Yes"){
?>
<li class="nav-item col-lg-2 col" role="presentation">
<a class="nav-link <?php if($i == 0){ $i++; ?> active <?php } ?>" id="<?php echo $category->slug ?>-tab" data-toggle="tab" href="#<?php echo $category->slug ?>" role="tab" aria-controls="<?php echo $category->slug ?>" aria-selected="true">
<img src="<?php echo $image; ?>" alt="apple" />
<span><?php echo $catname; ?></span>
</a>
</li>
<?php } } wp_reset_postdata(); ?>
</ul>
<div class="tab-content" id="dealsTabContent">
<?php
$i = 0;
foreach($categories as $key => $category) {
?>
<div class="tab-pane fade <?php if($i == 0){ $i++; ?> show active <?php } ?>" id="<?php echo $category->slug ?>" role="tabpanel" aria-labelledby="<?php echo $category->slug ?>-tab">
<div class="deal-tiles" id="accordionExample<?php echo $category->slug ?>">
<?php
$c = 1;
$count = 1;
$args = array(
'post_type' => 'product',
'posts_per_page' => 20,
'product_cat' => $category->slug,
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_key' => '_price',
'post_status' => 'publish'
);
$loop = new WP_Query( $args );
if( $loop->have_posts()) :
while ( $loop->have_posts()) :
$loop->the_post();
$p_id = wc_get_product()->get_id();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
$currency = get_woocommerce_currency_symbol();
$name = get_the_title();
$link = get_the_permalink();
$product = wc_get_product(get_the_ID());
$thePrice = $product->get_price();
?>
<div class="deal-wrapper">
<div class="deal-tile">
<div class="text-center deal-head">
<h5>
<?php echo get_the_title(); ?>
</h5>
</div>
<div class="deal-body">
<div class="deal-img row">
<div class="deal-phone-img">
<a href="<?php echo $link; ?>" class="product-items">
<img src="<?php echo $image[0]; ?>" class="img-fluid" alt="phone" />
</a>
</div>
<div class="deal-phone-details">
<div class="deal-part1">
<h3>
<?php echo get_field('phone_detail_gb_data',$p_id); ?>
</h3>
<?php
while(have_rows('phone_detail_unlimited_data',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<p>
<?php echo $text; ?>
</p>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="deal-part2 d-flex justify-content-between">
<div class="deal-part2-details">
<?php
if($product->get_type() == "simple"){
?>
<h5>
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $product->regular_price; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $product->sale_price; ?>pm</h5>
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}else{
$product_variations = $product->get_available_variations();
$variation_product_id = $product_variations [0]['variation_id'];
$variation_product = new WC_Product_Variation( $variation_product_id );
$variation_min_price = $product->get_variation_price();
$price_regular_min = $product->get_variation_regular_price();
$price_sale_min = $product->get_variation_sale_price();
?>
<h5 class="network-price">
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $price_regular_min; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $price_sale_min; ?>pm</h5>
<!-- <?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?> -->
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}
?>
</div>
<div class="deal-part2-img">
<img src="<?php echo get_field('ee_image',$p_id)[" url "]; ?>" alt="">
</div>
</div>
</div>
</div>
<div class="deal-footer">
<div class="row deal-img justify-content-around">
<a href="<?php echo $link; ?>" class="buy-now">buy now</a>
<a href="<?php echo $link; ?>#detail-section-2" data-Id="detail-section-2" class="buy-now view-detail">view detail</a>
<!-- <div id="heading<?php echo $count; ?>">
<h5 class="mb-0 lern-more-btn collapsed" data-toggle="collapse" data-target="#collapse<?php echo $count; ?>" aria-expanded="false" aria-controls="collapse<?php echo $count; ?>">
<span><?php echo get_field('learn_more_text',$p_id); ?></span>
<span><?php echo get_field('minimise_text',$p_id); ?></span>
</h5>
</div> -->
</div>
<div id="collapse<?php echo $count; ?>" class="collapse multi-collapse deal-desc">
<ul class="card-body">
<?php
while(have_rows('product_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<p>
<?php echo $text; ?>
</p>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
<div class="features-wrapper">
<?php $product_other_detail = get_field('product_other_detail',$p_id); ?>
<span class="features-ttl"><?php echo $product_other_detail["heading"]; ?></span>
<ul class="features-desc">
<?php
while(have_rows('product_other_detail',$p_id)) : the_row();
while(have_rows('other_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<?php echo $text; ?>
</li>
<?php endwhile; endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
</div>
<div class="compare-btn">
<input type="checkbox" id="compare<?php echo $count; ?>" class="chkbox" data-name="<?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" data-price="<?php echo $currency; echo $thePrice; ?>pm" data-image="<?php echo $image[0]; ?>" />
<label class="mb-0 ml-1" for="compare<?php echo $count; ?>">Compare</label>
</div>
</div>
</div>
</div>
<?php $count++; endwhile; endif; ?>
</div>
</div>
<?php } wp_reset_postdata(); ?>
</div>Each time the store is opened from the link, the first tab is active and the content of the first product category is displayed. My goal is to rework the code so that I can activate each category (tab) with a direct link. I want to use the direct link to this category to activate the tab for the respective category and show the products. At the moment I have to click on the tab to get this effect, otherwise the first tab is always active. I ask for your help. Тhanks.