Checkout personaliseren met CSS codes
CSS codes checkout component in website en funnel pagina's
CSS codes checkout component in website en funnel pagina's
In de video laat ik zien hoe je met CSS een eind komt om je checkout te personaliseren. De CSS codes op deze pagina komen zonder garanties of support en zijn bedoeld om je een eind op weg te helpen. Gebruik ze dus echt voor eigen risico.
Waar plak je de CSS codes in de website of funnel builder?
Let erop dat je de CSS wijzigingen niet ziet in de builder. Je moet hiervoor de preview van de pagina bekijken.
Preview van de CSS bekijken
Checkout versie 1
Rode pijlen weg, toevoeg knoppen ipv checkbox.
CSS code versie 1
/* Zorgt ervoor dat de heading paars wordt */
.form-step .form-heading.active {
color: #8a4848 !important;
font-weight: bold;
}
/* Prijzen in .product-cost-total en gerelateerde secties paars maken */
.product-cost-total .item-price,
.product-cost-total .item-total,
.product-cost-total .product-description .item,
.product-cost-total .order-total .item-total,
.product-description .item-price,
.order-total .item-price,
.item-price {
color: #8a4848 !important;
font-weight: bold;
/* Optioneel: maakt de prijs dikgedrukt */
}
/* ------------------------------
🧱 1. Algemene productbeschrijving
------------------------------ */
section.product-detail .product-description {
font-size: 20px !important;
color: #222;
line-height: 1.5;
margin-bottom: 20px;
}
/* ------------------------------
📦 2. Container van de orderbump
------------------------------ */
.order-bump-container {
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 12px;
padding: 24px;
margin: 20px 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* ------------------------------
🧩 3. Structuur binnen de orderbump
------------------------------ */
.order-bump-container .main-section {
display: flex;
flex-direction: column;
gap: 16px;
background: #fff !important;
}
/* ------------------------------
🖼 4. Afbeelding in de orderbump
------------------------------ */
.bump--image-container {
text-align: center;
margin-top: 10px;
}
.bump--image-container img {
width: 75%;
max-width: 450px;
height: auto;
border-radius: 10px;
object-fit: cover;
}
/* ------------------------------
🔤 5. Titel van de orderbump + knop
------------------------------ */
.order-bump-container .headline {
display: flex;
/* Titel en knop op één lijn */
justify-content: space-between;
/* Titel links, knop rechts */
align-items: center;
/* Verticaal centreren */
flex-wrap: wrap;
/* Breekt netjes op mobiel */
color: #000 !important;
font-weight: 600 !important;
font-size: 18px !important;
line-height: 1.4;
text-align: left;
/* Titel links uitlijnen */
gap: 10px;
}
.order-bump-container .headline span,
.order-bump-container .headline strong {
flex: 1;
/* Laat titel links ruimte nemen */
}
/* ------------------------------
🎯 6. "VOEG TOE" knop
------------------------------ */
.order-bump-container .bump--checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: #8a4848 !important;
/* Hoofdkleur */
color: #fff !important;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.03em;
border-radius: 10px;
border: none;
cursor: pointer;
padding: 10px 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
margin-left: auto;
/* Duwt knop naar rechts */
}
/* Knoptekst vóór en ná klikken */
.order-bump-container .bump--checkbox::before {
content: "Voeg toe";
}
.order-bump-container .bump--checkbox:checked::before {
content: "Toegevoegd!";
}
/* Hover effect */
.order-bump-container .bump--checkbox:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* Actieve knop (na klik) */
.order-bump-container .bump--checkbox:checked {
background: #b1d6c6 !important;
color: #111827 !important;
}
/* ------------------------------
✏️ 7. Beschrijvingstekst onder de titel
------------------------------ */
.order-bump-container .bump--description,
.order-bump-container p {
margin-top: 8px;
font-size: 16px;
line-height: 1.6;
color: #111;
}
/* ------------------------------
⚙️ 8. Radioknoppen (indien gebruikt)
------------------------------ */
.radioBtn input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 22px;
height: 22px;
border: 2px solid #8a4848;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
transition: all .2s ease;
}
.radioBtn input[type=radio]:checked::after {
content: "✔";
font-size: 14px;
color: #8a4848;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
}
/* ------------------------------
🚫 9. Verwijder ongewenste standaard elementen
------------------------------ */
.container-order-form-two-step .form-title,
.divider-form,
img.bump--flashing-arrow,
.oto-headline {
display: none !important;
}
/* ------------------------------
📱 10. Responsieve styling (mobiel)
------------------------------ */
@media (max-width: 768px) {
.order-bump-container {
padding: 18px;
}
.order-bump-container .headline {
flex-direction: column;
align-items: flex-start;
}
.bump--image-container img {
width: 100%;
max-width: 300px;
}
.order-bump-container .bump--checkbox {
align-self: flex-end;
margin-top: 10px;
}
}
Checkout versie 2
Rode pijlen weg, toevoeg knoppen ipv checkbox, schaduw rondom de hele checkout weg, plaatje - titel en knop op één regel zodat je aanbod er nog steeds lekker uitziet maar niet zoveel ruimte in neemt.
CSS code Checkout versie 2
/* ------------------------------
🧩 Schaduw van hele checkout blok weghalen
------------------------------ */
.container-order-form-two-step.container-order-form-two-step {
box-shadow: none!important
}
/* ------------------------------
🧩 Kleur van titel checkout blok
------------------------------ */
.form-step .form-heading.active {
color: #8a4848 !important;
font-weight: bold;
}
/* ------------------------------
🧩 Kleur van prijzen
------------------------------ */
.product-cost-total .item-price,
.product-cost-total .item-total,
.product-cost-total .product-description .item,
.product-cost-total .order-total .item-total,
.product-description .item-price,
.order-total .item-price,
.item-price {
color: #8a4848 !important;
font-weight: bold;
/* Optioneel: maakt de prijs dikgedrukt */
}
/* ------------------------------
🧱 Algemene productbeschrijving
------------------------------ */
section.product-detail .product-description {
font-size: 20px!important
color: #222;
line-height: 1.5;
margin-bottom: 20px;
}
/* ------------------------------
📦 Kleur van container van de orderbump
------------------------------ */
.order-bump-container {
background-color: #fff!important;
border: solid #c7c7c750!important
}
/* ------------------------------
🧩 Structuur binnen de orderbump
------------------------------ */
.order-bump-container .main-section {
background-color: #fff!important;
margin-left: 20%;
margin-top: -40px
}
section.order-bump-container {
display: flex;
flex-direction: column
} /* 🔧 Meer witruimte onder plaatje */.bump--image-container {
order: -1;
margin-bottom: -20px;
/* was -50px */
width: 100px;
}
/* ------------------------------
🔤 Kassakoopje headline weghalen
------------------------------ */
.oto-headline {
margin-left: 20%;
display: none
}
.oto-headline:after {
content: "";
display: block;
margin-bottom: 10px
}
/* ------------------------------
🔤 Titel van de orderbump + knop
------------------------------ */
.order-bump-container .headline {
color: #000!important;
font-weight: 600 !important;
font-size: 18px !important;
line-height: 1.4;
text-align: left;
}
img.bump--flashing-arrow {
display: none
} /* 🎨 Knopstijl aangepast naar jouw kleuren */.order-bump-container .bump--checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 42px;
background: #8a4848 !important;
/* aangepaste kleur */
color: #fff !important;
/* witte tekst */
font-weight: 900;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .02em;
border-radius: 10px;
border: none;
cursor: pointer;
float: right;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.09);
transition: transform .05s ease,box-shadow .15s ease,filter .15s ease
}
/* ------------------------------
🎯 "VOEG TOE" knop
------------------------------ */
.order-bump-container .bump--checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: #8a4848 !important;
/* Hoofdkleur */
color: #fff !important;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.03em;
border-radius: 10px;
border: none;
cursor: pointer;
padding: 10px 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
margin-left: auto;
/* Duwt knop naar rechts */
}
.order-bump-container .bump--checkbox::before {
content: "Voeg toe"
}
.order-bump-container .bump--checkbox:checked::before {
content: "Haal weg"
}
.order-bump-container .bump--checkbox:hover {
filter: brightness(1.05)
}
.order-bump-container .bump--checkbox:active {
transform: translateY(1px)
}
.order-bump-container .bump--checkbox:checked {
background: #b1d6c6 !important;
/* subtiele tweede kleur */
color: #111827 !important;
}
.radioBtn input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 22px;
height: 22px;
border: 2px solid #999;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
transition: all .2s ease
}
/* ------------------------------
⚙️ Radioknoppen (indien gebruikt)
------------------------------ */
.radioBtn input[type=radio]:checked::after {
content: "✔";
font-size: 14px;
color: #22C55E;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-55%)
}
/* ------------------------------
🚫 Verwijder ongewenste standaard elementen
------------------------------ */
.container-order-form-two-step .form-title, .divider-form {
display: none!important
}