gitmodir110/motayeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): enhance WooCommerce templates and add new pages

Browse Source 
Refactor WooCommerce product loop templates to support AJAX quick add-to-cart, wishlist functionality, and improved visual badges. Added new static pages for About and Contact.

- Refactor `content-product.php` to include quick actions and discount badges
- Update `archive-product.php` and `front-page.php` for improved product display
- Add `motayeb_get_rating_html` helper function in `functions.php`
- Add `page-about.php` and `page-contact.php`
- Fix product card width issues in `header.php`
- Implement dynamic banner option in `front-page.php`
This commit is contained in:
Kazem Alghasi 2026-09-20 14:04:10 +03:30
parent c06ab0b8a2
commit 8d1403d972
8 changed files with 270 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
archive-product.php
View File

@ -113,62 +113,9 @@ get_header();
<?php if ( woocommerce_product_loop() ) : ?>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<?php while ( have_posts() ) : the_post(); ?>
<?php
global $product;
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/400/400.jpg';
$rating = $product->get_average_rating();
$review_count = $product->get_rating_count();
$price = $product->get_price();
$regular_price = $product->get_regular_price();
$is_on_sale = $product->is_on_sale();
$badge = '';
if ( $is_on_sale && $regular_price ) {
$discount = round( ( 1 - ( $price / $regular_price ) ) * 100 );
$badge = '<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">' . $discount . '%</span>';
}
?>
<div class="product-card group bg-white dark:bg-dark-card rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="product-img w-full h-48 md:h-56 object-cover">
</a>
<div class="absolute top-3 right-3 flex flex-col gap-1.5">
<?php if ( $product->is_featured() ) : ?>
<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">ارگانیک</span>
<?php endif; ?>
<?php echo wp_kses_post( $badge ); ?>
</div>
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
<button onclick="quickAddToCart(<?php echo esc_js( $product->get_id() ); ?>)" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
</button>
<button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<div class="p-4">
<div class="flex items-center gap-1 mb-2">
<span class="text-honey-400 text-xs">★</span>
<span class="text-xs font-medium"><?php echo esc_html( $rating ? number_format( $rating, 1 ) : '۰' ); ?></span>
<span class="text-xs text-cream-400 dark:text-dark-muted">(<?php echo esc_html( $review_count ); ?>)</span>
</div>
<h3 class="font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="flex items-end gap-2">
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo wp_kses_post( wc_price( $price ) ); ?></span>
<?php if ( $is_on_sale ) : ?>
<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5"><?php echo wp_kses_post( wc_price( $regular_price ) ); ?></span>
<?php endif; ?>
</div>
</div>
</div>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; ?>
</div>
<!-- Pagination -->
<div class="mt-10">
<?php woocommerce_pagination(); ?>
</div>

3
footer.php
View File

@ -105,8 +105,7 @@
<span class="text-[10px] font-medium">سبد خرید</span>
<span id="mobile-cart-count" class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center hidden">0</span>
</button>
<button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
<iconify-icon icon="lucide:user" width="22"></iconify-icon>
<button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted"> <iconify-icon icon="lucide:user" width="22"></iconify-icon>
<span class="text-[10px] font-medium">حساب من</span>
</button>
</div>

63
front-page.php
View File

@ -57,7 +57,7 @@ get_header();
<!-- Hero Image -->
<div class="relative animate-fade-in">
<div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
<img src="https://picsum.photos/seed/organic-honey-jar/700/600.jpg" alt="محصولات ارگانیک مطیب" class="w-full h-[350px] md:h-[500px] object-cover">
<img src="<?php echo esc_url( get_option( 'motayeb_shop_banner', 'https://picsum.photos/seed/organic-honey-jar/700/600.jpg' ) ); ?>" alt="محصولات ارگانیک مطیب" class="w-full h-[350px] md:h-[500px] object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
</div>
<!-- Floating Card 1 -->
@ -157,6 +157,7 @@ get_header();
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
<?php
$bestsellers = new WP_Query( array(
@ -175,66 +176,12 @@ get_header();
) );
if ( $bestsellers->have_posts() ) :
while ( $bestsellers->have_posts() ) :
$bestsellers->the_post();
$product = wc_get_product( get_the_ID() );
if ( ! $product ) {
continue;
}
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/400/400.jpg';
$rating = $product->get_average_rating();
$review_count = $product->get_rating_count();
$price = $product->get_price();
$regular_price = $product->get_regular_price();
$is_on_sale = $product->is_on_sale();
$badge = '';
if ( $is_on_sale && $regular_price ) {
$discount = round( ( 1 - ( $price / $regular_price ) ) * 100 );
$badge = '<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">' . $discount . '%</span>';
}
?>
<div class="product-card group bg-white dark:bg-dark-card rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all relative">
<a href="<?php the_permalink(); ?>" class="block">
<div class="relative overflow-hidden">
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" class="product-img w-full h-48 md:h-56 object-cover">
<div class="absolute top-3 right-3 flex flex-col gap-1.5">
<?php if ( $product->is_featured() ) : ?>
<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">ارگانیک</span>
<?php endif; ?>
<?php echo wp_kses_post( $badge ); ?>
</div>
</div>
<div class="p-4">
<div class="flex items-center gap-1 mb-2">
<span class="text-honey-400 text-xs">★</span>
<span class="text-xs font-medium"><?php echo esc_html( $rating ? number_format( $rating, 1 ) : '۰' ); ?></span>
<span class="text-xs text-cream-400 dark:text-dark-muted">(<?php echo esc_html( $review_count ); ?>)</span>
</div>
<h3 class="font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php the_title(); ?></h3>
<div class="flex items-end gap-2">
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo wp_kses_post( wc_price( $price ) ); ?></span>
<?php if ( $is_on_sale ) : ?>
<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5"><?php echo wp_kses_post( wc_price( $regular_price ) ); ?></span>
<?php endif; ?>
</div>
</div>
</a>
<!-- Quick Actions -->
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
<button onclick="quickAddToCart(<?php echo esc_js( $product->get_id() ); ?>)" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
</button>
<button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
</div>
<?php
while ( $bestsellers->have_posts() ) : $bestsellers->the_post();
wc_get_template_part( 'content', 'product' );
endwhile;
wp_reset_postdata();
else :
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">' . esc_html__( 'هنوز محصولی وجود ندارد.', 'motayeb' ) . '</p>';
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">محصولی برای نمایش وجود ندارد.</p>';
endif;
?>
</div>

35
functions.php
View File

@ -449,3 +449,38 @@ function motayeb_settings_page_callback() {
// ۱۰. غیرفعال کردن استایل‌های پیش‌فرض ووکامرس
// ============================================================
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
// ============================================================
// ۹. نمایش ستاره‌های امتیاز (تابع کمکی برای صفحه محصول)
// ============================================================
function motayeb_get_rating_html( $rating, $count = 0 ) {
if ( $rating <= 0 ) {
return '<span class="text-xs text-cream-400 dark:text-dark-muted">بدون امتیاز</span>';
}
$full_stars = floor( $rating );
$half_star = ( $rating - $full_stars ) >= 0.5 ? 1 : 0;
$empty_stars = 5 - $full_stars - $half_star;
$html = '<span class="flex items-center gap-0.5 text-honey-400 text-sm">';
for ( $i = 0; $i < $full_stars; $i++ ) {
$html .= '★';
}
if ( $half_star ) {
$html .= '<span class="relative">★<span class="absolute inset-0 overflow-hidden" style="width:50%;color:#D4A574;">★</span></span>';
}
for ( $i = 0; $i < $empty_stars; $i++ ) {
$html .= '<span class="text-cream-300 dark:text-dark-muted">★</span>';
}
if ( $count > 0 ) {
$html .= ' <span class="text-xs text-cream-400 dark:text-dark-muted mr-1">(' . esc_html( $count ) . ')</span>';
}
$html .= '</span>';
return $html;
}

8
header.php
View File

@ -225,6 +225,14 @@
.woocommerce-checkout-review-order table.shop_table td {
border-color: #EBE3D5 !important;
}
/* ============================================================ */
/* رفع قطعی باریک شدن کارت‌ها در پرفروش‌ترین‌ها و لیست محصولات */
/* ============================================================ */
.product-card {
width: 100% !important;
min-width: 100% !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

95
page-about.php Normal file
View File

@ -0,0 +1,95 @@
<?php
/**
* قالب صفحه درباره ما (About)
*
* @package Motayeb
*/
get_header();
?>
<!-- ===== BRAND STORY SECTION ===== -->
<section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden leaf-pattern">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<!-- بخش تصویر (ثابت) -->
<div class="relative">
<div class="rounded-3xl overflow-hidden shadow-xl">
<img src="https://picsum.photos/seed/organic-farm-nature/600/500.jpg" alt="مزرعه ارگانیک" class="w-full h-[350px] md:h-[450px] object-cover">
</div>
<div class="absolute -bottom-6 -left-6 bg-white dark:bg-dark-card rounded-2xl p-5 shadow-xl max-w-[200px]">
<div class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">+۱۲</div>
<div class="text-sm text-earth-400 dark:text-dark-text font-medium">سال تجربه</div>
<div class="text-xs text-cream-500 dark:text-dark-muted mt-1">در تولید محصولات ارگانیک</div>
</div>
</div>
<!-- بخش محتوای متنی (دینامیک، قابل ویرایش با گوتنبرگ) -->
<div>
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
<div class="mt-2 mb-6">
<?php the_content(); ?>
</div>
<!-- بخش ویژگی‌ها (ثابت) -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:sprout" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">کشت ارگانیک</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">بدون سم و کود شیمیایی</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:shield-check" width="20" class="text-honey-400"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">تضمین اصالت</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">آزمایشگاهی و مستند</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:recycle" width="20" class="text-emerald-500"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">بسته‌بندی سبز</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">دوست‌دار محیط زیست</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
<iconify-icon icon="lucide:map-pin" width="20" class="text-blue-500"></iconify-icon>
</div>
<div>
<div class="font-bold text-sm mb-0.5">تأمین محلی</div>
<div class="text-xs text-cream-500 dark:text-dark-muted">حمایت از کشاورز ایرانی</div>
</div>
</div>
</div>
<!-- برچسب‌های گواهی (ثابت) -->
<div class="flex items-center gap-3 flex-wrap">
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>گواهی ارگانیک ایران</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>استاندارد ملی بهداشت</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
<span>نماد اعتماد الکترونیکی</span>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
get_footer();

67
page-contact.php Normal file
View File

@ -0,0 +1,67 @@
<?php
/**
* قالب صفحه تماس با ما (Contact)
*
* @package Motayeb
*/
get_header();
?>
<!-- ===== CONTACT SECTION ===== -->
<section class="py-16 md:py-24 bg-white dark:bg-dark-card">
<div class="max-w-7xl mx-auto px-4 md:px-6">
<div class="text-center mb-12">
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CONTACT</span>
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">تماس با ما</h2>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- اطلاعات تماس (ثابت) -->
<div>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<iconify-icon icon="lucide:map-pin" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
</div>
<div><div class="font-bold mb-1">آدرس</div><p class="text-sm text-cream-500 dark:text-dark-muted">تهران، خیابان ولیعصر، بالاتر از میدان ونک، پلاک ۱۲۳</p></div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<iconify-icon icon="lucide:phone" width="22" class="text-honey-400"></iconify-icon>
</div>
<div><div class="font-bold mb-1">تلفن</div><p class="text-sm text-cream-500 dark:text-dark-muted">۰۲۱-۱۲۳۴۵۶۷۸</p><p class="text-sm text-cream-500 dark:text-dark-muted">۰۹۱۲-۳۴۵-۶۷۸۹</p></div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<iconify-icon icon="lucide:mail" width="22" class="text-blue-500"></iconify-icon>
</div>
<div><div class="font-bold mb-1">ایمیل</div><p class="text-sm text-cream-500 dark:text-dark-muted font-inter" dir="ltr">info@motayeb.ir</p></div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<iconify-icon icon="lucide:clock" width="22" class="text-emerald-500"></iconify-icon>
</div>
<div><div class="font-bold mb-1">ساعت کاری</div><p class="text-sm text-cream-500 dark:text-dark-muted">شنبه تا پنج‌شنبه: ۹ صبح تا ۶ عصر</p></div>
</div>
</div>
<!-- شبکه‌های اجتماعی -->
<div class="flex gap-3 mt-8">
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:instagram" width="20"></iconify-icon></a>
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:send" width="20"></iconify-icon></a>
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:twitter" width="20"></iconify-icon></a>
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:youtube" width="20"></iconify-icon></a>
</div>
</div>
<!-- فرم تماس (دینامیک، قابل ویرایش با گوتنبرگ) -->
<div>
<?php the_content(); ?>
</div>
</div>
</div>
</section>
<?php
get_footer();

77
woocommerce/content-product.php
View File

@ -1,6 +1,8 @@
<?php
/**
* کارت محصول - سازگار با طرح مطیب
* کارت محصول - سفارشی مطابق با طراحی مطیب (با AJAX و علاقه‌مندی)
*
* @package Motayeb
*/
defined( 'ABSPATH' ) || exit;
@ -11,24 +13,60 @@ global $product;
if ( ! is_a( $product, WC_Product::class ) ) {
return;
}
// دریافت داده‌های ضروری
$product_id = $product->get_id();
$image_id = $product->get_image_id();
$img_src = wp_get_attachment_image_url( $image_id, 'medium' );
if ( ! $img_src ) {
$img_src = 'https://picsum.photos/seed/' . $product_id . '/400/400.jpg'; // عکس پیش‌فرض
}
$rating = $product->get_average_rating();
$review_count = $product->get_rating_count();
$is_on_sale = $product->is_on_sale();
$is_featured = $product->is_featured();
// محاسبه درصد تخفیف برای برچسب
$badge = '';
if ( $is_on_sale ) {
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
if ( $regular_price > 0 ) {
$discount = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
$badge = '<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">' . $discount . '%</span>';
}
}
?>
<div <?php wc_product_class( 'product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all', $product ); ?>>
<div <?php wc_product_class( 'product-card group bg-white dark:bg-dark-card rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all relative w-full', $product ); ?>>
<!-- لینک عکس -->
<!-- عکس و لینک محصول -->
<a href="<?php the_permalink(); ?>" class="block relative overflow-hidden">
<?php
// نمایش عکس محصول
woocommerce_show_product_loop_sale_flash();
?>
<img src="<?php echo wp_get_attachment_image_url( $product->get_image_id(), 'medium' ); ?>" alt="<?php echo esc_attr( $product->get_name() ); ?>" class="product-img w-full h-48 md:h-56 object-cover">
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php echo esc_attr( $product->get_name() ); ?>" class="product-img w-full h-48 md:h-56 object-cover">
<!-- دکمه افزودن به سبد (هاور در دسکتاپ - همیشه در موبایل طبق CSS قبلی) -->
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
<?php woocommerce_template_loop_add_to_cart(); ?>
<!-- برچسب‌های بالای عکس -->
<div class="absolute top-3 right-3 flex flex-col gap-1.5">
<?php if ( $is_featured ) : ?>
<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">ارگانیک</span>
<?php endif; ?>
<?php echo wp_kses_post( $badge ); ?>
</div>
</a>
<!-- دکمه‌های عملیات (هاور در دسکتاپ، همیشه در موبایل) -->
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2 z-10">
<!-- دکمه افزودن به سبد با AJAX -->
<button onclick="quickAddToCart(<?php echo esc_js( $product_id ); ?>)" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon>
<span>افزودن</span>
</button>
<!-- دکمه علاقه‌مندی‌ها -->
<button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
</button>
</div>
<!-- اطلاعات محصول -->
<div class="p-4">
<!-- عنوان -->
@ -36,17 +74,18 @@ if ( ! is_a( $product, WC_Product::class ) ) {
<?php echo wp_kses_post( $product->get_name() ); ?>
</a>
<!-- ستاره‌ها (اگر فعال بود) -->
<?php if ( $product->get_average_rating() > 0 ) : ?>
<div class="flex items-center gap-1 mb-2">
<span class="text-honey-400 text-xs">★</span>
<span class="text-xs font-medium"><?php echo esc_html( $product->get_average_rating() ); ?></span>
</div>
<?php endif; ?>
<!-- ستاره‌ها -->
<div class="flex items-center gap-1 mb-2">
<span class="text-honey-400 text-xs">★</span>
<span class="text-xs font-medium"><?php echo esc_html( $rating ? number_format( $rating, 1 ) : '۰' ); ?></span>
<span class="text-xs text-cream-400 dark:text-dark-muted">(<?php echo esc_html( $review_count ); ?>)</span>
</div>
<!-- قیمت -->
<div class="flex items-end gap-2">
<span class="font-extrabold text-forest-500 dark:text-forest-300 text-sm md:text-base"><?php echo $product->get_price_html(); ?></span>
<span class="font-extrabold text-forest-500 dark:text-forest-300 text-sm md:text-base">
<?php echo wp_kses_post( $product->get_price_html() ); ?>
</span>
</div>
</div>
</div>