Hoe vooraf ingestelde sjablonen te gebruiken om wenslijstknoppen te stylen

Heeft uw winkel een design-verfrissing nodig, maar heeft u geen tijd om elke pixel handmatig aan te passen? Het kiezen van de juiste look voor uw Toevoegen aan wensenlijst knoppen zou geen tijdrovende klus moeten zijn.

Met de instellingen voor Configuratiemodus in SaveTo Wishlist kunt u uw wensenlijstknoppen in seconden professioneel stylen. Of u nu directe Stijlsjablonen wilt gebruiken of in Aangepaste instellingen wilt duiken, u heeft nu de volledige controle over hoe uw knoppen verschijnen op product-, winkel- en winkelwagenpagina's.

Aan het einde van deze handleiding weet u hoe u tussen ontwerpmodi kunt schakelen en uw winkel een samenhangende, professionele uitstraling kunt geven die perfect bij uw merk past.

Vereisten

• SaveTo Wishlist Lite geïnstalleerd en actief.
• Administrator toegang tot uw WordPress-dashboard.
• WooCommerce geïnstalleerd en geconfigureerd.

Waarom knopstijl-presets gebruiken?

Snelheid en consistentie zijn essentieel voor elke groeiende WooCommerce winkel. Wanneer uw knoppen er goed uitzien en identiek functioneren op alle pagina's, wekt dit vertrouwen bij uw klanten.

Presets besparen tijd. U kunt knoplooks direct wisselen zonder handmatige CSS of kleurselectie. En omdat elke paginalocatie onafhankelijk is, kunt u afzonderlijk verschillende ontwerpen toepassen op de pagina's Product, Winkel en Winkelwagen.

💡 Tip:
Als u de voorkeur geeft aan een volledig unieke look, kunt u nog steeds een sjabloon als "basis" gebruiken en vervolgens de kleuren achteraf aanpassen!

1. Toegang tot de tabbladen voor knopstijlen

We hebben de instellingen georganiseerd in eenvoudig te beheren categorieën, zodat u elk deel van uw winkel afzonderlijk kunt stylen.

1. Navigeer naar SaveTo Wishlist → Instellingen.
2. Ga naar het tabblad Knop Plaatsing & Stijlen.
3. Drie secties verschijnen: Product, Winkel en Winkelwagen. Klik op degene die u wilt bewerken.

2. Kies uw configuratiemodus

Elke locatie heeft een Configuratiemodus radio-selector. Hier bepaalt u hoeveel controle u wilt:

1. Selecteer Sjablonen gebruiken om de galerij met wensenlijstknop-sjablonen te bekijken.
2. Selecteer alternatief Aangepaste instellingen als u de sjablonen wilt overslaan en de handmatige kleurkiezers wilt gebruiken.

3. Pas een vooraf ingesteld sjabloon toe

Selecteer binnen elke sectie het tabblad Sjablonen gebruiken onder de optie Configuratiemodus.

1. Blader door de beschikbare sjablonen (bijv. "Klassiek Rood", "Minimaal Donker" of "Modern Paars").
2. Klik op een sjabloon om het toe te passen. Het gereedschap werkt automatisch de vorm, rand en standaardindeling van de knop bij.

4. Stem uw kleuren fijn op elkaar af

Als u Aangepaste instellingen kiest, wordt de sjabloonkieser vervangen door individuele ontwerpcontroles. Gebruik deze om uw knop vanaf nul op te bouwen of een sjabloon "basis" aan te passen.

1. Typografie & Grootte: Stel de exacte Tekstgrootte en Icoon Grootte in.
2. Kleurkiezers: Kies handmatig uw Achtergrondkleur, Tekstkleur en Icoon Kleur.
3. Rand & Vorm: Pas de randbreedte, kleur en hoekafgerondheid aan.
4. Knopicoon: Kies het symbool dat de knop gebruikt. De keuzes zijn Hart, Ster, Bladwijzer, Plus en Aangepaste afbeelding. Hart is de standaard, en het knoptype bepaalt nog steeds de lay-out en het gewicht, dus dit verandert alleen de vorm.
5. Aangepast knopicoon: Verschijnt zodra u Aangepaste afbeelding kiest en laat u uw eigen symbool uploaden. Het kiezen van Aangepaste afbeelding verbergt ook de instellingen voor de pictogramkleur, omdat die niet van toepassing kunnen zijn op een geüploade afbeelding. De knop blijft een hart tonen totdat u daadwerkelijk een afbeelding kiest, dus upload er een om de wijziging te voltooien.
6. De kleurkiezer blijft open terwijl u werkt, waardoor het sneller is om verschillende tinten te vergelijken zonder het menu herhaaldelijk te sluiten.

5. Pas onafhankelijke stijlen toe

Vergeet niet dat u stijlen kunt mixen en matchen voor verschillende contexten!

1. Gebruik een grote Aangepaste knop op uw Productpagina om deze de primaire call-to-action te maken.
2. Pas de Minimale Preset toe op uw Winkelpagina om uw productraster schoon en overzichtelijk te houden.
3. Selecteer de Moderne Preset op de Winkelwagenpagina om klanten aan te moedigen items te bewaren voor later in plaats van ze te verlaten.

6. Sla uw wijzigingen op en bekijk ze

1. Klik op Wijzigingen opslaan onderaan de pagina.
2. Bezoek uw winkel en een productpagina om uw nieuwe knopstijlen in actie te zien!

Veelvoorkomende problemen oplossen

⚠︎ De preset heeft mijn knopkleur niet veranderd.
Presets regelen voornamelijk de structuur en sjabloon van de knop. Als u eerder een “Aangepaste Kleur” hebt ingesteld, wordt die kleur vervangen. Werk de kleurkiezerinstellingen rechtstreeks bij vanuit het subtabblad Aangepaste Instellingen om ervoor te zorgen dat uw merk kleuren worden toegepast op de nieuwe sjabloon.

⚠︎ De knop ziet er anders uit op mijn mobiele telefoon.
Sommige WordPress-thema's hebben zeer sterke “Globale Stijlen” die proberen plug-in knoppen te overschrijven. Als uw knop “ingekaderd” lijkt of het lettertype te klein is, probeer dan een andere preset of controleer de knopinstellingen van uw thema.

Als uw paginalay-out niet wordt bijgewerkt na het opslaan, wis dan de cache van uw site. Zie voor meer informatie de officiële WooCommerce-gids voor het wissen van caches.

Veelgestelde vragen

Wanneer moet ik de Preset-modus gebruiken in plaats van de Custom-modus?
Gebruik de Preset-modus als u snel een gegarandeerd “goed” ontwerp wilt. Gebruik de Custom-modus als uw merk niet-standaard kleuren gebruikt of als u wilt dat de knop een zeer specifieke grootte heeft.

Heeft het wijzigen van de Preset van de Winkelpagina invloed op de Productpagina?
Nee. Elke paginalocatie (Product, Winkel, Winkelwagen) is 100% onafhankelijk, dus u kunt elk gebied van uw winkel afzonderlijk aanpassen.

Verwijdert het selecteren van een nieuwe preset mijn eerdere aangepaste kleuren?
Ja, als u de wijziging bevestigt, worden uw huidige instellingen vervangen door de standaardstijlen van de geselecteerde preset. Nadat u de preset hebt toegepast, kunt u de kleuren nog steeds bijwerken via het subtabblad Aangepaste instellingen.

Wat nu te doen

Presets houden de knopstijlen consistent in uw winkel zonder handmatige kleuraanpassingen, en elke paginalocatie blijft onafhankelijk, zodat u ze afzonderlijk kunt aanpassen.

Zodra de knoppen er goed uitzien, kunt u wijzigen wat er gebeurt wanneer een klant erop klikt. Stel de knopactie in via de sectie Wenslijstactie van het tabblad Algemeen, beschreven in Hoe "Toevoegen aan wenslijst" vervagingsmeldingen in te schakelen.