Produktebilder zu gross

Gelöst scodi
(@scodi)

vor 6 Jahren, 5 Monaten

Hallo zusammen

Ich habe folgendes Problem mit der Einzelansicht von Produkten: Die Bilder sind bei sämtlichen Produkten viel zu gross dargestellt… im WooCommerce Customizer kann ich zwar angeben, wie gross die Bilder dargestellt werden sollten, jedoch ändert sich daran jeweils gar nichts, egal was ich dort angeben.

Wo kann ich angeben, dass die Bilder in der Produkteansicht kleiner dargestellt werden können? Diese müssten um mind. 50 % verkleinert werden…

Vielen Dank für euer Hilfe!

Grüsse, scodi

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 12 Antworten – 1 bis 12 (von insgesamt 12)

Moderator Torsten Landsiedel
(@zodiac1978)

vor 6 Jahren, 5 Monaten

Nach einer Änderung musst du die Vorschaubilder neu generieren lassen, sonst ändert sich da nichts. Z.B. hiermit:
https://de.wordpress.org/plugins/regenerate-thumbnails/

Gruß, Torsten

Moderator Torsten Landsiedel
(@zodiac1978)

vor 6 Jahren, 5 Monaten

Kann aber auch ein CSS-Problem sein …

Thread-Starter scodi
(@scodi)

vor 6 Jahren, 5 Monaten

Vielen Dank Torsten für deine Hilfe!

Leider hat es nicht zur Lösung geführt, die Bilder werden immer noch gleich gross dargestellt, egal was ich beim Customizer angebe. Ich muss wohl irgendwo im CSS die Grösse definieren…

dertino
(@dertino)

vor 6 Jahren, 3 Monaten

Hallo zusammen.

Ich habe genau das gleiche Problem und suche mir schon seit drei Tagen den Wolf.

Ist da schon eine Lösung gefunden worden?

LG
Der Tino

Thread-Starter scodi
(@scodi)

vor 6 Jahren, 3 Monaten

Hallo Tino

Leider habe ich ebenfalls keine Lösung gefunden und mir konnte bis anhin auch niemand weiterhelfen…

Ich hoffe sehr, dass ich das Problem irgendwann mal lösen kann 🙂 Falls du eine Idee hast, lass es mich wissen 🙂

Lieber Gruss,
Claudio

stylebutton
(@stylebutton)

vor 6 Jahren, 2 Monaten

Das hat sicherlich mit Deinem Template zu tun. Nutzt Du eine customized Produktseite?
Das Bild selber ist ja nur 300 x 400 px groß und wird per CSS an das umgebende DIV angepasst, welches 48% der Seitenbreite einnimmt. Wenn Du die 48% entfernst, klappt es auch mit der Bildgröße 🙂
sn1k
(@sn1k)

vor 6 Jahren, 2 Monaten
```
.woocommerce div.product div.images img {
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: none;
```
Der Code hatte „width: 100%;“, einfach ein max-width, dann wird das bild nicht mehr gezogen.
Thread-Starter scodi
(@scodi)

vor 6 Jahren, 2 Monaten
.woocommerce div.product div.images img {
display: block;
max-width: 100%;
height: auto;
box-shadow: none;
Der Code hatte „width: 100%;“, einfach ein max-width, dann wird das bild nicht mehr gezogen.

Hallo sn1k!

Danke dir für die Hilfe und deine Bemühungen!

Das scheint soweit zu funktionieren. Ich habe diese Eigenschaft im Browser mit der Funktion „untersuchen“ abgeändert und dort wird das Bild danach sofort kleiner dargestellt. Soweit genau dass, was ich möchte.

Nun habe ich das ganze im woocommerce.css abgändert und mir zur Sicherheit eine Kopie des originalen css abgespeichert. Danach via FTP das neue woocommerce.css unter dem selben Namen eingefügt und das alte entfernt. Leider greift es aber auf der Seite nicht… Weisst du, wieso?

Lieber Gruss und tausend Dank!

Claudio

PS: Cookies und Verlauf habe ich natürlich gelöscht… keine Veränderung
- Diese Antwort wurde vor 6 Jahren, 2 Monaten von scodi geändert.
- Diese Antwort wurde vor 6 Jahren, 2 Monaten von scodi geändert.
sn1k
(@sn1k)

vor 6 Jahren, 2 Monaten
Ich schätze du nutzt ein Child-Theme, kann das sein?
Solche Änderungen immer im Child-Theme übernehmen, oder im Customizer unter „Zusätzliches CSS“.

Hier einfach den Code reinkopieren:
```
.woocommerce div.product div.images img {
    max-width: 100%;
}
```
Wenn das ganze in der woocommerce.css speicherst, wird die Datei beim nächsten WooCommerce Update wieder überschrieben und deine Änderungen sind futsch 😛
Thread-Starter scodi
(@scodi)

vor 6 Jahren, 1 Monat
Das war mein erster grosser Anfängerfehler, kein Child-Theme zu erstellen und zu nutzen. Ich bin blutiger WP-Anfänger 🙂

Jetzt habe ich den Code im benutzerdefinierten CSS hineinkopiert (Simple Custom CSS):
```
/* Custom CSS by Kai */

body, button, input, select, textarea {
    color: #474747;
}
.woocommerce div.product div.images img {
   max-width: 100%!important;
}
```
Die erste Änderung ist von einem Kollegen… die zweite habe ich unten hinzugefügt, ebenso im Customizer via zusätzliches CSS. Beides funktioniert nicht, die Bilder werden immer noch gleich gross dargestellt 🙁 Hast du noch eine Idee, was falsch ist?

Danke dir und lieber Gruss!

Claudio
Moderator Angelika Reisiger
(@la-geek)

vor 6 Jahren, 1 Monat
Hallo @scodi

lösche mal deinen Code oben wieder überall und füge stattdessen das folgende unter ==> WordPress-Backend ==> Design ==> Customizer ==> Zusätzliche CSS ein:
```
.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    width: auto;
}
```
Thread-Starter scodi
(@scodi)

vor 6 Jahren, 1 Monat

Hallo Angelika

Wow, super! Hat geklappt! Ich habe den Wert auto mit einem Prozentsatz für width & height abgeändert, da nicht alle Bilder die gleiche Grösse im Backend hatten. Nun stimmt es aber so für den Moment.

Vielen vielen Dank für eure Hilfe, echt super, ich bin super happy!

Beste Grüsse,
Claudio