Woocommerce-Produktgaleriebilder werden als Bilder in voller Größe anstelle von Miniaturansichten angezeigt

Das aktuelle Woocommerce-Setup dieser Website wird wie gewohnt mit einem Hauptproduktbild und mehreren Galeriebildern bereitgestellt. Das Hauptproduktbild wird korrekt verwendet, sodass es in einer Liste angezeigt wird und nach dem Anklicken die Produktseite geöffnet wird. Auf dieser Produktseite werden die auf Woocommerce bereitgestellten Galeriebilder jedoch als Bilder in voller Größe untereinander auf der rechten Seite des Bildschirms angezeigt. Auf jeder Produktseite ist mCustomScrollbar in Aktion, damit Kunden die Bilder nach unten scrollen können. Ich möchte, dass es sich um kleine Bilder mit einer Lightbox- und Zoom-Technik anstelle von Bildern in voller Größe handelt. Ich habe auch Plugins getestet, um zu sehen, ob es diesbezüglich Probleme gibt, aber es hat sich nichts ergeben.

Ich habe eine neue lokale Website zum Testen erstellt und ein Produkt von Grund auf neu erstellt, um die ursprünglichen Woocommerce-Dateien mit diesen abzugleichen, da dies einen anderen Entwickler durchlaufen hat. Die folgenden Dateien, die in direktem Zusammenhang mit jeder Produktseite zu stehen scheinen, sind binär gleich: product-thumbnails.php, product-image.php, single-product.php, content-product.php und content-single-product. php und daher wurden an diesen keine Änderungen vorgenommen, die sich auf jeder Produktseite widerspiegeln. Ich habe auch den folgenden Code gefunden und optimiert, der in functions.php eingefügt wurde, jedoch ohne Erfolg.

 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="'%20.%20$thumbnail_url%20.%20'">';

         }

         echo '</div>';

     }

  }

Ich habe mich bereits darum gekümmert und mich in einer Schleife befunden, aber das Obige ist das, was ich mir ausgedacht habe, was bis jetzt keine Lösung ist. Ich möchte, dass das Produkt ähnlich wie dieses angezeigt wird: https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg . Die Website des Kunden ist voll funktionsfähig und übersteht die geschäftigsten Tage des Jahres, sodass ich die effizienteste Lösung benötige, ohne größere Änderungen vorzunehmen. Vielen Dank im Voraus.

Versuchen Sie, zu Anpassen -> WooCommerce -> Produktkatalog zu gehen und dort die Bildgröße zu ändern

Zusätzlich zu dem oben bereitgestellten Code habe ich einige kleine Details daraus bearbeitet und auch den Flexslider 2 eingefügt, indem ich das JavaScript des Schiebereglers implementiert habe <li> -Tags innerhalb der foreach-Schleife, die mit dem verknüpft sind data-thumb Technik (eine Spezialität von Flexslider). Der Flexslider merkt sich das automatisch <div> Tag mit allen <li> Tags und voila’, perfekte Ausführung wie beabsichtigt.

Einige Optimierungen hier und da, damit es funktioniert, aber es lohnt sich, der Kunde ist mit diesem Update super zufrieden. 🙂