Standaard FacetWP checkbox vervangen met SVG afbeelding
FacetWP, een geavanceerde filtering plugin voor WordPress, biedt verschillende stijlopties, waaronder de mogelijkheid om de standaard checkbox te vervangen door een aangepaste afbeelding in SVG-formaat.
1. CSS toevoegen
Om dit te realiseren, moet je eerst de onderstaande CSS code toevoegen aan het style.css bestand van je thema, of direct in de Customizer van WordPress. Deze code zorgt ervoor dat de standaard checkbox wordt vervangen door een aangepaste afbeelding.
.facetwp-checkbox {
background: url("/wp-content/uploads/afbeelding.svg") !important;
background-size: 8% !important;
background-repeat: no-repeat !important;
padding-left: 30px !important;
}
.facetwp-checkbox.checked {
background: url("/wp-content/uploads/afbeelding.svg") !important;
background-size: 8% !important;
background-repeat: no-repeat !important;
padding-left: 30px !important;
}2. Controleer het bestand
Controleer zorgvuldig het pad naar de afbeelding en zorg ervoor dat de naam van het bestand correct is. Het pad in bovenstaande voorbeeldcode is /wp-content/uploads/afbeelding.png. Vervang dit pad en de bestandsnaam door het juiste pad naar jouw aangepaste afbeelding.
3. CSS code aanpassen
Je kunt de code naar wens aanpassen. Bijvoorbeeld, je kunt background-size veranderen om de grootte van de afbeelding aan te passen, en padding-left om de ruimte aan de linkerkant van de checkbox te wijzigen. Zorg ervoor dat je de veranderingen opslaat nadat je de aanpassingen hebt gedaan.
4. Wijzigingen bekijken
Na het opslaan van de wijzigingen, is het belangrijk om je website te bezoeken en te controleren of de nieuwe SVG correct wordt weergegeven. Zo niet, controleer dan of het pad naar de afbeelding correct is en of er geen fouten zijn in de CSS-code.
Het gebruiken van SVG voor checkboxen in FacetWP is een goede manier om de visuele presentatie van je filters in je webshop te verbeteren en de gebruikerservaring op je WordPress website te verrijken.
In de screenshot in dit artikel zie je een voorbeeld van aangepaste checkboxen in de zilveren oorbellen webshop van Bohostijl.nl.
En vergeet natuurlijk niet om regelmatig je plugins te updaten. Of sluit een WordPress onderhoudscontract bij ons af.