Doel: Lees enkele veelgestelde vragen over Dynamische Checkout voor WooCommerce.
Algemene troubleshoot richtlijnen
Als je problemen hebt met het correct tonen van de Dynamic Checkout, kun je de onderstaande stappen gebruiken om te proberen om het probleem te verhelpen:
- Controleer hier of je de nieuwste versie van Dynamic Checkout hebt geïnstalleerd
- Deactiveer externe plugins
Houd er rekening mee dat de WooCommerce Role-Based Shipping/Payment Methods plugin niet compatibel is met de Dynamic Checkout en moet worden gedeactiveerd om de betaalmethoden correct te tonen.
Vraag: Ik heb mijn configuratie gepubliceerd, maar de methodes verschijnen niet in de Checkout. Wat gaat er mis?
Er zijn een paar mogelijke oorzaken:
-
Als je een foutmelding krijgt wanneer je de Checkout probeert te publiceren, kan het zijn dat je configuratie niet correct is gepubliceerd.
Ga naar Instellingen > Dynamic Checkout in je Sendcloud panel en controleer of de configuratie die je zojuist heeft gepubliceerd geen fout status heeft.- Probeer de configuratie opnieuw the publiceren
-
Probeer je api keys te vernieuwen
-
Verbind je winkel opnieuw met sendcloud
- Whitelist IP van deze lijst (als je gelimiteerde toegang hebt via een firewall of Cloudflare, etc).
-
Je plugin of Woocommerce/Wordpress moeten mogelijk worden bijgewerkt.
Zorg ervoor dat je de nieuwste versie van de Sendcloud-plugin hebt geïnstalleerd en dat je Woocommerce en Wordpress up to date hebt (versie 4.0 en hoger).
-
Je hebt geprobeerd een dagspecifieke levering methode aan te maken in je Woocommerce instellingen in plaats van in het Sendcloud panel.
Door de manier waarop Woocommerce werkt, is de methode "Dagspecifieke levering" een optie in de Woocommerce verzendzone-instellingen. Wanneer je via deze weg een methode aanmaakt, zal deze niet juiste worden weergegeven in de Checkout, omdat er niets is geconfigureerd in je Sendcloud merchant account. De verzendmethode moet eerst worden geconfigureerd in het Sendcloud panel en vervolgens worden gepubliceerd naar de plugin. Verwijder de handmatige methode en configureer een verzendmethode in het Sendcloud Checkout-panel.
- Het kan te maken hebben met dubbele verzendzones in WooCommerce.
Zie hieronder. -
De prijs ontbreekt voor de geselecteerde verzendmethode.
Je moet prijzen toevoegen aan een verzendmethode in Woocommerce, voordat deze zichtbaar zijn in de Checkout voor je klanten. Hier lees je hoe je prijzen kunt toevoegen.
Dupliceer afleverzones
Als je een afleverzone hebt aangemaakt in je Checkout configuratie voor een zone die al aanwezig was in WooCommerce, dan kan het zijn dat je dubbele zones ziet verschijnen in je WooCommerce dashboard. De oude verzendzone kan de nieuw aangemaakte afleverzone teniet doen.
Om dit probleem op te lossen, moet je prioriteit geven aan de zone die je zojuist hebt aangemaakt in Sendcloud.
- Ga naar je WooCommerce dashboard > Instellingen > Verzenden
-
Zorg ervoor dat de nieuwe zone die je in Sendcloud hebt aangemaakt bovenaan in de lijst in WooCommerce verschijnt, door de nieuwe zone boven de reeds bestaande zones te slepen
- Herschrijf alle door WooCommerce gecreëerde methodes uit de oude zone die je wilt blijven gebruiken (bijv. lokaal afhalen, servicepunt, enz.)
- Je hoeft deze stap alleen de allereerste keer te voltooien bij het publiceren van je Checkout configuratie. Aanvullende methodes zullen nu verschijnen in deze nieuw gecreëerde zone.
Tip: Je kunt eenvoudig zien welke verzendzone is aangemaakt via je Sendcloud Checkout, omdat in de kolom Verzendmethode(s) de naam wordt getoond die je hebt ingevoerd tijdens de configuratie van de Checkout.
In het bovenstaande voorbeeld kun je zien dat de naam die is ingevoerd onder Gegevens van methode ("PostNL - Signature required") wordt weergegeven in WooCommerce Verzendzones. Dit is de verzendmethode die prioriteit moet krijgen.
Vraag: Ik krijg een foutmelding wanneer ik mijn Dynamic Checkout-configuratie probeer te publiceren. Hoe los ik dit op?
Als je Dynamic Checkout-configuratie om wat voor reden dan ook niet kan worden gepubliceerd, wordt één van de volgende foutmeldingen weergegeven. Deze geeft ook aan hoe het probleem kan worden opgelost:
-
Currency mismatch
Oplossing - Wijzig de valuta zodat deze overeenkomt met je WooCommerce webshop valuta via het dropdown menu naast Nieuwe leveringszone
-
Invalid signature
Oplossing - refresh je API keys
-
Missing fields
Oplossing - Controleer of je een verzendmethode hebt gekozen op de checkout configuratie pagina
V: Ik heb prijzen toegevoegd, maar de verzendmethode ontbreekt nog. Wat zou er nog meer mis kunnen gaan?
A: De klant moet een land selecteren voordat hij een verzendmethode ziet bij het afrekenen
Omdat de verzendmethodes bij de Checkout voor een bepaald land zijn geconfigureerd, moet de klant bij de Checkout eerst zijn land van verzending selecteren, voordat de methode voor hem zichtbaar wordt.
Sommige thema's tonen een bericht zoals "Voer je adres in om de verzendopties te bekijken". Controleer of deze melding wordt weergegeven in jouw specifieke thema/setup-configuratie en zorg ervoor dat je klanten bij het afrekenen duidelijk de instructie krijgen om hun adresgegevens in te voeren om zo alle beschikbare verzendmethoden te bekijken.
V: Ik heb prijzen toegevoegd voor een aangepaste Woocommerce-verzendklasse en de Sendcloud-methode is niet zichtbaar in de Checkout. Wat gaat er mis?
A: Dit kan te maken hebben met de manier waarop je de prijzen hebt ingesteld voor de leveringsmethode in WooCommerce. Sendcloud verzendmethodes kunnen op dezelfde manier worden geconfigureerd als WooCommerce Flat Rate shipping.
Bijvoorbeeld, als je:
Zet de kosten op 0, voeg alleen een aangepaste prijsklasse toe:
- Leveringsmethode is zichtbaar in de Checkout, omdat hoofdkosten een waarde hebben
- Als er voor items in de winkelwagen geen aangepaste verzendklasse prijs is gedefinieerd; methode prijs is 0
- Als items een aangepaste verzendklasse hebben; de prijs voor deze aangepaste klasse wordt gebruikt
Zet de kosten op geen (laat het veld leeg), voeg alleen aangepaste prijsklassen toe:
- Als geen enkel artikel in de winkelwagen een aangepaste verzendklasse heeft; de leveringsmethode is verborgen
- Als een artikel in de winkelwagen die aangepaste leveringsklasse heeft, is de leveringsmethode beschikbaar
Let op: in de toekomst zullen we de mogelijkheid toevoegen om leveringsmethodes op basis van gewichtsklassen uit te schakelen.
Vraag: Waarom wordt de widget niet correct weergegeven?
Het shop thema kan interfereren met de stijl van de widget, waardoor de datum knoppen kleiner lijken, zoals in het onderstaande voorbeeld:
Om ervoor te zorgen dat de datum knoppen worden weergegeven zoals bedoeld, kun je deze stappen volgen:
- Ga naar Appearance in het Wordpress/WooCommerce-dashboard
- Klik op
Customize
-
Klik op
Additional CSS
in het thema-aanpassingsmenu - Plak de volgende regel in het tekstveld:
.sc-delivery-date-wrapper { display: block !important; }
De widget zou nu correct moeten worden weergegeven:
Let op: klik op Publiceren
om je wijzigingen op te slaan.
Vraag: Waarom wordt de servicepuntkiezer/widget niet correct weergegeven op mobiele weergave of kleine schermen?
Voor standaard mobiele formaten zou de servicepuntkiezer correct moeten worden weergegeven binnen de beschikbare schermruimte. In sommige WooCommerce-thema's kan de kiezer echter vervormd lijken, zoals in het onderstaande voorbeeld:
Dit is een gevolg van het daadwerkelijke thema dat wordt gebruikt en niet vanwege het ontwerp van de Sendcloud-servicepuntkiezer. Een tijdelijke oplossing is om de volgende aangepaste CSS op te nemen om ervoor te zorgen dat de widget een eigen rij krijgt:
.woocommerce-shipping-totals {
display: flex;
flex-direction: column;
}
.woocommerce-shipping-methods li {
flex-direction: column;
}
Vraag: Hoe kan ik de Checkout widget zo stylen dat het mijn brand weergeeft?
De Checkout widget is ontworpen om aan de toegankelijkheid normen te voldoen. We begrijpen echter dat je de stijl van de widget wilt aanpassen, zodat deze je brand weergeeft. Volg deze stappen om de standaard styling te overschrijven:
- Ga naar Appearance in het Wordpress/WooCommerce-dashboard
- Klik op
Customize
-
Klik op
Additional CSS
in het thema-aanpassingsmenu - Plak dit blok code in het tekstveld:
.sc-shipping-option.sc-shipping-option {
/* typografie */
--sc-font-size: 15px;
--sc-font-weight: inherit;
--sc-font-family: Georgia, serif;
/* kleuren */
--sc-accent-kleur: #d71c00;
--sc-accent-kleur-donker: #a30916;
--sc-focus-color: #e58722;
--sc-text-color: #fff;
-sc-dimmed-tekst-kleur: #d4d4d4;
--sc-achtergrondkleur: #fff;
--sc-leveringsdatum-achtergrondkleur: #323232;
--sc-border-color: #e7e7e7;
-sc-box-shadow-color: #1128570d;
--sc-sendcloud-logo-color: #c4c4c4;
/* diversen */
--sc-spacing: 4px;
--sc-border-width: 2px;
--sc-selected-border-width: 2px;
--sc-border-radius: 12px;
/* private */
--sc-item-width: 120px;
--sc-item-gap-width: 8px;
}
Je zult zien dat de widget stijl is veranderd:
Nu kun je de kleuren, het lettertype en -grootte aanpassen aan de stijl van jouw brand.
Wanneer je tevreden bent over het uiterlijk van je widget, klik je op Publiceren
.
Vraag: Hoe kan ik het logo of de geleverd door vervoerder [...] verbergen in de dagspecifieke levering widget?
Om het logo van de vervoerder (.sc-carrier_logo) of de geleverd door (.sc-carrier_by-line) te verbergen, moet je de volgende items toevoegen:
}
/* hide carrier logo */
.sc-carrier .sc-carrier__logo {
display: none;
}
/* hide delivered by carrier line */
.sc-carrier .sc-carrier__by-line {
display: none;
}
Zodra je display op 'none' hebt gezet, wordt het niet meer getoond in je checkout.
Vraag: Kan ik het uiterlijk van de publieke titel en publieke beschrijving van mijn verzendmethode stylen?
Je kunt nu het uiterlijk van de openbare titel en de openbare beschrijving van je verzendmethode stylen door middel van custom CSS.
- Ga naar Appearance in het Wordpress/WooCommerce dashboard
- Klik op
Customize
-
Klik op
Additional CSS
in het customization menu van het thema - Voer CSS custom properties in
Custom properties
sc-delivery-method-title
sc-delivery-method-description
Vraag: Kan ik de opmaak van de servicepunt kiezer wijzigen?
Als je een Servicepunt verzendmethode hebt gecreëerd voor je Dynamic checkout kun je de opmaak hiervan wijzigen door middel van CSS.
- Navigeer naar Appearance in het Wordpress/WooCommerce dashboard
- Klik op
Customize
-
Klik op
Additional CSS
in het theme personalisatie menu - Voeg je eigen CSS properties toe aan het
.sc-shipping-option
element
Voorbeeld:
.sc-shipping-option {
--sc-font-size: 1em;
--sc-font-family: Georgia, Times, serif;
--sc-border-radius: 0;
--sc-accent-color: #e24c00;
--sc-text-color: #ffffff;
--sc-dimmed-text-color: #afa6a6;
--sc-background-color: #111111;
--sc-panel-background-color: #232323;
--sc-border-color: #8a2b03;
}
Je kunt ook de opmaak van de servicepunt kiezer wijzigen door je shops default thema te overschrijden met de hulp van CSS. Let op: Zorg ervoor dat je de stijlen toevoegt na het link
element die naar je checkout-plugin-ui.css file refereert; anders, overschrijd de stylesheet je stijlen.
Beschikbare custom properties
De beschikbare custom properties die overschreden kunnen worden vind je hieronder:
Custom property / Default value
--sc-font-size
15px
--sc-font-size-small
14px
--sc-font-weight
inherit
--sc-font-family
inherit
--sc-spacing
4px
--sc-border-width
2px
--sc-border-color
#e7e7e7
--sc-border-radius
6px
--sc-border-color-dark
#bbbbbb
--sc-accent-color
#1d97ff
--sc-accent-color-dark
#095ca3
--sc-accent-color-light
#77c1ff
--sc-focus-color
#1d97ff
--sc-box-shadow-focus-color
#a5d5ff
--sc-text-color
#212121
--sc-alt-text-color
#112857
--sc-price-color
#03a678
--sc-dimmed-text-color
#686868
--sc-error-color
#b50000
--sc-error-box-shadow-color
#f8e6e6
--sc-background-color
#f7f8fa
--sc-panel-background-color
#ffffff
--sc-panel-border-hover-color
#a5d5ff
--sc-box-shadow-color
#1128570d
--sc-sendcloud-logo-color
#c4c4c4
--sc-button-text-color
#ffffff
--sc-button-background-color
#112857
--sc-button-background-hover-color
#4d5e81
--sc-button-border-color
#112857
--sc-button-border-width
1px
--sc-button-secondary-text-color
#112857
--sc-button-secondary-background-color
#ffffff
--sc-button-secondary-background-hover-color
#e8f5ff
--sc-button-secondary-border-color
#112857
--sc-button-secondary-border-width
1px
--sc-input-text-color
#212121
--sc-input-background-color
#ffffff
--sc-input-border-color
#112857
--sc-input-border-width
1px
--sc-radio-button-border-color
#112857
--sc-radio-button-background-color
#112857
--sc-location-suggestion-marker-color
#1d97ff
--sc-service-point-marker-color
#112857