File: /var/www/html/CW-techs/wp-content/themes/cw-techs/woocommerce/archive-product.php
<?php
defined( 'ABSPATH' ) || exit;
get_header(); // Loads header.php
?>
<div class="common-outer">
<section class="product-listing-sec px-common px-5">
<div class="product-listing-left-block">
<div class="filter-cover">
<div class="filter-title">
<span class="title-label">
Filters
</span>
<div class="btn-block">
<button class="mob-filter-toggle-btn">
<img src="<?php echo get_template_directory_uri(); ?>/img/filter-mob.svg" alt="">
</button>
</div>
</div>
<div class="filter-inner-cover">
<div class="filter-title filter-title-mob">
<span class="title-label">Filters</span>
<div class="btn-block">
<button class="filter-close-btn">
<img src="<?php echo get_template_directory_uri(); ?>/img/filter-close.svg" alt="Close">
</button>
</div>
</div>
<!-- Categories -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle1">
Categories
</button>
<div class="collapse filter-collapse" id="filterToggle1">
<div class="collapse-body">
<?php
$terms = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => 0
]);
foreach ($terms as $term) :
?>
<div class="form-check filter-custom-check">
<input type="checkbox" class="form-check-input" name="category[]" id="cat-<?php echo esc_attr($term->term_id); ?>" value="<?php echo esc_attr($term->slug); ?>">
<label class="form-check-label" for="cat-<?php echo esc_attr($term->term_id); ?>">
<?php echo esc_html($term->name); ?>
</label>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Price Range -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle2">
Price
</button>
<div class="collapse filter-collapse" id="filterToggle2">
<div class="collapse-body">
<div class="price-range-block">
<div class="range-inp-wrapper">
<div class="range-inp-block">
<label>From</label>
<input type="number" id="min_price" class="range-inp" min="0" max="9999" value="0" oninput="validity.valid||(value='0');"
class="price-range-field" />
</div>
<div class="devider-block"></div>
<div class="range-inp-block text-end">
<label>To</label>
<input type="number" id="max_price" class="range-inp" min="0" max="1000000" value="1000000" oninput="validity.valid||(value='1000000');"
class="price-range-field" />
</div>
</div>
<div class="range-block">
<div id="slider-range" class="price-filter-range" name="rangeInput"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Brand -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle3">
Brand
</button>
<div class="collapse filter-collapse" id="filterToggle3">
<div class="collapse-body">
<?php
$terms = get_terms(['taxonomy' => 'product_brand', 'hide_empty' => true]);
foreach ($terms as $term) :
?>
<div class="form-check filter-custom-check">
<input class="form-check-input" type="checkbox" name="brand[]" value="<?php echo esc_attr($term->slug); ?>" id="brand-<?php echo esc_attr($term->term_id); ?>">
<label class="form-check-label" for="brand-<?php echo esc_attr($term->term_id); ?>">
<?php echo esc_html($term->name); ?>
</label>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Discount -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle4">
Discount
</button>
<div class="collapse filter-collapse" id="filterToggle4">
<div class="collapse-body">
<?php
$discounts = get_available_discount_brackets();
foreach ($discounts as $value) :
?>
<div class="form-check filter-custom-check">
<input type="checkbox" class="form-check-input" name="discount[]" value="<?php echo $value; ?>" id="discount-<?php echo $value; ?>">
<label class="form-check-label" for="discount-<?php echo $value; ?>">
<?php echo $value; ?>% or more
</label>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Availability -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle5">
Availability
</button>
<div class="collapse filter-collapse" id="filterToggle5">
<div class="collapse-body">
<div class="form-check filter-custom-check">
<input type="checkbox" name="availability[]" value="instock" class="form-check-input" id="available-1">
<label class="form-check-label" for="available-1">Available</label>
</div>
</div>
</div>
</div>
<!-- Customer Ratings -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle6">
Customer Ratings
</button>
<div class="collapse filter-collapse" id="filterToggle6">
<div class="collapse-body">
<div class="form-check filter-custom-check">
<input type="checkbox" name="rating[]" value="4" class="form-check-input" id="rating-4">
<label class="form-check-label" for="rating-4">4★ & above</label>
</div>
<div class="form-check filter-custom-check">
<input type="checkbox" name="rating[]" value="3" class="form-check-input" id="rating-3">
<label class="form-check-label" for="rating-3">3★ & above</label>
</div>
</div>
</div>
</div>
<!-- Stock Status -->
<div class="filter-card">
<button class="filter-toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#filterToggle7">
Stock Status
</button>
<div class="collapse filter-collapse" id="filterToggle7">
<div class="collapse-body">
<div class="form-check filter-custom-check">
<input type="checkbox" name="stock[]" value="instock" class="form-check-input" id="stock-1">
<label class="form-check-label" for="stock-1">In Stock</label>
</div>
<div class="form-check filter-custom-check">
<input type="checkbox" name="stock[]" value="outofstock" class="form-check-input" id="stock-2">
<label class="form-check-label" for="stock-2">Out of Stock</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-listing-right-block">
<div class="listing-products">
<?php
$user_id = get_current_user_id();
$favorites = get_user_meta($user_id, 'favorite_products', true);
if (!is_array($favorites)) {
$favorites = [];
}
if ( have_posts() ) :
while ( have_posts() ) : the_post(); global $product;
// Check if product is in favorites
$is_favorite = in_array(get_the_ID(), $favorites);
$img_src = $is_favorite
? get_template_directory_uri() . '/img/fav-list-selected.svg'
: get_template_directory_uri() . '/img/fav-list-plain.svg';
$fav_img = '<img src="' . $img_src . '" alt="">';?>
<div class="product-col">
<a class="listing-blks" href="<?php the_permalink(); ?>">
<div class="products-wrp">
<?php if ( $product->is_on_sale() ) : ?>
<div class="off-label">
<span class="icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/discount-icon.svg" alt="discount">
</span>
<span class="txt">
<?php echo round(100 - ($product->get_sale_price() / $product->get_regular_price()) * 100); ?>% OFF
</span>
</div>
<?php endif; ?>
<div class="fav-list fav-btn" data-product="<?php echo esc_attr(get_the_ID()); ?>">
<?=$fav_img?>
</div>
<div class="prod-img">
<?php echo woocommerce_get_product_thumbnail(); ?>
</div>
</div>
<div class="product-desc">
<div class="prod-title"><?php the_title(); ?></div>
<div class="price-blk">
<span class="price"><?php echo $product->get_price_html(); ?></span>
</div>
<div class="bottom-blk">
<div class="save-tag">
<?php
$sale_price = (float) $product->get_sale_price();
$regular_price = (float) $product->get_regular_price();
if ($regular_price > 0 && $sale_price > 0) {
$discount = round(100 - ($sale_price / $regular_price) * 100);
echo 'Save - ' . $discount . '%';
}
?>
</div>
<div class="rating-wrp">
<div class="rating">
<?php
$rating = round( $product->get_average_rating() ); // 0 to 5
$star_img = get_template_directory_uri() . '/img/rating-star.svg';
$empty_star_img = get_template_directory_uri() . '/img/rating-star.svg'; // same image, but faded via CSS
for ($i = 1; $i <= 5; $i++) {
$is_active = $i <= $rating ? 'active' : '';
echo '<button class="rating-btn ' . $is_active . '">
<img src="' . esc_url($star_img) . '" alt="star">
</button>';
}
?>
</div>
</div>
</div>
</div>
</a>
</div>
<?php endwhile;
else : ?>
<section class="no-data">
<div class="no-data-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/no-data-img.svg" alt="no-data"></div>
<p class="no-msg"> No products found.</p>
</section>
<?php endif;?>
</div>
</div>
</section>
<?php include get_template_directory() . '/templates/above-footer.php'; ?>
</div>
<?php
get_footer(); // Loads footer.php
?>