Изображения галереи продуктов WooCommerce отображаются в виде полноразмерных изображений вместо миниатюр - PullRequest
0 голосов
/ 13 февраля 2019

Текущая настройка Woocommerce для этого веб-сайта предоставляется с основным изображением продукта и несколькими изображениями галереи в обычном режиме.Основное изображение продукта используется правильно, поэтому оно отображается в списке и после щелчка открывается страница продукта.Однако на этой странице продукта изображения галереи, представленные в Woocommerce, отображаются в виде полноразмерных изображений друг под другом в правой части экрана.На каждой странице продукта есть mCustomScrollbar в действии, чтобы клиенты могли прокручивать изображения вниз.Я хочу, чтобы это были небольшие изображения с технологией лайтбокса и масштабирования вместо полноразмерных изображений.Я также протестировал плагины, чтобы увидеть, есть ли проблемы, связанные с этим, однако ни один из них не привел.

Я создал новый локальный сайт для тестирования и создал продукт с нуля, чтобы сопоставить оригинальные файлы Woocommerce с этими.так как это прошло через другого разработчика.Следующие файлы, которые, по-видимому, имеют прямое отношение к каждой странице продукта, имеют двоичные значения: product-thumbnails.php, product-image.php, single-product.php, content-product.php и content-single-product.php и, следовательно, не было внесено никаких изменений в них, которые отражаются на каждой странице продукта.Я также нашел и оптимизировал приведенный ниже код, помещенный в functions.php, однако безрезультатно.

 add_action('woocommerce_shop_loop_item_title','wps_add_extra_product_thumbs', 5);
 function wps_add_extra_product_thumbs() {

     if (is_product()) {

         global $product;

         $attachment_ids = $product->get_gallery_image_ids();

         echo '<div class="product-thumbs">';

         foreach( array_slice( $attachment_ids, 0,3 ) as $attachment_id ) {

               $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];

               echo '<img class="thumb" src="' . $thumbnail_url . '">';

         }

         echo '</div>';

     }

  }

Я уже обдумал это и оказался в цикле, однако вышеизложенное - это то, что у меня естьпридумать, что до сих пор не является решением.Я хочу, чтобы продукт показывал подобное: https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg.Веб-сайт клиента является полностью функциональным и в самые загруженные дни года, поэтому мне нужно самое эффективное решение без каких-либо серьезных изменений.Большое спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

В дополнение к приведенному выше коду, я отредактировал некоторые мелкие детали из него, а также включил Flexslider 2, реализовав javascript ползунка, создав теги <li> в цикле foreach, связанном с техникой data-thumb (aФлекслайдер по специальности).Flexslider автоматически отмечает тег <div>, содержащий все теги <li> и вуаля ', идеальное исполнение, как и предполагалось.

Некоторые изменения здесь и там, чтобы заставить его работать, но оно того стоит, клиент очень доволен этим обновлением,:)

0 голосов
/ 13 февраля 2019

попробуйте зайти в Customize -> WooCommerce -> каталог продуктов и измените размер изображения там

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...