دریافت و نمایش تصویر شاخص و تصاویر گالری محصول و نمایش در فرمتی غیر از فرمت پیش فرض ووکامرس

---

شرح پروژه

(لطفا اگر توسعه دهنده ووکامرس هستید پیشنهاد دهید)

با سلام و وقت بخیر؛

من قصد تبدیل یک قالب HTML به قالب ووکامرسی رو دارم. در صفحه product-image.php که در دایرکتوری plugins/woocommerce/templates/single-product  واقع شده است قصد دارم به جای گالری پیش فرض ووکامرس، از گالری تم خودم استفاده کنم و تصویر شاخص و تصاویر گالری رو دریافت کنم.

تا حدودی موفق شدم تصاویر گالری رو توسط حلقه دریافت کنم و نمایش بدم اما تصویر اصلی رو نتونستم. البته که تابع ()get_gallery_image_ids  یک آرایه از آیدی تمام تصاویر (چه تصویر شاخص چه تصاویر گالری محصول) بر میگردونه و میشه طوری کد نوشت که به طور پیش فرض اولین آیدی تصویر در آرایه به جای تصویر شاخص به صورت بزرگ نمایش داده شود.
مورد دوم اینکه بعد از کلیک روی هر کدام از تصاویر کوچک (thumbnail) که در ردیف زیر تصویر بزرگ تر قرار گرفته اند بعد از کلیک رو هر تصویر باید آن تصویر را در جایگاه تصویر بزرگ نمایش دهد (که البته کمی نیاز به جاوااسکریپت و یا جی کوئری هم هست).

منطق برنامه نوسیش واقعا سادست و برای کسی که کار کرده و آشنایی داره کمتر از 1 ساعت زمان ببره.

ممنون میشم کدهای من رو کامل کنید یا اگر ایده ای دیگه دارید که در این کدهای HTML با همین کلاس‌ها بتونم استفاده کنم و خروجی آن چیزی شود که در تصویر پیوست نمایش داده می‌شود. بلافاصله بعد از آنکه کدها را قرار دهم و گالری درست نمایش داده شود و کار کند تسویه حساب خواهد شد.

تاکید میکنم تا به خروجی مد نظر نرسم نمیتونم وجه رو آزاد کنم. دنبال ایده گرفتن برنامه نویسی هم نیستم. تست کار خیلی راحته من کدها رو داخل فایل product-image.php میزارم و اگر درست باشه به راحتی نمایش میده.

کدهای صفحه product-image.php که تا الان نوشتم:

<?php
global $product;
$gallery_ids = $product->get_gallery_image_ids();
?>
<div class="product-image">
<!-- Main Image تصویر بزرگ -->
<div class="product_img_box">
<img id="product_img" src='assets/images/product_zoom_img1.jpg'>
<a href="#" class="product_img_zoom" title="Zoom">
<span class="linearicons-zoom-in"></span>
</a>
</div>
<!-- Gallery Images تصاویر کوچک گالری -->
<div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4" data-slides-to-scroll="1" data-infinite="false">
<?php
foreach ($gallery_ids as $gallery_id) :
$img_src = wp_get_attachment_url($gallery_id);
?>
<div class="item">
<a href="#" class="product_gallery_item" data-zoom-image="<?php echo $img_src;?>">
<img src="<?php echo $img_src; ?>">
</a>
</div>
<?php endforeach; ?>
</div>
</div>

این پروژه شامل 1 فایل مهم است، لطفا قبل از ارسال پیشنهاد حتما نسبت به بررسی این فایل اقدام فرمایید.

مهارت ها و تخصص های مورد نیاز

---

---