Woocommerce, das Bilder in der Beschreibungsseite unscharf zeigt

Ich mache eine E-Commerce-Website mit Woocommerce-Plugin . Die meisten Dinge funktionieren gut mit kleinen Änderungen. Aber ich habe ein Problem mit Bildern. Ich habe das Bild für das vorgestellte Bild hochgeladen, das in der Produktgalerie gezeigt wird, die gut zeigt, aber wenn ich zur Produktbeschreibung gehe, gerade indem ich auf das Produktbild klicke, zeigt es Bild mit undeutlichem. Um den Grund zu wissen, google ich und ich habe eine Lösung auf dieser Seite . Aber ich verstehe die Lösung nicht . Wie man damit arbeitet. Hier mit füge ich meine scrren Aufnahme für Produktkategorie, Produktbeschreibung Bildschirmbild und die Einstellungen für die Bilder in den Plugin-Einstellungen an. Jede Hilfe und Vorschläge sind für diese Frage sehr willkommen.

Produktkategorie Bild

Bildbeschreibung hier eingeben

Produktbeschreibung Bild

Bildbeschreibung hier eingeben

Bildeinstellungen aus dem Woocommerce-Plugin

Bildbeschreibung hier eingeben

Solutions Collecting From Web of "Woocommerce, das Bilder in der Beschreibungsseite unscharf zeigt"

Ihr Produktbild, wie im Screenshot gezeigt, hat unterschiedliche Abmessungen. Sie sollten die Größe des Einzelproduktabbilds auf 225px festlegen und dann die Miniaturansichten mit diesem Plugin neu generieren: http://wordpress.org/extend/plugins/regenerate-thumbnails/

Dies ist ein gut dokumentiertes Problem mit WooCommerce und es gibt mehrere Tuts, wie es getriggers werden kann. Ich habe die zwei aufgelistet, die mir am hilfreichsten waren.

WooCommerce Dokumentation

Die Design-Typen

Sie können auch die 100% -Breite-Deklaration in der WooCommerce-CSS-Datei überschreiben, indem Sie dem Stylesheet Ihres Designs Folgendes hinzufügen:

div.product div.images img, #content div.product div.images img { width: auto ! important; } 

Der Grund dafür, dass Woocommerce-Bilder verschwommen sind, liegt darin, dass der Woocommerce-CSS-Code für Responsive-Themes entworfen wurde. Die Thumbnail-Einstellungen in den Katalogeinstellungen sind jedoch spezifische Pixelgrößen.

Woocommerce deckt es in ihren Dokumenten ab, aber ihre Erklärung und die Methode zur Behebung ist nicht genau richtig. Siehe http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/

Ich werde ein Beispiel verwenden, um zu zeigen, was für Produktbilder passiert (auf der einzelnen Produktseite gezeigt):

Originalbild ist 500 x 500 (sagen wir) Woocommerce Katalog einzelnes Produkt Bild ist auf 300 x 300, so dass eine 300 x 300 Miniaturansicht des ursprünglichen Bildes generiert wird. Die Produktseite image div class = “images” css wird auf Breite gesetzt: 48%; Auf meinem Bildschirm entspricht diese 48% einer Bildgröße von 470 x 470, also wird das 300 x 300 Miniaturbild auf 470 x 470 gestreckt, was es verschwommen macht.

Da das Thumbnail eine feste Größe hat, wird auch die Reaktionsfähigkeit in einem responsiven Theme unterbrochen.

Sie können entweder die CSS-Größe so ändern, dass sie der Miniaturbildgröße entspricht, oder die Größe des Einzelbilds so ändern, dass sie der Originalbildgröße entspricht (oder mindestens größer als Sie glauben, dass die 48% -Breite die Miniaturgröße dehnt). edit: Eigentlich könntest du beides machen.

Vermutlich ein ähnliches Problem mit den anderen Miniatureinstellungen auf der Seite Katalogeinstellungen.

Für mich ist das ein Problem im Woocommerce, kein Problem in den Themen anderer Leute.

Die Bildbreite in Ihrem Screenshot (die unscharfe) wird in woocommerce.css als Breite definiert: 100%, was zu einer Dehnung führen kann. Sie können dies in Ihrer style.css überschreiben, indem Sie Folgendes definieren: div.product div.images img, #content div.product div.images img {Breite: 200px! Wichtig; }

Ich habe einen Rundweg gefunden, der für mich funktioniert, obwohl es ein bisschen mehr Arbeit ist.

Veröffentlichen Sie Ihr neues Produkt so, wie Sie es tun würden. Wenn Sie fertig sind, sehen Sie es auf Ihrem WordPress-Blog an. Klicken Sie mit der rechten Maustaste auf das Hauptfoto und klicken Sie auf Inspect-Element. Bewegen Sie den Mauszeiger über den markierten Text und ermitteln Sie die Breite und Höhe (die ersten Zahlen, nicht die in Klammern) und den Upload-Pfad (zum Beispiel: http://www.yourwebsite.com/blog/wp-content-uploads/yourfilenames).

Gehen Sie in Ihre Fotobearbeitungssoftware und passen Sie Ihr Foto an die Abmessungen an, laden Sie Ihre Dateien dann erneut auf den gleichen Pfad hoch und überschreiben Sie sie. Ich benutze den Plug-in-Add-from-Server, um meine Dateien manuell hochzuladen, also ging ich einfach in den Ordner von meinem FTP-Client. Ich mache das für jedes verschwommene Foto in meinem WooCommerce Blog.

Nach vielen Versuchen fand ich, dass dies für mich am einfachsten ist, obwohl es zusätzliche Arbeit ist. Die Bilder sind schön und klar 🙂