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.

FacetwP Checkbox3. 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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.