Woocommerce Astra theme producten op dezelfde hoogte

[0108daniel]

Ik ben opzoek naar een antwoord van mensen die ook met Woocommerce of met Astra werken en dit antwoord wellicht weten.
Mijn producten staan niet netjes uitgelijnd op de pagina's.
De ene foto is hoger dan de ander waardoor de 'in winkelwagen' knop bij het ene product hoger/lager zit dan de ander.
Graag zou ik willen weten of hier een plugin voor is zodat je de hoogte kan samenstellen zodat alles netjes uitgelijnd is op dezelfde hoogte.
Ik zat zelf al te zoeken maar dat zijn topics uit 2012 tot 2015 die outdated zijn waarvan links en oplossingen niet meer werken.
Het is niet altijd mogelijk om foto's van de producten zo om te schalen dat ze allemaal dezelfde hoogte krijgen.
Nu ziet het er rommelig uit en dat is niet de bedoeling.
CSS codes zijn niet wenselijk en kunnen voor de toekomst voor problemen lijden.

[Josk79]

Volgens mij is dit vooral een probleem als je afbeelding (hoogte en/of breedte) kleiner is dan de thumbnail afmeting.

Je angs voor css snap ik niet.

[0108daniel]

Josk79 schreef op zondag 1 mei 2022 @ 14:26:
Volgens mij is dit vooral een probleem als je afbeelding (hoogte en/of breedte) kleiner is dan de thumbnail afmeting.

Je angs voor css snap ik niet.

Alle afbeeldingen zijn groter dan de thumbnail, anders werkt het sowieso niet met het uploaden.
CSS toevoegen kan op lange termijn na updates van Woocommerce of overige plugins de site slecht doen werken of zelfs laten crashen.
Heb je eventueel een oplossing of plugin voor dit probleem?

[Zenomyscus]

Je site gaat niet zomaar crashen met CSS. De kans is aanwezig dat de CSS geen effect meer heeft na een update, of nog wel werkt op plekken waar het niet zo moeten werken. Die kans is klein, maar worst-case heb je een lelijke site en haal je die CSS weg na een update. Crashen door CSS lijkt me onmogelijk.

[0108daniel]

Zenomyscus schreef op zondag 1 mei 2022 @ 15:37:
Je site gaat niet zomaar crashen met CSS. De kans is aanwezig dat de CSS geen effect meer heeft na een update, of nog wel werkt op plekken waar het niet zo moeten werken. Die kans is klein, maar worst-case heb je een lelijke site en haal je die CSS weg na een update. Crashen door CSS lijkt me onmogelijk.

Helaas is er geen werkende css te vinden voor dit probleem.
De 80px css werkt niet voor de nieuwere woocommerce versies.

[Josk79]

Zou je een link naar een pagina op je site willen sturen waar het probleem is te zien? (Eventueel via PM omdat Tweakers het als 'spam' beschouwd)

[ Voor 19% gewijzigd door Josk79 op 01-05-2022 20:51 ]

[0108daniel]

Josk79 schreef op zondag 1 mei 2022 @ 20:51:
Zou je een link naar een pagina op je site willen sturen waar het probleem is te zien? (Eventueel via PM omdat Tweakers het als 'spam' beschouwd)

Ik heb hier een screenshot, dit mag waarschijnlijk wel.


Zoals je ziet zijn de knoppen niet netjes uitgelijnd.
Dit staat slordig.
Graag zou ik dus willen weten hoe je dit netjes uitlijnt zodat de knoppen naast elkaar staan.

[Josk79]

Beetje lastig zonder de page source te kunnen inzien, vandaar bij voorkeur een link.

[0108daniel]

Ik heb je een berichtje gestuurd.

[Josk79]

Ik heb je pagina bekeken. Je thumbnails zijn 300x300. De afbeelding van het Revell 1:50 Viking schip is 400x278. Dus lager dan de thumbnail size.

Probeer eens wat ik eerder zei; afbeeldingen uploaden die groter zijn dan de thumbnail size.

[0108daniel]

Dankje.
Hoe zit dat met afbeeldingen die smal en lang zijn?
Die kan ik niet uitrekken naar 300x300.

[sypie]

0108daniel schreef op zondag 1 mei 2022 @ 21:25:
Zoals je ziet zijn de knoppen niet netjes uitgelijnd.

Dat zul je moeten oplossen met CSS vermoed ik. De teksten zijn immers ook van verschillende lengtes. De eerste is 1 regel, de tweede 2 regels en de derde 3 regels lang. Dan is het niet gek dat de knop ook naar beneden verschuift.

[0108daniel]

Het probleem ligt vooral bij de regels.
Als een product 3 regels heeft dan moet de knop bij de rest ook dezelfde hoogte hebben als de knop waar 3 regels staan.
Weet je wat voor CSS ik daar voor kan gebruiken?

[MaNDaRK]

Het lijkt dat het allemaal een div staat. Misschien kan je de knop met de volgende css eigenschap naar benden krijgen: https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

[flashzorrr]

0108daniel schreef op zondag 1 mei 2022 @ 21:38:
Dankje.
Hoe zit dat met afbeeldingen die smal en lang zijn?
Die kan ik niet uitrekken naar 300x300.

Wat je kan doen is een (wit) canvas maken van 300x300 en daarop je productafbeelding netjes positioneren. Grote kans dat die wel invloed heeft op de duidelijkheid van de afbeelding.

0108daniel schreef op zondag 1 mei 2022 @ 21:46:
Het probleem ligt vooral bij de regels.
Als een product 3 regels heeft dan moet de knop bij de rest ook dezelfde hoogte hebben als de knop waar 3 regels staan.
Weet je wat voor CSS ik daar voor kan gebruiken?

Tegenwoordig is dit vrij gemakkelijk op te lossen met flex. Uit m'n hoofd kan je bijvoorbeeld je bovenliggende div (daar waar je titel, prijs en button in staan) een flexblox maken, en je button een margin-top van auto geven, als het goed is zal hierdoor zal je button ongeachte de lengte van je titel onder aan in de container komen.

Edit;
Mocht je een codepen handig vinden als voorbeeld, dit is hoe ik het (waarschijnlijk) aan zou pakken; https://codepen.io/flashzorrr/pen/NWyWBjV

[ Voor 34% gewijzigd door flashzorrr op 01-05-2022 22:14 . Reden: verkeerde quote ]

[Josk79]

0108daniel schreef op zondag 1 mei 2022 @ 21:38:
Dankje.
Hoe zit dat met afbeeldingen die smal en lang zijn?
Die kan ik niet uitrekken naar 300x300.

Je kunt wel naar 500x300 o.i.d. schalen, zolang de ratio maar niet wordt aangepast. Ik zou trouwens hogere resolutie foto's maken.

[ Voor 6% gewijzigd door Josk79 op 01-05-2022 22:16 ]

[0108daniel]

MaNDaRK schreef op zondag 1 mei 2022 @ 21:58:
Het lijkt dat het allemaal een div staat. Misschien kan je de knop met de volgende css eigenschap naar benden krijgen: https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

Helaas werkt die CCS niet.

[donnie1992]

Misschien de website overlaten aan iemand die wel de basis verstand heeft van CSS/HTML?
Je wilt de opmaak aanpassen en dingen gaan uitlijnen zonder CSS en noemt CSS codes zelfs schadelijk.
Lijkt me dan niet dat je hebt begrepen hoe een site in elkaar zit.

[0108daniel]

flashzorrr schreef op zondag 1 mei 2022 @ 22:04:
[...]


Wat je kan doen is een (wit) canvas maken van 300x300 en daarop je productafbeelding netjes positioneren. Grote kans dat die wel invloed heeft op de duidelijkheid van de afbeelding.


[...]


Tegenwoordig is dit vrij gemakkelijk op te lossen met flex. Uit m'n hoofd kan je bijvoorbeeld je bovenliggende div (daar waar je titel, prijs en button in staan) een flexblox maken, en je button een margin-top van auto geven, als het goed is zal hierdoor zal je button ongeachte de lengte van je titel onder aan in de container komen.

Edit;
Mocht je een codepen handig vinden als voorbeeld, dit is hoe ik het (waarschijnlijk) aan zou pakken; https://codepen.io/flashzorrr/pen/NWyWBjV

De foto's worden er niet beter op als ik ze in 300x300 zet.
Ook de verhouding klopt dat niet met een langwerpige foto.
Als ik deze verklein dat die in de 300x300 komt dan word de foto erg lang en zijn de teksten van de foto niet meer leesbaar.

Ik zal de plugin flex eens bekijken.

[0108daniel]

donnie1992 schreef op zondag 1 mei 2022 @ 22:28:
Misschien de website overlaten aan iemand die wel de basis verstand heeft van CSS/HTML?
Je wilt de opmaak aanpassen en dingen gaan uitlijnen zonder CSS en noemt CSS codes zelfs schadelijk.
Lijkt me dan niet dat je hebt begrepen hoe een site in elkaar zit.

De site is gebouwd door een SEO builder.
Hij weet hier ook geen oplossing voor terwijl dit een bekend probleem is.
Echter om met CSS te gaan rommelen lijkt mij dat het makkelijker zou kunnen met een build-in optie.

[donnie1992]

0108daniel schreef op zondag 1 mei 2022 @ 22:30:
[...]


De site is gebouwd door een SEO builder.
Hij weet hier ook geen oplossing voor terwijl dit een bekend probleem is.
Echter om met CSS te gaan rommelen lijkt mij dat het makkelijker zou kunnen met een build-in optie.

Website's zijn maatwerk.
Als je alles wilt uitlijnen zonder CSS dan moet je consequent een max aantal letters voor je product titels aanhouden en een template maken voor je plaatjes.

[0108daniel]

Ik heb het kunnen oplossen!
De thumbnails heb ik aangepast naar een verhouding 5:4.
Hierdoor mis ik maar een klein stukje van de product foto's.
Nu zijn alle foto's van hetzelfde formaat.
Toen nog het probleem dat de titels van producten meerdere regels bevatten.
Dit heb ik met een code kunnen verhelpen.
De code zorgt ervoor dat maar 1 regel te zien is en vervolgt met 3 puntjes.
Op die manier behoud ik de SEO voor ieder product en staat alles nu netjes uitgelijnd op de pagina's.
Moet nog wel even de pagina's bekijken of alles goed werkt.

[ Voor 5% gewijzigd door 0108daniel op 01-05-2022 22:51 ]

[donnie1992]

Goed om te zien dat text-overflow gevonden is