WooCommerce producten vergelijken

Door Marc geplaatst op 8 juli 2022 (Aangepast op 1 augustus 2022)

Veel webshops maken gebruik van de mogelijkheid om als bezoeker eenvoudig producten met elkaar te kunnen vergelijken. Ok, de ene webshop slaag daar wat beter in dan de andere, maar vaak is het wel erg handig!

Met een WooCommerce webshop is het mogelijk om een productvergelijker aan te bieden. Helaas niet standaard, maar wel via een van de plugins die hiervoor aangeboden wordt. Een plugin die ik erg prettig vind is WPC Smart Compare. Out-of-the-box biedt deze plugin hele mooie functies om gratis en snel een mooie productvergelijker op te zetten.

In dit artikel laat ik je zien hoe je snel een productvergelijker toevoegt aan WooCommerce.

Kom je er niet helemaal uit of lukt het niet om de vergelijker exact naar wens in te stellen? Neem gerust contact met mij op via de website of stuur een WhatsAppbericht naar 06 – 106 34 377.

1. Download en installeer de plugin

• Om een productvergelijker toe te voegen maken we gebruik van de plugin WPC Smart Compare. Download de plugin door in WordPress te gaan naar Plugins > Nieuwe plugin.
• Vul WPC Smart Compare in het zoekveld in.
• Klik bij de plugin WPC Smart Compare op Nu installeren
• Wacht tot de installatie klaar is en klik op Activeren.

2. Instellingen plugin

Eenmaal geïnstalleerd verschijnt WPClever in het hoofdmenu van WordPress. Om de instellingen naar wens in te stellen ga je naar WPClever > Smart Compare.

De plugin bevat een heleboel instellingen, gelukkig zijn de meeste standaardopties al prima ingesteld. Wil je weten wat de opties betekenen, hieronder licht ik deze toe:

General

Deze sectie gaat over de algemene instellingen van de plugin.

Hide on cart & checkout page

Laat de vergelijkingstabel en -balk niet zien op de winkelwagenpagina en afrekenpagina. Deze optie laten we op Yes staan. Er wordt dan dus niets getoond. Dit heeft namelijk weinig toegevoegde waarde als de gebruiker al aan het afronden is.

Hide if empty

Verberg de vergelijkingstabel en -balk als er geen producten zijn geselecteerd. Deze opties zetten we op Yes.

Limit

Stel hiermee een limiet in voor het aantal producten dat vergeleken mag worden. Ik geef hier 10 op.

Compare page

Wil je een specifieke pagina instellen waar de productvergelijking op getoond wordt? Selecteer deze hier. Zorg er wel voor dat er op deze pagina de shortcode [woosc_list] geplaatst is. Deze optie is niet persé nodig, dus pas ik hier niets aan.

Compare button

Deze sectie gaat over de instellingen voor de knop / link waar men op kan klikken voor vergelijking.

Type

Kies hier of je een knop of linkje wilt tonen waar de gebruiker op klikt om een product toe te voegen aan een vergelijking.

Action

Wat moet er gebeuren als een gebruiker op de vergelijkknop of -link klikt? Standaard staat Open compare bar ingesteld. Dit houdt in dat geselecteerde producten onderaan in een balk worden weergegeven. Het is bijvoorbeeld ook mogelijk om de gebruiker door te sturen naar de vergelijkpagina. Ik vind dit niet zo gebruikersvriendelijk en daarom laat ik de instelling staan op Open compare bar.

Extra class

Deze optie is alleen interessant als je kennis hebt van werken met CSS. Zegt dit je niets, dan kun je deze optie gerust leeg laten.

Position on archive page

Kies de positie van de knop of link op de productcategoriepagina.

Position on single page

Kies de positie van de knop of link op de productpagina. Ik wil de vergelijkingsknop niet tonen op de productpagina, dus selecteer ik None (hide it). Dit kan overigens ook bij de vorige optie Position on archive page

Categories

Wil je de vergelijkknop niet overal tonen, maar enkel bij specifieke categorieën? Dan selecteer je hier alle gewenste categorieën. Houd de ctrl-knop (windows) of cmd-knop (Mac) ingedrukt en selecteer de categorieën.

Change button text

Wil je dat de tekst van de knop of link verandert als de gebruiker er op geklikt heeft? Bijvoorbeeld naar Geselecteerd. Dan zet je deze instelling op Yes. De tekst in kwestie stel je in bij Localization. Dit leg ik later in dit artikel verder uit.

Remove when clicking again

Moet het product worden verwijderd uit de vergelijking als men nogmaals op de vergelijk-knop klikt? Deze optie stel ik in op Yes. Op deze manier is het voor de gebruiker eenvoudiger om producten toe te voegen en te verwijderen van de vergelijking.

Compare sidebar

Deze sectie betreft een instelling voor de sidebar (waar we in deze uitleg geen gebruik van maken).

Position

Als je gebruikt maakt van de sidebar (zie Action bovenstaand) dan stel je hier in of deze rechts of links getoond moet worden. Aangezien we bij Action gekozen hebben voor de Compare bar (onderin beeld) kunnen we deze optie overslaan.

Compare table

In deze sectie vind je de instellingen voor de vergelijkingstabel.

Fields

Geef aan welke velden getoond mogen worden in de vergelijkingstabel. Je kunt ze allemaal aan laten staan, maar wellicht zitten er velden tussen die in jouw geval niet relevant zijn, vink deze dan uit.

Attributes

Alleen beschikbaar in de betaalde variant.

Custom attributes

Alleen beschikbaar in de betaalde variant.

Custom fields

Alleen beschikbaar in de betaalde variant.

Image size

Kies de grootte van de afbeelding in de vergelijking

Link to individual product

Stel in wat er gebeurt als men in de vergelijkingstabel op een product klikt. Standaard wordt de betreffende productpagina getoond in dezelfde browser tab. Dit vind ik zelf het meest gebruikersvriendelijk en laat ik dus zo staan.

“Settings” button

Kies hier of je de gebruiker nog een aantal extra instellingen wilt bieden voor de vergelijkingstabel. Ik zet deze instelling op No om de vergelijkingstabel zo eenvoudig mogelijk te houden.

“Remove” button

Geef de gebruiker wel of niet de mogelijkheid om een product in de vergelijkingstabel te kunnen verwijderen. Ik vind dit wel zo gebruiksvriendelijk dus laat ik deze instelling op Yes staan.

Freeze first column

Deze handige instelling laat de eerste rij met producttitels altijd in beeld staan. Zo behoud je als gebruiker overzicht wanneer je naar beneden scrollt. Handig! Dus ook deze instelling laat ik op Yes staan.

Freeze first row

Wanneer een gebruiker meer producten in de vergelijkingstabel plaatst dan het scherm kan weergeven, is het mogelijk om horizontaal door de producten te scrollen. Met deze optie wordt de eerste kolom (met daarin de titel van het veld) vastgezet zodat deze altijd in beeld blijft. Handig! Deze optie laat ik op Yes staan.

Use perfect-scrollbar

Deze optie past de scrollbar aan naar een strakker design. Niet persé nodig, wel leuk om te zien. Ik laat de optie op Yes staan.

Close button

Stel in of de close button (kruisje rechtsboven) wel of niet getoond moet worden. In vrijwel alle gevallen zal het voor een gebruiker erg vervelend zijn als er geen duidelijke knop is om de vergelijking te sluiten. Ook hier laat ik de optie dus op Yes staan.

Compare bar

In deze sectie pas je de Compare bar (de balk onderin) naar wens aan.

Open immediately

Vink deze optie aan, als de vergelijkingstabel op iedere pagina automatisch geopend moet worden (indien er producten in de vergelijking aanwezig zijn). Deze optie vink ik aan. De gebruiker hoeft dan niet te zoeken naar de vergelijkingstabel en als er niks wordt vergeleken heeft de gebruiker ook nergens last van.

Bubble

Met deze optie stel je in dat er alleen een knop wordt weergegeven in plaats van de volledige Compare bar (onderaan in beeld). Om eerlijk te zijn vind ik dit geen prettige optie zonder de enige technische aanpassingen (buiten de plugin om). Dus laat ik deze optie op Yes staan.

“Share” button

Deze optie voegt een knop toe met een deelbare link van de productvergelijking. In het geval van dit voorbeeld wil ik juist een eenvoudige productvergelijker bouwen zonder teveel afleiding. Deze optie zet ik daarom op No.

“Add more” button

De “Add more” button biedt een zoekfunctie om snel meer producten toe te voegen aan de vergelijker. Deze functie werkt verrassend goed. Toch wil ik de vergelijker zo simpel mogelijk houden en zet ik de instelling op No.

“Add more” count

Maak je gebruik van de bovenstaande instelling, dan stel je hier in hoeveel resultaten er maximaal getoond mogen worden.

“Remove all” button

Met de “Remove all” button wist een gebruiker alle producten uit de vergelijker. Dit vind ik een basisfunctie die er naar mijn idee altijd tussen moet staan. Deze laat ik daarom op Yes staan.

Background color

Stel hier de achtergrondkleur in van de Compare bar. Kies een kleur die past bij jouw huisstijl.

Button color

Kies een kleur voor de button in de Compare bar. Uiteraard moet deze kleur wel opvallen ten opzichte van de achtergrondkleur.

Position

Standaard wordt de Compare bar onderin getoond. Wil je deze toch liever bovenin plaatsen? Dan verander je Position naar Top.

Align

Kies of de inhoud van de Compare bar links of rechts uitgelijnd moet worden.

Click outside to hide

Kies of de Combare bar moet verdwijnen als de gebruiker ergens op klikt buiten de Compare Bar.

Menu

Menu(s)

Wil je een link naar de vergelijking toevoegen in een menu? Vink het menu dan hier aan.

Action

Geef aan wat er moet gebeuren als men op de link in het menu klikt.

Custom menu

Wil je de de knop in het menu extra laten opvallen? Dan geef je hier een aparte CSS class of id op. Vervolgens stel je via CSS de opmaak in.

Custom menu action

Geef aan wat er moet gebeuren als men op de custom menu link klikt.

Localization

General

Limit notice

Message

Added

Removed

Exists

Compare button

Button text

Button (added) text

Compare table

Remove

Close

Empty

Settings

Hide similarities

Highlight differences

Select fields description

Compare sidebar

Heading

Close

Remove

Button text

Continue shopping

Compare bar

Button text

Add product

Search placeholder

No results

Remove

Remove all

Remove all confirmation

Share

Share description

Share on

Share link was copied

Click outside

Fields

Image

SKU

Rating

Price

Stock

Availability

Add to cart

Description

Content

Weigth

Dimensions

Additional information

Attributes

Custom attributes

Custom fields

Menu

Menu item label