Produktbilder abgeschnitten und Theme Design ändern

haiflosse2
(@haiflosse2)

vor 6 Jahren, 11 Monaten
Ich habe das Problem, dass meine Produktbilder bei der Anzeige oben und unten immer abgeschnitten sind, obwohl sie in der Detailansicht vollständig angezeigt werden.
Ein Bild hat ungefähr folgende Maße: Dateigröße: 911 KB, Abmessungen: 2736 × 3648

Wie kann ich dies ändern, so dass ein Produktbild vollständig angezeigt wird und alle gleich groß sind.

Weiters möchte ich bei meinem Design den Preis größer und in Schriftfarbe rot.
Dazu habe ich versucht beim Design unter Customizer zusätzliche CSS folgendes einzugeben:

.price {
color: #ff0000;
}

Leider hat sich da aber nichts geändert.

Mein Webhoster ist edis.at

Ich verwende die PHP-Version: 5.6

Ich verwende WordPress 4.7.4 und das Theme Storefront

Den Arbeitsspeicher weiß ich nicht. Ich weiß nur, dass ich noch Platz zum Kopieren habe und gesamt 2GB frei habe.

Hoffe es kann mir jemand weiterhelfen.
Vielen Dank
- Dieses Thema wurde geändert vor 6 Jahren, 11 Monaten von haiflosse2.

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Moderator Marcus Spanier
(@espiat)

vor 6 Jahren, 11 Monaten

Hallo.

Bilder:
Deine Bilder sind viel zu groß. Wenn du selbst im Shop das Bild nicht in 2736 × 3648 irgendwo anzeigst, dann macht das keinen Sinn. Lade also nur die Bildgröße hoch, die auch der größten Darstellung der Bilder im Shop entsprechen.

Eine Anleitung für die Bildmaße findest du hier:
https://docs.woocommerce.com/document/fixing-blurry-product-images/

CSS:
In der Einzelansicht kann ich es nicht sehen, da deine Einzelansichten im Shop nicht funktionieren.

Auf der Kategorieseite ist der Preis-Style in folgender Klasse enthalten:

ul.products li.product .price

PS:
Ich weiß nicht, wie die rechtliche Situation in AT bei Onlineshops ist, aber in der aktuellen Form, wäre der Shop in Dtl. so nicht gesetzeskonform.

Thread-Starter haiflosse2
(@haiflosse2)

vor 6 Jahren, 11 Monaten

Danke für die Antwort.
Ich habe das Bild nun verkleinert, aber in der Kategorieübersicht http://agoshop.hochl-it.at/schimmelentferner/ ist das Bild vom Schimmelentferner aber noch immer abgeschnitten.
Wenn man in den Artikel hineingeht, wird es dann vollständig dargestellt.
Wie kann ich es auch in der Übersicht vollständig anzeigen.

Ich habe auch versucht im Css woocommerce-rtl.css und woocommerce.css die Klasse ul.products li.product .Price zu ändern. Leider habe ich keine Änderung erhalten.
Hoffe da kann mir nochmals jemand einen Tip geben, wo ich die Änderung durchführen muss.

Welche Dinge würden noch fehlen, damit es gesetzeskonform ist.

Vielen Dank für eine weitere Hilfe

Thread-Starter haiflosse2
(@haiflosse2)

vor 6 Jahren, 11 Monaten

Die Bildgröße habe ich nun verstanden. Das Bild muss quadratisch sein.

Hoffe aber noch auf Infos, wie ich das Design wie z.b. die Schrift beim Preis ändern kann.
Danke nochmals

Moderator Marcus Spanier
(@espiat)

vor 6 Jahren, 11 Monaten

Hallo.

Trage den CSS Code im Customizr ein. Nicht im Plugin oder Theme direkt.

Welchen konkreten Code benutzt du? Wie schon erwähnt, kann ich nicht auf die singleansicht gehen und nur raten. Wo genau soll die Schrift geändert werden?
Exakten Link dazu?

Welche Dinge würden noch fehlen, damit es gesetzeskonform ist.

-> Eine rechtliche Beratung kann ich nicht bieten. Ausserdem geht es um eine AT Seite.

Thread-Starter haiflosse2
(@haiflosse2)

vor 6 Jahren, 11 Monaten

Vielen Dank für die Antwort.
Ich habe den Code beiim Customizr unter zusätzliche CSS eingetragen:
———-
.Price {
color: #ff0000;
}
———–

Der Preis soll überall dort geändert werden, wo die Artikel angezeigt werden.
z.B.
http://agoshop.hochl-it.at/schimmelentferner/
oder
http://agoshop.hochl-it.at/ago-quart-der-algen-und-moosentferner/
oder
http://agoshop.hochl-it.at/ bei Bestseller

Bezüglich der rechtlichen Dinge kann ich bei meiner Wirtschaftskammer nachfragen, nur mir ging es allgemein zu den technischen Voraussetzungen die ich installiert habe. Dachte ich habe da alles berücksichtig (AGB, Versandbedingungen, Ust Hinweis). Das einzige was ich noch nicht habe ist die SSL Verschlüsselung, die kommt noch.

Danke nochmals
Moderator Torsten Landsiedel
(@zodiac1978)

vor 6 Jahren, 11 Monaten
Die richtige Klasse hat @espiat weiter oben gepostet, damit sollte es klappen:
```
ul.products li.product .price {
    color: #ff0000;
}
```
Gruß, Torsten
Thread-Starter haiflosse2
(@haiflosse2)

vor 6 Jahren, 11 Monaten
Danke für die Antwort.
Das hat jetzt funktioniert – danke.
Wie kann ich aber andere Elemente ändern, wie z.B. den Produkttitel, der über dem Preis steht bzw. wie komme ich da selber drauf, welches css Element da geändert werden soll.
Ich habe da schon einiges probiert.

Nach meiner Logik steht der Produkttitel in der css Klasse woocommerce-loop-product__title. Wenn ich dann aber folgendes versuche:
```
woocommerce-loop-product__title {
  color: #ff0000;
}
```
verändert sich nichts.
Danke nochmals
Moderator Marcus Spanier
(@espiat)

vor 6 Jahren, 11 Monaten
Hallo.

Dein Code enthält schon mal einen Fehler. Da fehlt entweder die

Klassenangabe: .

oder

Idangabe: #

Wäre also bei einer Klasse:

.woocommerce-loop-product__title {

Wobei das mit dem Unterstrich auch nicht ganz sauber aussieht.

Du kannst über eine Console zb. in Chrome diese herausfinden.
Siehe: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
- Diese Antwort wurde geändert vor 6 Jahren, 11 Monaten von Marcus Spanier.

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Das Thema „Produktbilder abgeschnitten und Theme Design ändern“ ist für neue Antworten geschlossen.

Produktbilder abgeschnitten und Theme Design ändern

Themen-Schlagwörter

Ansichten