Woning zoeken wordt simpel zodra je weet waar je moet beginnen
Download de gratis checklist voor helderheid, richting en realisme.
Meer rust en minder frustratie, omdat je eindelijk precies weet waar je moet beginnen.
Helderheid in je zoekcriteria, zodat je niet langer verdwaalt in alle opties en eindeloos blijft scrollen.
Een realiteitscheck die tijd en teleurstellingen voorkomt, doordat je meteen ziet wat haalbaar is binnen jouw budget en wensen.
Duidelijke afstemming met je partner, zodat jullie dezelfde richting uitkijken in plaats van te twijfelen of discussiëren.
Voor wie zoekt, twijfelt en
geen richting vindt
Deze checklist is perfect voor jou als je....
regelmatig zoekt, maar geen pand vindt dat écht past,
overweldigd raakt door alle opties en niet meer weet waar te kijken,
merkt dat je partner en jij niet altijd dezelfde richting uitdenken,
al uren scrollend op Immoweb belandt… zonder resultaat,
Wij zijn Elise & Michael van HADO Wonen. Een renovatiebedrijf en aankoopbegeleiders met jaren praktijkervaring. We kochten en renoveerden zelf al meer dan tien panden, maakten fouten, ontdekten wat werkt, en ontwikkelden onze eigen manier van kijken, beoordelen en plannen.
In deze checklist gewoon eerlijk de tactieken die wij zelf elke dag gebruiken, bij onze eigen projecten en bij de mensen die we begeleiden.
Wil je van die basis naar de volledige aanpak gaan, dan kan je in het formulier ook onze uitgebreide Vastgoedgids tegen een tijdelijke korting toevoegen.
Download hier je gratis checklist
Vul je gegevens in en ontvang meteen de checklist met optioneel de uitgebreide vastgoedgids tegen tijdelijk tarief.
/* === THEME OVERRIDES (append onderaan je CSS) === */
.container-order-form-two-step {
/* Actieknop (los van accent) */
--action: #00786b;
--action-600: #f2efeb;
--action-700: #f2efeb;
/* Formulierkaart */
--card-bg: #f2efeb;
--card-border: #f2efeb;
/* Order bump */
--bump-bg: #f2efeb;
/* zachte achtergrond bump */
--bump-border: #00786b;
--bump-title: #004a53;
/* titel bump */
--bump-subtitle: #00786b;
/* oto-headline kleur */
--bump-text: #2b2b2b;
/* beschrijving bump */
/* Prijzen */
--price: red;
/* primaire prijsaccent */
--price-muted: #00786b;
}
/* 1) Formulier-achtergrond & -rand */
.container-order-form-two-step,
.container-order-form-two-step .payment-form,
.container-order-form-two-step .order-form-container {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: 12px !important;
padding: 14px !important;
}
/* 2) Actieknop volledig los van --accent */
html body button.form-btn,
html body .form-btn {
background-image: none !important;
background-color: var(--action) !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 18px !important;
padding: 14px 28px !important;
width: 100% !important;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
html body button.form-btn:hover,
html body .form-btn:hover {
background-color: var(--action-600) !important;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
html body button.form-btn:active,
html body .form-btn:active {
background-color: var(--action-700) !important;
transform: translateY(0);
box-shadow: none;
}
/* 3) Order bump: achtergrond & rand */
#one-step-order-QOQYLZHmYd .order-bump-container,
.container-order-form-two-step .order-bump-container {
background: var(--bump-bg) !important;
border: 1px solid var(--bump-border) !important;
border-radius: 12px !important;
}
/* 4) Bump titel / ondertitel / beschrijving */
#one-step-order-QOQYLZHmYd .order-bump-container .bump-headline {
color: var(--bump-title) !important;
font-weight: 800 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container .oto-headline {
color: var(--bump-subtitle) !important;
font-weight: 600 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container > p,
#one-step-order-QOQYLZHmYd .order-bump-container > p span:not(.oto-headline) {
color: var(--bump-text) !important;
}
/* 5) Prijs-kleuren (overal consequent) */
.item-price,
#one-step-order-QOQYLZHmYd .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price {
color: var(--price) !important;
font-weight: 700 !important;
}
.container-order-form-two-step .product-cost-total .order-total span:not(.item-price) {
color: var(--price-muted) !important;
}
/* 6) Cart-icon fix (je had een los !important op nieuwe regel) */
.cart-icon {
color: transparent !important;
}
/* === ORDER BUMP LAYOUT FIX PACK === */
/* Variabelen voor snelle tweaks */
.container-order-form-two-step {
--bump-image-w: 160px;
/* breedte beeldkolom */
--bump-gap: 12px;
/* ruimte tussen beeld en tekst */
--bump-radius: 12px;
/* ronding bump-kaart */
}
/* 0) Flashing arrow: weg ermee */
.container-order-form-two-step .order-bump-container .bump--flashing-arrow,
.container-order-form-two-step .order-bump-container [class*="flashing"] {
display: none !important;
animation: none !important;
}
/* 1) Grid: afbeelding links, tekst rechts (robust: geen hard ID nodig) */
.container-order-form-two-step .order-bump-container {
display: grid !important;
grid-template-columns: minmax(120px, var(--bump-image-w)) 1fr !important;
column-gap: var(--bump-gap) !important;
align-items: start !important;
background: var(--bump-bg, #eef2ef) !important;
/* gebruikt je var als die bestaat */
border: 1px solid var(--bump-border, #e1e5e2) !important;
border-radius: var(--bump-radius) !important;
padding: 12px !important;
text-align: left !important;
}
/* 2) Haal wrapper uit de flow zodat kinderen in het grid vallen */
.container-order-form-two-step .order-bump-container .main-section {
display: contents !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
/* 3) Afbeeldingskolom links – fixe maat + nooit overlappen */
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
align-self: start !important;
max-width: var(--bump-image-w) !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 80 / 120 !important;
/* 160x90 vibe */
object-fit: cover !important;
float: none !important;
position: static !important;
z-index: auto !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* 4) Eerste regel rechts: checkbox + koptitel netjes uitgelijnd */
.container-order-form-two-step .order-bump-container .main-section > div {
grid-column: 2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.container-order-form-two-step .order-bump-container .bump--checkbox {
width: 18px !important;
height: 18px !important;
margin-right: 2px !important;
}
/* 5) Typografie bump */
.container-order-form-two-step .order-bump-container .bump-headline {
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: var(--bump-title, #111) !important;
}
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 2 !important;
display: block !important;
margin: 6px 0 2px !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--bump-subtitle, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p {
grid-column: 2 !important;
margin: 0 !important;
line-height: 1.5 !important;
color: var(--bump-text, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p span:not(.oto-headline) {
display: block !important;
font-size: 13px !important;
margin-top: 2px !important;
color: var(--bump-text, #00786b) !important;
}
/* 6) Prijzen in bump en summary consequent */
.container-order-form-two-step .order-bump-container .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .item-price {
color: var(--price, #00786b) !important;
font-weight: 700 !important;
}
/* 7) Mobile: stack alles onder elkaar, beeld boven */
@media (max-width: 560px) {
.container-order-form-two-step .order-bump-container {
grid-template-columns: 1fr !important;
row-gap: 8px !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: auto !important;
max-width: 100% !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
width: 100% !important;
}
.container-order-form-two-step .order-bump-container .main-section > div,
.container-order-form-two-step .order-bump-container > p,
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 1 !important;
}
}
/* 1) Payment-kop + lijntje weg */
.container-order-form-two-step .payment-title-wrapp {
display: none !important;
}
/* 2) In productenblok de tabelkop + divider weg */
#cone-step-order-QOQYLZHmYd-product-form > div:first-child {
display: none !important;
}
#cone-step-order-QOQYLZHmYd-product-form .divider-product {
display: none !important;
}
/* 3) Order Summary-balk (tekst + lijntjes) weg */
.container-order-form-two-step .separator {
display: none !important;
}
/* 4) In order summary de tabelkop + divider weg */
.container-order-form-two-step .product-cost-total > div:first-child {
display: none !important;
}
.container-order-form-two-step .product-cost-total .divider-product {
display: none !important;
}
Payment
Download hier je gratis checklist
Vul je gegevens in en ontvang meteen de checklist met optioneel de uitgebreide vastgoedgids tegen tijdelijk tarief.
/* === THEME OVERRIDES (append onderaan je CSS) === */
.container-order-form-two-step {
/* Actieknop (los van accent) */
--action: #00786b;
--action-600: #f2efeb;
--action-700: #f2efeb;
/* Formulierkaart */
--card-bg: #f2efeb;
--card-border: #f2efeb;
/* Order bump */
--bump-bg: #f2efeb;
/* zachte achtergrond bump */
--bump-border: #00786b;
--bump-title: #004a53;
/* titel bump */
--bump-subtitle: #00786b;
/* oto-headline kleur */
--bump-text: #2b2b2b;
/* beschrijving bump */
/* Prijzen */
--price: red;
/* primaire prijsaccent */
--price-muted: #00786b;
}
/* 1) Formulier-achtergrond & -rand */
.container-order-form-two-step,
.container-order-form-two-step .payment-form,
.container-order-form-two-step .order-form-container {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: 12px !important;
padding: 14px !important;
}
/* 2) Actieknop volledig los van --accent */
html body button.form-btn,
html body .form-btn {
background-image: none !important;
background-color: var(--action) !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 18px !important;
padding: 14px 28px !important;
width: 100% !important;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
html body button.form-btn:hover,
html body .form-btn:hover {
background-color: var(--action-600) !important;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
html body button.form-btn:active,
html body .form-btn:active {
background-color: var(--action-700) !important;
transform: translateY(0);
box-shadow: none;
}
/* 3) Order bump: achtergrond & rand */
#one-step-order-QOQYLZHmYd .order-bump-container,
.container-order-form-two-step .order-bump-container {
background: var(--bump-bg) !important;
border: 1px solid var(--bump-border) !important;
border-radius: 12px !important;
}
/* 4) Bump titel / ondertitel / beschrijving */
#one-step-order-QOQYLZHmYd .order-bump-container .bump-headline {
color: var(--bump-title) !important;
font-weight: 800 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container .oto-headline {
color: var(--bump-subtitle) !important;
font-weight: 600 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container > p,
#one-step-order-QOQYLZHmYd .order-bump-container > p span:not(.oto-headline) {
color: var(--bump-text) !important;
}
/* 5) Prijs-kleuren (overal consequent) */
.item-price,
#one-step-order-QOQYLZHmYd .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price {
color: var(--price) !important;
font-weight: 700 !important;
}
.container-order-form-two-step .product-cost-total .order-total span:not(.item-price) {
color: var(--price-muted) !important;
}
/* 6) Cart-icon fix (je had een los !important op nieuwe regel) */
.cart-icon {
color: transparent !important;
}
/* === ORDER BUMP LAYOUT FIX PACK === */
/* Variabelen voor snelle tweaks */
.container-order-form-two-step {
--bump-image-w: 160px;
/* breedte beeldkolom */
--bump-gap: 12px;
/* ruimte tussen beeld en tekst */
--bump-radius: 12px;
/* ronding bump-kaart */
}
/* 0) Flashing arrow: weg ermee */
.container-order-form-two-step .order-bump-container .bump--flashing-arrow,
.container-order-form-two-step .order-bump-container [class*="flashing"] {
display: none !important;
animation: none !important;
}
/* 1) Grid: afbeelding links, tekst rechts (robust: geen hard ID nodig) */
.container-order-form-two-step .order-bump-container {
display: grid !important;
grid-template-columns: minmax(120px, var(--bump-image-w)) 1fr !important;
column-gap: var(--bump-gap) !important;
align-items: start !important;
background: var(--bump-bg, #eef2ef) !important;
/* gebruikt je var als die bestaat */
border: 1px solid var(--bump-border, #e1e5e2) !important;
border-radius: var(--bump-radius) !important;
padding: 12px !important;
text-align: left !important;
}
/* 2) Haal wrapper uit de flow zodat kinderen in het grid vallen */
.container-order-form-two-step .order-bump-container .main-section {
display: contents !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
/* 3) Afbeeldingskolom links – fixe maat + nooit overlappen */
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
align-self: start !important;
max-width: var(--bump-image-w) !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 80 / 120 !important;
/* 160x90 vibe */
object-fit: cover !important;
float: none !important;
position: static !important;
z-index: auto !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* 4) Eerste regel rechts: checkbox + koptitel netjes uitgelijnd */
.container-order-form-two-step .order-bump-container .main-section > div {
grid-column: 2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.container-order-form-two-step .order-bump-container .bump--checkbox {
width: 18px !important;
height: 18px !important;
margin-right: 2px !important;
}
/* 5) Typografie bump */
.container-order-form-two-step .order-bump-container .bump-headline {
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: var(--bump-title, #111) !important;
}
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 2 !important;
display: block !important;
margin: 6px 0 2px !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--bump-subtitle, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p {
grid-column: 2 !important;
margin: 0 !important;
line-height: 1.5 !important;
color: var(--bump-text, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p span:not(.oto-headline) {
display: block !important;
font-size: 13px !important;
margin-top: 2px !important;
color: var(--bump-text, #00786b) !important;
}
/* 6) Prijzen in bump en summary consequent */
.container-order-form-two-step .order-bump-container .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .item-price {
color: var(--price, #00786b) !important;
font-weight: 700 !important;
}
/* 7) Mobile: stack alles onder elkaar, beeld boven */
@media (max-width: 560px) {
.container-order-form-two-step .order-bump-container {
grid-template-columns: 1fr !important;
row-gap: 8px !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: auto !important;
max-width: 100% !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
width: 100% !important;
}
.container-order-form-two-step .order-bump-container .main-section > div,
.container-order-form-two-step .order-bump-container > p,
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 1 !important;
}
}
/* 1) Payment-kop + lijntje weg */
.container-order-form-two-step .payment-title-wrapp {
display: none !important;
}
/* 2) In productenblok de tabelkop + divider weg */
#cone-step-order-QOQYLZHmYd-product-form > div:first-child {
display: none !important;
}
#cone-step-order-QOQYLZHmYd-product-form .divider-product {
display: none !important;
}
/* 3) Order Summary-balk (tekst + lijntjes) weg */
.container-order-form-two-step .separator {
display: none !important;
}
/* 4) In order summary de tabelkop + divider weg */
.container-order-form-two-step .product-cost-total > div:first-child {
display: none !important;
}
.container-order-form-two-step .product-cost-total .divider-product {
display: none !important;
}
Payment
Download hier je gratis checklist
Vul je gegevens in en ontvang meteen de checklist met optioneel de uitgebreide vastgoedgids tegen tijdelijk tarief.
De complete gids die je stap voor stap laat zien hoe je een woning slim beoordeelt, realistische renovatiekosten inschat, valkuilen vermijdt en een correct bod uitbrengt.
€56
€1
We nemen contact op..
Download hier je gratis checklist
Vul je gegevens in en ontvang meteen de checklist met optioneel de uitgebreide vastgoedgids tegen tijdelijk tarief.
/* === THEME OVERRIDES (append onderaan je CSS) === */
.container-order-form-two-step {
/* Actieknop (los van accent) */
--action: #00786b;
--action-600: #f2efeb;
--action-700: #f2efeb;
/* Formulierkaart */
--card-bg: #f2efeb;
--card-border: #f2efeb;
/* Order bump */
--bump-bg: #f2efeb;
/* zachte achtergrond bump */
--bump-border: #00786b;
--bump-title: #004a53;
/* titel bump */
--bump-subtitle: #00786b;
/* oto-headline kleur */
--bump-text: #2b2b2b;
/* beschrijving bump */
/* Prijzen */
--price: red;
/* primaire prijsaccent */
--price-muted: #00786b;
}
/* 1) Formulier-achtergrond & -rand */
.container-order-form-two-step,
.container-order-form-two-step .payment-form,
.container-order-form-two-step .order-form-container {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: 12px !important;
padding: 14px !important;
}
/* 2) Actieknop volledig los van --accent */
html body button.form-btn,
html body .form-btn {
background-image: none !important;
background-color: var(--action) !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 18px !important;
padding: 14px 28px !important;
width: 100% !important;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
html body button.form-btn:hover,
html body .form-btn:hover {
background-color: var(--action-600) !important;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
html body button.form-btn:active,
html body .form-btn:active {
background-color: var(--action-700) !important;
transform: translateY(0);
box-shadow: none;
}
/* 3) Order bump: achtergrond & rand */
#one-step-order-QOQYLZHmYd .order-bump-container,
.container-order-form-two-step .order-bump-container {
background: var(--bump-bg) !important;
border: 1px solid var(--bump-border) !important;
border-radius: 12px !important;
}
/* 4) Bump titel / ondertitel / beschrijving */
#one-step-order-QOQYLZHmYd .order-bump-container .bump-headline {
color: var(--bump-title) !important;
font-weight: 800 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container .oto-headline {
color: var(--bump-subtitle) !important;
font-weight: 600 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container > p,
#one-step-order-QOQYLZHmYd .order-bump-container > p span:not(.oto-headline) {
color: var(--bump-text) !important;
}
/* 5) Prijs-kleuren (overal consequent) */
.item-price,
#one-step-order-QOQYLZHmYd .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price {
color: var(--price) !important;
font-weight: 700 !important;
}
.container-order-form-two-step .product-cost-total .order-total span:not(.item-price) {
color: var(--price-muted) !important;
}
/* 6) Cart-icon fix (je had een los !important op nieuwe regel) */
.cart-icon {
color: transparent !important;
}
/* === ORDER BUMP LAYOUT FIX PACK === */
/* Variabelen voor snelle tweaks */
.container-order-form-two-step {
--bump-image-w: 160px;
/* breedte beeldkolom */
--bump-gap: 12px;
/* ruimte tussen beeld en tekst */
--bump-radius: 12px;
/* ronding bump-kaart */
}
/* 0) Flashing arrow: weg ermee */
.container-order-form-two-step .order-bump-container .bump--flashing-arrow,
.container-order-form-two-step .order-bump-container [class*="flashing"] {
display: none !important;
animation: none !important;
}
/* 1) Grid: afbeelding links, tekst rechts (robust: geen hard ID nodig) */
.container-order-form-two-step .order-bump-container {
display: grid !important;
grid-template-columns: minmax(120px, var(--bump-image-w)) 1fr !important;
column-gap: var(--bump-gap) !important;
align-items: start !important;
background: var(--bump-bg, #eef2ef) !important;
/* gebruikt je var als die bestaat */
border: 1px solid var(--bump-border, #e1e5e2) !important;
border-radius: var(--bump-radius) !important;
padding: 12px !important;
text-align: left !important;
}
/* 2) Haal wrapper uit de flow zodat kinderen in het grid vallen */
.container-order-form-two-step .order-bump-container .main-section {
display: contents !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
/* 3) Afbeeldingskolom links – fixe maat + nooit overlappen */
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
align-self: start !important;
max-width: var(--bump-image-w) !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 80 / 120 !important;
/* 160x90 vibe */
object-fit: cover !important;
float: none !important;
position: static !important;
z-index: auto !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* 4) Eerste regel rechts: checkbox + koptitel netjes uitgelijnd */
.container-order-form-two-step .order-bump-container .main-section > div {
grid-column: 2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.container-order-form-two-step .order-bump-container .bump--checkbox {
width: 18px !important;
height: 18px !important;
margin-right: 2px !important;
}
/* 5) Typografie bump */
.container-order-form-two-step .order-bump-container .bump-headline {
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: var(--bump-title, #111) !important;
}
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 2 !important;
display: block !important;
margin: 6px 0 2px !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--bump-subtitle, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p {
grid-column: 2 !important;
margin: 0 !important;
line-height: 1.5 !important;
color: var(--bump-text, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p span:not(.oto-headline) {
display: block !important;
font-size: 13px !important;
margin-top: 2px !important;
color: var(--bump-text, #00786b) !important;
}
/* 6) Prijzen in bump en summary consequent */
.container-order-form-two-step .order-bump-container .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .item-price {
color: var(--price, #00786b) !important;
font-weight: 700 !important;
}
/* 7) Mobile: stack alles onder elkaar, beeld boven */
@media (max-width: 560px) {
.container-order-form-two-step .order-bump-container {
grid-template-columns: 1fr !important;
row-gap: 8px !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: auto !important;
max-width: 100% !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
width: 100% !important;
}
.container-order-form-two-step .order-bump-container .main-section > div,
.container-order-form-two-step .order-bump-container > p,
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 1 !important;
}
}
/* 1) Payment-kop + lijntje weg */
.container-order-form-two-step .payment-title-wrapp {
display: none !important;
}
/* 2) In productenblok de tabelkop + divider weg */
#cone-step-order-QOQYLZHmYd-product-form > div:first-child {
display: none !important;
}
#cone-step-order-QOQYLZHmYd-product-form .divider-product {
display: none !important;
}
/* 3) Order Summary-balk (tekst + lijntjes) weg */
.container-order-form-two-step .separator {
display: none !important;
}
/* 4) In order summary de tabelkop + divider weg */
.container-order-form-two-step .product-cost-total > div:first-child {
display: none !important;
}
.container-order-form-two-step .product-cost-total .divider-product {
display: none !important;
}
Payment
Download hier je gratis checklist
Vul je gegevens in en ontvang meteen de checklist met optioneel de uitgebreide vastgoedgids tegen tijdelijk tarief.
/* === THEME OVERRIDES (append onderaan je CSS) === */
.container-order-form-two-step {
/* Actieknop (los van accent) */
--action: #00786b;
--action-600: #f2efeb;
--action-700: #f2efeb;
/* Formulierkaart */
--card-bg: #f2efeb;
--card-border: #f2efeb;
/* Order bump */
--bump-bg: #f2efeb;
/* zachte achtergrond bump */
--bump-border: #00786b;
--bump-title: #004a53;
/* titel bump */
--bump-subtitle: #00786b;
/* oto-headline kleur */
--bump-text: #2b2b2b;
/* beschrijving bump */
/* Prijzen */
--price: red;
/* primaire prijsaccent */
--price-muted: #00786b;
}
/* 1) Formulier-achtergrond & -rand */
.container-order-form-two-step,
.container-order-form-two-step .payment-form,
.container-order-form-two-step .order-form-container {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: 12px !important;
padding: 14px !important;
}
/* 2) Actieknop volledig los van --accent */
html body button.form-btn,
html body .form-btn {
background-image: none !important;
background-color: var(--action) !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 18px !important;
padding: 14px 28px !important;
width: 100% !important;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
html body button.form-btn:hover,
html body .form-btn:hover {
background-color: var(--action-600) !important;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
html body button.form-btn:active,
html body .form-btn:active {
background-color: var(--action-700) !important;
transform: translateY(0);
box-shadow: none;
}
/* 3) Order bump: achtergrond & rand */
#one-step-order-QOQYLZHmYd .order-bump-container,
.container-order-form-two-step .order-bump-container {
background: var(--bump-bg) !important;
border: 1px solid var(--bump-border) !important;
border-radius: 12px !important;
}
/* 4) Bump titel / ondertitel / beschrijving */
#one-step-order-QOQYLZHmYd .order-bump-container .bump-headline {
color: var(--bump-title) !important;
font-weight: 800 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container .oto-headline {
color: var(--bump-subtitle) !important;
font-weight: 600 !important;
}
#one-step-order-QOQYLZHmYd .order-bump-container > p,
#one-step-order-QOQYLZHmYd .order-bump-container > p span:not(.oto-headline) {
color: var(--bump-text) !important;
}
/* 5) Prijs-kleuren (overal consequent) */
.item-price,
#one-step-order-QOQYLZHmYd .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price {
color: var(--price) !important;
font-weight: 700 !important;
}
.container-order-form-two-step .product-cost-total .order-total span:not(.item-price) {
color: var(--price-muted) !important;
}
/* 6) Cart-icon fix (je had een los !important op nieuwe regel) */
.cart-icon {
color: transparent !important;
}
/* === ORDER BUMP LAYOUT FIX PACK === */
/* Variabelen voor snelle tweaks */
.container-order-form-two-step {
--bump-image-w: 160px;
/* breedte beeldkolom */
--bump-gap: 12px;
/* ruimte tussen beeld en tekst */
--bump-radius: 12px;
/* ronding bump-kaart */
}
/* 0) Flashing arrow: weg ermee */
.container-order-form-two-step .order-bump-container .bump--flashing-arrow,
.container-order-form-two-step .order-bump-container [class*="flashing"] {
display: none !important;
animation: none !important;
}
/* 1) Grid: afbeelding links, tekst rechts (robust: geen hard ID nodig) */
.container-order-form-two-step .order-bump-container {
display: grid !important;
grid-template-columns: minmax(120px, var(--bump-image-w)) 1fr !important;
column-gap: var(--bump-gap) !important;
align-items: start !important;
background: var(--bump-bg, #eef2ef) !important;
/* gebruikt je var als die bestaat */
border: 1px solid var(--bump-border, #e1e5e2) !important;
border-radius: var(--bump-radius) !important;
padding: 12px !important;
text-align: left !important;
}
/* 2) Haal wrapper uit de flow zodat kinderen in het grid vallen */
.container-order-form-two-step .order-bump-container .main-section {
display: contents !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
/* 3) Afbeeldingskolom links – fixe maat + nooit overlappen */
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
align-self: start !important;
max-width: var(--bump-image-w) !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 80 / 120 !important;
/* 160x90 vibe */
object-fit: cover !important;
float: none !important;
position: static !important;
z-index: auto !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* 4) Eerste regel rechts: checkbox + koptitel netjes uitgelijnd */
.container-order-form-two-step .order-bump-container .main-section > div {
grid-column: 2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.container-order-form-two-step .order-bump-container .bump--checkbox {
width: 18px !important;
height: 18px !important;
margin-right: 2px !important;
}
/* 5) Typografie bump */
.container-order-form-two-step .order-bump-container .bump-headline {
font-weight: 800 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: var(--bump-title, #111) !important;
}
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 2 !important;
display: block !important;
margin: 6px 0 2px !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--bump-subtitle, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p {
grid-column: 2 !important;
margin: 0 !important;
line-height: 1.5 !important;
color: var(--bump-text, #00786b) !important;
}
.container-order-form-two-step .order-bump-container > p span:not(.oto-headline) {
display: block !important;
font-size: 13px !important;
margin-top: 2px !important;
color: var(--bump-text, #00786b) !important;
}
/* 6) Prijzen in bump en summary consequent */
.container-order-form-two-step .order-bump-container .item-price,
.container-order-form-two-step .product-cost-total .order-total .item-price,
.container-order-form-two-step .product-cost-total .item-price {
color: var(--price, #00786b) !important;
font-weight: 700 !important;
}
/* 7) Mobile: stack alles onder elkaar, beeld boven */
@media (max-width: 560px) {
.container-order-form-two-step .order-bump-container {
grid-template-columns: 1fr !important;
row-gap: 8px !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container {
grid-column: 1 !important;
grid-row: auto !important;
max-width: 100% !important;
}
.container-order-form-two-step .order-bump-container .bump--image-container picture,
.container-order-form-two-step .order-bump-container .bump--image-container img {
width: 100% !important;
}
.container-order-form-two-step .order-bump-container .main-section > div,
.container-order-form-two-step .order-bump-container > p,
.container-order-form-two-step .order-bump-container .oto-headline {
grid-column: 1 !important;
}
}
/* 1) Payment-kop + lijntje weg */
.container-order-form-two-step .payment-title-wrapp {
display: none !important;
}
/* 2) In productenblok de tabelkop + divider weg */
#cone-step-order-QOQYLZHmYd-product-form > div:first-child {
display: none !important;
}
#cone-step-order-QOQYLZHmYd-product-form .divider-product {
display: none !important;
}
/* 3) Order Summary-balk (tekst + lijntjes) weg */
.container-order-form-two-step .separator {
display: none !important;
}
/* 4) In order summary de tabelkop + divider weg */
.container-order-form-two-step .product-cost-total > div:first-child {
display: none !important;
}
.container-order-form-two-step .product-cost-total .divider-product {
display: none !important;
}
Payment