Code Snippets WooCommerce

Bilder in WooCommerce richtig darstellen

Um die Bilder in Woocommerce halbwegs gut darzustellen, ändere in der Datei Woocommerce.css die beiden Parameter, wie auf Bildschirmfoto gezeigt, auf 50% bei div.images (siehe Bildschirmfotos)

  • suche nach: .woocommerce div.product div.images img{display:block;width:100%;height:auto;box-shadow:none}
  • und ändere nach: .woocommerce div.product div.images img{display:block;width:50%;height:auto;box-shadow:none}

Und zusätzlich in der gleichen Datei bei a img den Parameter auf 50% (das sind die „ähnlichen Artikel“) die dann auch kleiner dargestellt werden.

  • suche nach: .woocommerce ul.products li.product a img{width:100%;height:auto;display:block;margin:0 0 1em;box-shadow:none}
  • und ändere nach: .woocommerce ul.products li.product a img{width:50%;height:auto;display:block;margin:0 0 1em;box-shadow:none}

Zusätzlich im „product-image.php“ den Parameter auf ‚small‘ … ist aber nicht zwingend erforderlich – aber die Bildqualität bleibt durch diese Änderung eine HÖHERE ! (findest Du im Ordner plugins/woocommerce/templates/single-product/product-image.php)

Bildschirmfoto 2015-09-28 um 17.06.48       Bildschirmfoto 2015-09-28 um 17.14.00   Bildschirmfoto 2015-09-28 um 16.26.34

Um es noch einfacher gestalten zu können, diese beide Zeilen in das erweiterte CSS des Themes einfügen:

Share it:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page

Die Kommentare wurden geschlossen