FacetWP titels gebruiken i.p.v. widget titels

Zoeken:

FacetWP facet titel gebruiken

FacetWP is een geavanceerde filtering plugin voor WordPress waarmee je snel en gemakkelijk zoekformulieren kunt maken voor je website. In dit artikel zullen we bespreken hoe je titels kunt toevoegen aan de FacetWP widgets, om je gebruikers een meer gebruiksvriendelijke ervaring te bieden.

Als je de titels van de opgegeven facets gebruikt en niet de standaard widget titel die toegevoegd wordt aan de shortcode is het voordeel dat je als er een lege facet getoond zal worden die geen resultaat geeft ook geen titel te zien krijgt.

Stap 1: code toevoegen
De eerste stap om titels aan je FacetWP widgets toe te voegen is door de volgende code toe te voegen aan de functions.php van je thema of in de Code Snippets plugin:

function fwp_add_facet_labels() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var $facet = $(this);
            var facet_name = $facet.attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];

            if ($facet.closest('.facet-wrap').length < 1 && $facet.closest('.facetwp-flyout').length < 1) {
                $facet.wrap('<div class="facet-wrap"></div>');
                $facet.before('<h3 class="facet-label">' + facet_label + '</h3>');
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_add_facet_labels', 100 );

FacetWP titel Deze functie maakt gebruik van jQuery om te handelen zodra FacetWP is geladen op de pagina. Voor elke facet op de pagina, haalt het de naam van het facet op en zoekt het bijbehorende label op uit de FacetWP instellingen.

Als het facet nog niet is ingepakt in een .facet-wrap div en het bevindt zich niet binnen een .facetwp-flyout, dan wordt het facet ingepakt en wordt het label voor het facet geplaatst.

Aanpassingen en styling

Na het implementeren van de code kun je verder gaan met het aanpassen van de labels en de styling ervan. Je kunt CSS regels toevoegen aan je thema om de labels te stylen naar wens. Bijvoorbeeld:

.facet-label { 
font-size: 16px; 
font-weight: bold; 
margin-bottom: 10px; 
}

FacetWP sorteeroptie in WooCommerce

FacetWP is een geavanceerde filteringplugin die gebruikt kan worden om krachtige en interactieve sorteeropties toe te voegen aan je WordPress WooCommerce site. Deze sorteerfunctie kan helpen de gebruikerservaring te verbeteren door klanten meer controle te geven over hoe producten worden weergegeven.

FacetWP sorteren implementeren

Voeg onderstaande code toe aan het functions.php bestand van je thema of gebruik de plugin Code Snippets om de code toe te voegen en te beheren.

// replace default woocommerce sort by 
if ( ! function_exists( 'woocommerce_catalog_ordering' ) ) {
    /**     * Output facet sort box instead of woocommerce's     */    

function woocommerce_catalog_ordering() {        
echo facetwp_display( 'sort' );    
}}

Code uitleg

Deze code controleert eerst of de functie woocommerce_catalog_ordering al bestaat. Als dit niet het geval is, wordt een nieuwe functie gedefinieerd.
Binnen deze functie vervangt echo facetwp_display( ‘sort’ ); de standaard WooCommerce sorteerfunctie met het FacetWP sorteervak, wat de gebruikers meer sorteeropties geeft.

Extra opties

FacetWP configureren: Na het toevoegen van de code, configureer de FacetWP plugin via de WordPress dashboard om de gewenste sorteeropties en -instellingen in te stellen.
Thema Aanpassen: Zorg ervoor dat je thema compatibel is met FacetWP en WooCommerce, en pas waar nodig het thema aan om een soepele integratie te garanderen.
Testen: Na configuratie en aanpassing van het thema, test de nieuwe sorteerfunctie grondig om zeker te zijn dat het naar behoren werkt en geen conflicten of problemen veroorzaakt.

Het integreren van de FacetWP sorteerfunctie in een WooCommerce website kan de zoekervaring van gebruikers aanzienlijk verbeteren. Door deze aanpassingen kan men een gebruikersvriendelijke productcatalogus creëren, wat uiteindelijk kan leiden tot een verhoogde klanttevredenheid en meer conversie.

Let wel op, voordat je wijzigingen aanbrengt in de code van je website, maak altijd een back-up van je website en voer wijzigingen eerst uit in een ontwikkelomgeving om mogelijke conflicten en problemen te voorkomen.

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.

Het instellen van een kleurenfilter met FacetWP: een stappenplan

FacetWP is een krachtige tool die het mogelijk maakt om geavanceerde filters toe te voegen aan je WordPress website, wat de gebruikerservaring verbetert door bezoekers van een webshop of website in staat te stellen om snel en gemakkelijk door de inhoud te navigeren.

In dit artikel zullen we bekijken hoe je een kleurenfilter kunt instellen met behulp van FacetWP, specifiek gericht op de kleur “roze”. In het screenshot zie je de kleurenfilter van sanitair webshop Sanitairkiezer.nl

Toegang tot de style.css of customizer

Om te beginnen, open de style.css van je thema of ga naar de customizer in je WordPress dashboard. Dit is waar je de noodzakelijke CSS zal toevoegen om het kleurenfilter te creëren.

CSS code toevoegen

Voeg de volgende CSS code toe aan de style.css van je thema of in de customizer:

.facet-wrap .facetwp-type-color [data-value="roze"],.flyout-item .facetwp-type-color [data-value="roze"] {    
    background-color: #cebb9e;
}
.facet-wrap .facetwp-type-color [data-value="roze"]::after,.flyout-item .facetwp-type-color [data-value="roze"]::after {    
    content: "Roze";
}

Tips voor FacetWP kleuren filter

Aanpassen van de kleur: Je kunt de background-color waarde aanpassen om verschillende kleuren te vertegenwoordigen. Zo kun je eenvoudig kleuren toevoegen of wijzigen naar wens.
Meerdere kleuren: Wil je meerdere kleuren toevoegen? Herhaal dan bovenstaande stappen voor elke kleur, en vervang de data-value en de content met de gewenste kleurnaam, en pas de background-color aan naar de juiste kleurcode.
Mobiele responsiviteit: Vergeet niet om te controleren hoe het kleurenfilter eruitziet en functioneert op mobiele apparaten om een consistente gebruikerservaring te garanderen. In FacetWP is dit de Mobile Flyout.
Optimalisatie: Optimaliseer de laadsnelheid van je website door de afbeeldingen te comprimeren en te zorgen voor een schone, efficiënte code.

Het instellen van een kleurenfilter met FacetWP is een rechttoe-rechtaan proces dat een aanzienlijke impact kan hebben op de functionaliteit en esthetiek van je website. Door het volgen van dit stappenplan kun je een effectief kleurenfilter implementeren, waardoor de navigatie voor je bezoekers vergemakkelijkt wordt in jouw WordPress webshop.

FacetWP shortcode via hook in WordPress laden

FacetWP is een geavanceerde filtering plugin voor WordPress die gebruikt wordt om dynamische filtering toe te voegen aan je posts, producten en andere custom post types. Om een shortcode van FacetWP te laden, kan een actie hook worden toegevoegd aan het functions.php bestand van je thema of via de plugin ‘Code Snippets’.

Stapsgewijze instructie

Open het functions.php bestand van je thema Je kunt de functions.php van je thema bewerken via de WordPress dashboard onder ‘Weergave’ > ‘Thema-editor’, of je kunt het bestand rechtstreeks bewerken met een teksteditor als je toegang hebt tot de bestanden van de website.
Voeg de benodigde code toe Kopieer en plak de volgende code in het functions.php bestand. De locatie waar de shortcode verschijnt, kun je wijzigen door woocommerce_before_shop_loop te vervangen voor een andere hook.

function name_snippet() {
    echo do_shortcode('');
}

add_action( 'woocommerce_before_shop_loop','name_snippet',1 );

Kies een andere hook indien nodig De hook woocommerce_before_shop_loop bepaalt waar de FacetWP shortcode wordt geladen. Indien je een andere locatie wilt, vervang je deze hook met een andere, afhankelijk van je behoeften en het gebruikte thema.

Gebruik van code snippets plugin

In plaats van de code rechtstreeks in functions.php te plaatsen, kun je de WordPress plugin ‘Code Snippets’ gebruiken. Deze plugin biedt een duidelijke interface om aangepaste PHP code snippets toe te voegen, waardoor het risico op fouten vermindert. Met deze plugin kun je gemakkelijk code snippets activeren en deactiveren, en is het mogelijk om fouten snel te herstellen.

Code Snippets

Overzicht van actie hooks

Action hooks in WordPress stellen ontwikkelaars in staat om eigen code toe te voegen of bestaande functionaliteiten aan te passen zonder de originele bestanden te wijzigen. Dit zorgt ervoor dat je aanpassingen niet verloren gaan bij een thema- of plugin-update.

Het laden van een FacetWP shortcode via een hook is een effectieve manier om geavanceerde filters toe te voegen aan je WordPress website of WooCommerce webshop.

Activeren van open categorieën in FacetWP

FacetWP is een krachtige plugin voor WordPress die geavanceerde filters en zoekfunctionaliteit aan WordPress websites toevoegt. In dit artikel bespreken we hoe je de actieve categorie automatisch kunt openen met behulp van een stukje JavaScript code. Als je op een categoriepagina in je webshop komt en deze productcategorie heeft subcategorieën dan worden deze automatisch getoond, onafhankelijk van de instellingen in de FacetWP plugin.

Hoe de code werkt

De code voegt een JavaScript toe aan de voettekst van de WordPress website via een add_action hook die gehecht is aan de wp_footer. Wanneer de FacetWP plugin geladen is, wordt er een eventlistener toegevoegd die een klik event triggert op elke actieve (aangevinkte) checkbox facet, waardoor deze wordt geopend en de bijbehorende subcategorieën of opties worden getoond.

Code voor FacetWP

De onderstaande code kan worden toegevoegd aan de custom hooks plugin van FacetWP of bijvoorbeeld in de functions van je child thema.

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
    fUtil('.facetwp-checkbox.checked > .facetwp-expand').trigger('click');
});
</script>
<?php
}, 1000 );

Uitvoering

Navigeer naar de custom hooks plugin van FacetWP.
Open de plugin editor en voeg de bovenstaande code toe.
Sla de wijzigingen op en bekijk je website om te zien of de actieve categorie automatisch opent.

Extra uitleg

add_action( ‘wp_footer’, function() {…}, 1000 );: Hiermee wordt de JavaScript-code toegevoegd aan de voettekst van je website. De 1000 geeft de prioriteit van de actie aan. Een hoger getal betekent een lagere prioriteit, dus de code wordt later uitgevoerd.
document.addEventListener(‘facetwp-loaded’, function() {…});: Deze regel voegt een event listener toe die wacht tot FacetWP volledig is geladen voordat de binnenste functie wordt uitgevoerd.
fUtil(‘.facetwp-checkbox.checked > .facetwp-expand’).trigger(‘click’);: Hier wordt de klik event getriggerd op de .facetwp-expand elementen die zich binnen de gecontroleerde .facetwp-checkbox elementen bevinden.

Door bovenstaande stappen te volgen, kun je gemakkelijk de actieve categorieën in FacetWP automatisch openen, waardoor gebruikers sneller en efficiënter kunnen navigeren en de benodigde informatie kunnen vinden. Het is een handige manier om de gebruikerservaring op websites die gebruik maken van de FacetWP plugin te verbeteren.

Aanpassen van label tekst in FacetWP

FacetWP is een geavanceerde filtering-plugin voor WordPress die gebruikers helpt bij het aanmaken van betere zoek- en filterinterfaces. Een vaak voorkomende behoefte bij het aanpassen van FacetWP is het veranderen van de labeltekst.

Als je de FacetWP sorteeropties gebruikt kun je de label met deze code aanpassen. De label is hetgene wat je ziet als er geen keuze gemaakt is. Dus wat standaard zichtbaar is als je een sorteeroptie voor het eerst bekijkt.

Stap 1: code toevoegen

Om de labeltekst van FacetWP te wijzigen, moet je de volgende code toevoegen aan het functions.php bestand van je thema of via een plugin zoals Code Snippets.

add_filter( 'facetwp_sort_options', function( $options, $params ) {
$options['default']['label'] = 'Label titel';
    return $options;
}, 10, 2 );

In deze code, is ‘Label titel’ de nieuwe tekst die je wilt weergeven als label. Verander dit naar de gewenste tekst.

Stap 2: code snippets plugin

Als je niet comfortabel bent met het direct bewerken van het functions.php bestand (wat riskant kan zijn als je een fout maakt), kun je de Code Snippets plugin gebruiken. Deze plugin laat je PHP-code snippets toevoegen zonder het bewerken van themabestanden.

Installeer en activeer de plugin.
Voeg een nieuwe snippet toe en kopieer bovenstaande code erin.
Sla de snippet op en activeer deze.

Stap 3: verander de label tekst

Na het toevoegen van de code, verander de ‘Label titel’ naar wat je wilt dat het label weergeeft. Bijvoorbeeld, als je wilt dat het label ‘Sorteer op’ weergeeft, zou de code als volgt zijn:

$options['default']['label'] = 'Sorteer op'<;

Aanvullende opties

Je kunt ook andere aspecten van de facetten aanpassen met soortgelijke filters en acties, afhankelijk van je behoeften. FacetWP biedt veel flexibiliteit en aanpassingsopties, zodat je de gebruikerservaring kunt optimaliseren en afstemmen op de inhoud van je website.

Bovendien is het altijd goed om wijzigingen in een child-thema van je WordPress webshop aan te brengen om te voorkomen dat updates je aanpassingen overschrijven. Als je een fout maakt of als er iets misgaat na het toevoegen van de code, is het belangrijk om toegang te hebben tot bestandsherstelopties of een back-up van je website om verlies van gegevens te voorkomen.

Het aanpassen van de labeltekst in FacetWP kan gemakkelijk worden gedaan door een klein stukje code toe te voegen aan het functions.php bestand van je thema of via de Code Snippets plugin.

Uitverkochte producten in FacetWP filters

FacetWP is een geavanceerde filtering plugin die het voor gebruikers mogelijk maakt om snel en efficiënt te zoeken door producten of berichten op een website. Een van de aspecten van deze plugin is de mogelijkheid om uitverkochte producten al dan niet in de zoekresultaten te tonen. Deze optie is toegankelijk via de ‘Settings’ in de plugin interface.

Uitverkochte producten tonen in Facet template

Navigeren naar instellingen: ga naar de ‘Settings’ tab van FacetWP in uw WordPress dashboard.
Selecteer facet instellingen: in de facet instellingen is er een optie om uitverkochte producten wel of niet te tonen.
‘Include all products’ optie: hier vindt u de optie ‘Include all products’. Wanneer u deze optie activeert, zal FacetWP ook uitverkochte producten in de filterresultaten weergeven.

Uitbreiding van informatie

Het tonen van uitverkochte producten kan in sommige gevallen voordelig zijn. Klanten kunnen zien welke producten er normaliter beschikbaar zijn en mogelijk een notificatie instellen voor wanneer het product weer op voorraad is. Bovendien kan het klanten de kans geven om alternatieve producten te bekijken.

Echter, er kunnen ook nadelen kleven aan het tonen van uitverkochte producten. Dit kan leiden tot frustratie bij klanten als veel van de getoonde producten niet beschikbaar zijn voor aankoop. Daarom is het essentieel om een balans te vinden en te overwegen welke optie het best past bij de behoeften en verwachtingen van de klant. FacetWP biedt een scala aan aanpassingsmogelijkheden, waaronder de mogelijkheid om de weergave van filters en zoekresultaten te wijzigen.

Bijvoorbeeld, als een webshop hoofdzakelijk seizoensgebonden producten verkoopt, kan het zinvol zijn om uitverkochte producten te verbergen om verwarring te voorkomen. Daarentegen, als de producten regelmatig worden aangevuld, kan het handig zijn om deze te tonen met een melding dat het product binnenkort weer beschikbaar is.

Gravity Forms is dé premium oplossing voor iedereen die op zoek is naar uitgebreide en professionele formulieren voor WordPress websites. Deze plugin maakt het mogelijk om, met behulp van een shortcode, snel en gemakkelijk professionele formulieren te creëren en te plaatsen op je website. Hierdoor mis je geen potentiële klanten die informatie willen ontvangen, een afspraak willen maken, of andere acties willen ondernemen.

Gravity Forms: professionele formulieren voor WordPress

In een zee van gratis plugins vraag je je misschien af: “Waarom zou ik kiezen voor deze betaalde plugin?” Voor eenvoudige formulieren voldoen veel gratis plugins inderdaad. Echter, wanneer je behoefte hebt aan meer geavanceerde mogelijkheden, springt Gravity Forms erbovenuit.

Gravity Forms

Enkele van de unieke en nuttige functies die Gravity Forms biedt zijn:

HTML gebruik: Voeg HTML toe aan je formulieren voor meer maatwerk.
Formulieren van meerdere pagina’s: Creëer formulieren die over meerdere pagina’s verspreid zijn.
Inzendingslimieten: Stel een limiet in voor het aantal inzendingen per formulier.
Bestand uploads: Sta gebruikers toe om bestanden te uploaden via het formulier.
Diverse selectieopties: Maak keuzelijsten, radio buttons, en meer.
iDeal integratie: Koppel formulieren aan iDeal voor betalingen.
Inzending naar artikelen: Zet ingezonden formulieren om naar WordPress posts.
Inzendingsoverzicht: Bekijk een overzicht van alle ingezonden formulieren.
Exporteren en importeren: Eenvoudig formulieren exporteren en importeren tussen sites.

Voordelen van Gravity Forms

Gebruiksvriendelijkheid: De interface is intuïtief, waardoor het ontwerpen van formulieren een fluitje van een cent wordt.
Responsiviteit: Formulieren gemaakt met Gravity Forms zijn responsief en werken naadloos op alle apparaten.
Integraties en Add-ons: Gravity Forms biedt een breed scala aan add-ons en integraties met derde partijen zoals MailChimp en PayPal, waardoor de functionaliteit verder uitgebreid wordt.
Klantondersteuning: Gebruikers van Gravity Forms hebben toegang tot deskundige klantondersteuning voor eventuele problemen of vragen.

Gravity Forms biedt een verscheidenheid aan geavanceerde functies die het onderscheiden van gratis formulier plugins. Het is een ideale keuze voor diegenen die meer willen dan alleen een simpel contactformulier. Door te kiezen voor deze professionele plugin, investeer je in de kwaliteit en betrouwbaarheid van je website en verhoog je de kans om meer leads en klanten te verwerven.

Als je nieuwsgierig bent geworden dan kan je ook hier een demo uitproberen.

Voor verdere uitleg hebben wij een artikel geschreven.