Woocommerce Warenkorb Divs verschieben

aubers

Theme: Astra
Version: 5.2.2
Page Builder: Elementor Pro
URL: https://bit.ly/2JEsSMv

Moin, moin liebe Wpler,

Ich habe eben den Warenkorb nach meinen Wünnschen mit Hilfe von CSS editiert, aber bin dabei auf ein Problem gestoßen: Ich möchte dass die "Warenkorb Summe" und der Button "Weiter zur Kasse" genau auf einer Höhe mit den Produkten im Warenkorb sind. Siehe Bild 1 (Sollzustand). Leider habe ich festgestellt, dass ich das div-Element "Weiter zur Kasse" zwar mit "margin-top: -300px;" hochziehen kann, aber wieder mit jedem neuen Produkt im div-Element in dem die Produkte aufgelistet sind, verzogen wird. Siehe Bild 2 (Istzustand).

Der Grund ist, dass das div-Element "Weiter zur Kasse" eigentlich unter dem div-Element für die Produktauflistung liegt (Siehe Normalzustand) und deswegen runter oder hoch rutscht wen das div-Elemnt Produkte länger oder kürzer wird.

Ich denke eine einfache Lösung wäre, wenn ich das div-Element "Weiter zur Kasse" über die aufgelistete Prodkute ziehen könnte und dann mit CSS auf eine Höhe bringen würde. Es wird dann ja nicht mehr von der Länge der Produkliste beeinflusst. Nur leider reichen da meine Programmierkenntnisse nicht aus. Bin gespannt auf eure Hife.

LG Aubers

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Mal ein Denkansatz, wie man es angehen könnte... Stichwort 'Flexbox'

HTML

.page-id-10 .woocommerce {
  display: flex;
  flex-flow: row;
}
form.woocommerce-cart-form {
  width: 50%;
}
.woocommerce-cart .cart-collaterals {
  width: 50%;
}
.woocommerce-cart .cart-collaterals .cart_totals {
  margin-top: 0px;
  float: none;
  width: 100%;
}

Alles anzeigen

Allerdings muss hier noch deutlich nachgebessert werden, da wegen der 'starren' Tabelle im linken DIV sich bei Anzeigebreite kleiner ca. 1140px eine Überschneidung ergibt, die man (je nachdem wie sich das Layout responsive verhalten soll) mit MediaQueries abstellen muss.

aubers

Top! Passt soweit, ich danke dir.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Woocommerce Warenkorb Divs verschieben

Jetzt mitmachen!