2017-09-09 4 views
-1

anzeigt Ich habe woocommerce Geschäft gegründet. In meinem Geschäft haben jedes Produkt mehr als 16 Galeriebilder.Wie man Woocommerce Produktgaleriebild in zusammenklappbarem

Also ich möchte zuerst 8 Galerie Bilder zeigen dann unten einen Link zeigen "Weitere Beispielkonfiguration" auf klicken zusammenklappbare Ereignis Arbeit und dann unten zeigen weitere 8 Galerie Bilder. Sehen Sie sich diesen Screenshot an ->http://nimb.ws/2buKoh

Für meine Anforderungen suche ich nach Google, kann aber keine Lösungen finden. Also irgendwelche Lösungen kennen dann bitte helfen Sie mir.

Danke, Ketan.

+0

Bitte lesen Sie [Wie viel Forschungsaufwand von Stack Overflow-Benutzern erwartet wird] (https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack- Überlauf-Benutzer). Stack Overflow ist kein Code-Schreibdienst. Vor der Veröffentlichung wird von Ihnen erwartet, dass Sie Ihr Problem recherchieren und *** einen guten Versuch unternehmen, den Code selbst zu schreiben ***. Wenn Sie an etwas * Besonderem * hängen bleiben, kommen Sie zurück und fügen Sie *** eine Zusammenfassung dessen, was Sie versucht haben, und den entsprechenden Code in ein [minimales, vollständiges und überprüfbares Beispiel] ein (https://stackoverflow.com/help/) mcve) ***. – FluffyKitten

Antwort

0

Sie dieses jquery versuchen können code.You brauchen diese jQuery in Ihrem Thema Option von unten der wp_footer() in footer.php

<script type="application/javascript"> 
jQuery(document).ready(function() { 
    jQuery('.images').append('<div id="loadMore">See more sample configuration</div><div id="showLess">Hide</div>'); 
    jQuery(".thumbnails a").hide(); 

    size_li = jQuery(".thumbnails a").size(); 
    x=3; 
    jQuery('.thumbnails a:lt('+x+')').show(); 
    jQuery('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+3 : size_li; 
     jQuery('.thumbnails a:lt('+x+')').show(); 
    }); 
    jQuery('#showLess').click(function() { 
     x=(x-5<0) ? 3 : x-3; 
     jQuery('.thumbnails a').not(':lt('+x+')').hide(); 
    }); 
}); 
</script> 

nach dem Code hinzugefügt, um hinzuzufügen, um Ihr Produkt-Seite und klicken Sie auf auf Sehen Sie mehr Beispielkonfiguration .Try dies dann lassen Sie mich wissen, das Ergebnis. Vielen Dank

+0

Vielen Dank für Ihre Wiederholung, aber tut mir leid, oben Code funktioniert nicht auf Store Front Woocommerce Thema. – Ketan

Verwandte Themen