met WooCommerce shortcodes kunt u informatie uit uw winkel op nieuwe en spannende manieren weergeven. WooCommerce wordt vooraf gebouwd met shortcodes en u kunt plugins installeren om meer toe te voegen. Of u nu producten in een tabel wilt weergeven, de winkelwagen ergens op uw site wilt weergeven, of iets anders – u bent hier aan het juiste adres!
u bent waarschijnlijk eerder shortcodes tegengekomen, of u nu nieuw bent bij WordPress of het al enige tijd gebruikt. Shortcodes zijn, zoals de naam al doet vermoeden, korte stukjes code die een soort van functie uit te voeren. WooCommerce shortcodes, bijvoorbeeld, kunt u nette WooCommerce-gerelateerde functies toe te voegen aan WordPress pagina ‘ s, berichten, sidebars, en widgetized gebieden op uw website.
Als u op zoek bent naar een manier om de winkelervaring te vereenvoudigen, kunt u dit doen met WooCommerce shortcodes. Zij kunnen u helpen bij het verbeteren van de aankoop van gebruikersstromen en het optimaliseren van uw online winkel voor conversies.
u kunt bijvoorbeeld WooCommerce shortcodes gebruiken om:
- Een lijst van uw best beoordeelde producten op uw homepage weer te geven.
- Toon gerelateerde producten wanneer een klant een belang in een product te kennen geeft.
- Markeer aanbevolen producten in Gutenberg blokken, sidebars, andere widgetized gebieden.
met dit in gedachten, in deze complete gids, zullen we uitleggen hoe u WooCommerce shortcodes kunt gebruiken om betere gebruikerservaringen te leveren en uw bottom line te laten groeien. Onderweg leggen we ook uit wanneer (en waarom) je elke shortcode moet gebruiken. We zullen kijken naar de shortcodes die worden geleverd met WooCommerce zelf, en shortcodes die u kunt toevoegen met andere plugins.
hoe WooCommerce shortcodes te gebruiken
Shortcodes lijken en klinken een beetje technisch, maar ze zijn eigenlijk ontworpen voor iedereen om te gebruiken. Je hebt geen programmeervaardigheden nodig.
plaats eenvoudig de shortcode in een teksteditor binnen WordPress, of in een ‘Shortcode’ blok als u Gutenberg of een pagina bouwer zoals Elementor of Visual Composer gebruikt:
u kunt shortcodes combineren en meerdere shortcodes op één pagina weergeven. U kunt bijvoorbeeld de shortcode voor het volgen van bestellingen combineren met de shortcode voor gebruikersaccounts. Het enige wat je hoeft te doen is beide shortcodes op dezelfde pagina invoegen. Het zou er ongeveer zo uitzien:
WooCommerce Product list shortcodes
Er zijn ook shortcodes om producten op verschillende manieren weer te geven in uw winkel. Deze voegen extra flexibiliteit toe, zodat u niet vastzit met de beperkte weergaven die u krijgt op de winkel-en categoriepagina ‘ s. In plaats daarvan kunt u gebruik maken van WooCommerce shortcodes om een of meer producten letterlijk overal op uw WordPress site – hetzij in een raster of tabel gebaseerde lijstweergave.
WooCommerce-producten shortcode
WooCommerce heeft een shortcode waarmee u specifieke producten in een rasteropmaak kunt weergeven:
. U kunt er ook andere parameters aan toevoegen (zoals orderby en kolommen) om het uiterlijk van de front-end aan te passen.
u kunt het aantal producten per rij kiezen dat u wilt weergeven. Als u bijvoorbeeld zes producten in drie kolommen in oplopende volgorde op datum wilt weergeven, gebruikt u de shortcode: . Evenzo, voor het weergeven van producten in aflopende volgorde, zou je gewoon ASC vervangen door DESC.
WooCommerce quick view shortcode
de shortcode werkt naadloos samen met de WooCommerce Quick View Pro plugin. Dit voegt quick view knoppen aan de lijst met producten als een snelle manier om mensen in staat om hun aankoop te maken zonder het verlaten van de huidige pagina:
het enige wat u hoeft te doen is de WooCommerce Quick View Pro-plugin installeren op uw WordPress-site en het zal automatisch quick view-knoppen toevoegen aan de front-end. Op deze manier kunnen klanten productattributen en variaties zien en producten toevoegen aan winkelwagen zonder te navigeren naar de enkele productpagina.
Lees onze volledige handleiding voor de WooCommerce Quick View Pro shortcode.
WooCommerce producttabel shortcode
terwijl de ingebouwde WooCommerce-producten shortcode vrij flexibel is, kunt u ze alleen in een rasteropmaak weergeven. Dat is niet ideaal voor winkels die meer producten per pagina willen laten zien, bijvoorbeeld als u een snel bestelformulier van één pagina of groothandel winkel maakt. In dat geval, je misschien beter af met een product tabel shortcode.
hoewel WooCommerce zelf geen shortcode voor producttabel heeft, kunt u er eenvoudig een toevoegen met de WooCommerce-plug-in voor producttabel. De basis shortcode is en u kunt dit instellen met behulp van meer dan 50 shortcode opties.
bekijk de volledige lijst met shortcode-opties die u krijgt met de producttabel van WooCommerce.
WooCommerce toevoegen aan winkelwagen shortcode
WooCommerce wordt geleverd met een ingebouwde shortcode waarmee u een knop Toevoegen aan winkelwagen kunt invoegen voor een specifiek product waar u maar wilt. Voeg gewoon de ID en / of SKU van het product dat u wilt weergeven de knop Toevoegen aan winkelwagen voor:
Als u de prijs van het product wilt opnemen, gebruik dan:
voor eenvoudige producten wordt een knop Toevoegen aan winkelwagen weergegeven.
voor variabele producten toont het een knop ‘selecteer Opties’:
persoonlijk vind ik dit niet leuk omdat klanten de productpagina moeten bezoeken om hun variaties te kiezen. Het is beter om WooCommerce producttabel te gebruiken om een of meer variabele producten in een tabel op te nemen, compleet met variation dropdowns:
op die manier kunnen klanten opties selecteren en aan de winkelwagen toevoegen vanaf de pagina waar ze zich momenteel bevinden.
productcategorie shortcode
de productcategorie shortcode bevat producten uit een specifieke categorie in een standaard rasteropmaak.
Dit is de shortcode voor het:
als de rasterindeling u niet bevalt, of als u meer controle wilt over welke informatie over elk product moet worden weergegeven, dan kunt u gebruik in plaats daarvan de WooCommerce producttabel shortcode. De WooCommerce Product Table plugin wordt geleverd met een categorie shortcode optie, die u kunt gebruiken om een lijst van producten uit specifieke categorieën alleen:
In tegenstelling tot de ingebouwde shortcode die bij WooCommerce wordt geleverd, kunt u kiezen welke kolommen met informatie over elk product worden weergegeven, en klanten toestaan om variaties en hoeveelheden rechtstreeks uit de producttabel te selecteren. Dit maakt winkelen veel sneller en verhoogt uw conversie.
WooCommerce productcategorieën shortcode
de productcategorieën shortcodes geven uw productcategorieën weer, in plaats van de producten erin. Bijvoorbeeld:
geeft een lijst van 4 van uw WooCommerce-categorieën, geordend op naam.
laten we eens kijken naar enkele attributen en shortcodes die bij productcategorieën horen:
- limit bepaalt het aantal categorieën dat wordt weergegeven.
- orderdoor bepaalt de sorteervolgorde; “name” en “date” zijn geldige opties.
- volgorde staat voor de volgorde van productcategorieën, d.w.z. ” ASC ” of “DESC”.
- kolommen tonen het aantal kolommen waarin de categorieën zijn gerangschikt.
- hide_empty wordt gebruikt voor het verbergen van productcategorieën zonder producten.met
- parent kunt u alleen productcategorieën van het hoogste niveau weergeven.
- id ’s geven aan dat Categorie-ID’ s kunnen worden ingesteld op basis van alleen de output gespecificeerde resultaten.
recente producten
de shortcode recente producten van WooCommerce toont de producten die u onlangs aan uw online winkel hebt toegevoegd.
Dit is de shortcode voor recente producten:
Als u echter de werkelijke datum wilt weergeven waarop het product aan uw online winkel is toegevoegd, of als u meer controle wilt, dan kunt u de WooCommerce Product Table plugin in plaats daarvan.
bestel eenvoudig de producttabel op datum in aflopende volgorde, en gebruik het productlimietnummer om te bepalen hoeveel producten moeten worden opgenomen:
Als u een datumkolom in de tabel opneemt, kunnen klanten eenvoudig zien welke producten onlangs aan de winkel zijn toegevoegd.
aanbevolen producten
De aanbevolen producten shortcode voor WooCommerce kunt u lijst aanbevolen producten afzonderlijk van de rest van uw winkel. Gebruik het om een lijst met aanbevolen producten waar u maar wilt, bijvoorbeeld in blogberichten of andere pagina ‘ s.
Uitgelichte producten zijn WooCommerce-producten met een blauw sterpictogram op de pagina Alle producten:
Dit is de shortcode voor het tonen van Uitgelichte producten: . De uitvoer moet er ongeveer zo uitzien:
opnieuw, als u het afbeeldingsraster niet leuk vindt, kunt u een lijst met featured products met behulp van de WooCommerce Product Table plugin shortcode in plaats daarvan:
deze lijsten met featured products in een tabel lay-out, met welke kolommen met informatie die u hebt gekozen op de plugin instellingen pagina.
WooCommerce sale products shortcode
met de sale products shortcode kunt u producten presenteren die momenteel te koop zijn. U kunt eenvoudig weergeven met behulp van de shortcode:
Verkochte producten shortcode
Gebruik de volgende WooCommerce shortcode voor het weergeven van uw all-time best verkopende producten in een raster:
De quick view-knoppen worden weergegeven op de front-end als u de WooCommerce Quick View Pro plugin geïnstalleerd op uw WordPress site.
Als u liever een tabel lay-out dan kunt u ook Lijst bestseller of populaire producten met de WooCommerce Product tabel shortcode als volgt:
Lees onze volledige tutorial over hoe populaire producten met WooCommerce Product tabel Lijst.
best beoordeelde producten
u kunt de best beoordeelde producten shortcode gebruiken samen met WooCommerce ‘ s ingebouwde reviews en ratings functie om uw best beoordeelde producten te presenteren. Gebruik de shortcode:
U kunt ook een lijst van de best beoordeelde producten in een tabelweergave met de WooCommerce Tabel Product shortcode:
Verwante producten shortcode
Verwante producten zijn een lijst van producten die vergelijkbaar zijn met het product dat door de klant is te browsen. Deze verschijnen direct onder het hoofdproduct op de enkele productpagina, maar u kunt de shortcode voor WooCommerce-gerelateerde producten gebruiken om elders gerelateerde producten op te sommen.
Gebruik de shortcode om gerelateerde producten overal op uw WordPress site weer te geven.
Voeg toe aan winkelwagen knop shortcode
de WooCommerce shortcode laat u de prijs en voeg toe aan winkelwagen knop voor een enkel product op basis van zijn ID. Hier is hoe het eruit ziet op de front-end:
u kunt overwegen dit toe te voegen aan een widgetized gebied op uw online winkel of een blog post.
deze shortcode werkt met de WooCommerce Quick View Pro plugin. Wanneer u beide plug-ins samen te gebruiken, quick view knoppen verschijnt naast de Toevoegen aan winkelwagen knoppen. Dit is ideaal als u variabele producten weergeeft of als u wilt dat klanten de hoeveelheid kunnen wijzigen voordat ze aan de winkelwagen worden toegevoegd. Klanten kunnen extra informatie over het product bekijken, hoeveelheden en variaties kiezen en toevoegen aan de winkelwagen vanuit een quick view lightbox. Dit houdt ze op de originele pagina in plaats van ze naar een aparte productpagina.
Als u liever toevoegen aan winkelwagen knoppen voor meerdere producten, of als u niet van het standaard formaat met de grote afbeelding, dan kunt u gebruik maken van Woocommerce Product tabel in plaats daarvan.
Kies welke kolommen u wilt opnemen in de producttabel (zorg ervoor dat u de kolom toevoegen aan winkelwagen toevoegt!) en gebruik de shortcode om het overal in te voegen waar je maar wilt. Gebruik de include optie om te kiezen welke producten moeten worden opgenomen, bijvoorbeeld:
kan ik shortcodes binnen shortcodes weergeven?
soms wilt u shortcodes nestelen – bijvoorbeeld om de shortcode van de WordPress-audiospeler toe te voegen zodat er een ingesloten muziekspeler aan de lijst met producten wordt toegevoegd.
normaal gesproken kunt u de WooCommerce shortcodes niet nestelen. U kunt dit echter bereiken door de shortcode van de producttabel van WooCommerce te gebruiken om producten weer te geven en andere shortcodes toe te voegen aan de velden die u in de producttabel weergeeft.
bijvoorbeeld, laten we zeggen dat u 8 producten wilt weergeven, met een ingesloten audiospeler voor elk ervan. U kunt de audiospeler toevoegen aan de velden korte of lange beschrijving van het product en deze weergeven als kolommen in de tabel. U gebruikt vervolgens de WooCommerce-producttabel shortcode om die specifieke producten weer te geven, inclusief de korte of lange beschrijvingskolom die de audiospelers bevat.
om shortcodes van andere plugins te laten werken binnen de producttabel, moet u de optie ‘Shortcodes’ inschakelen op de pagina instellingen van de producttabel van WooCommerce:
WooCommerce pagina shortcodes
laten we beginnen met een kijkje te nemen op enkele van de meest voorkomende WooCommerce pagina shortcodes. Deze maken automatisch hele pagina ‘ s, zoals de winkelwagen of de kassa.
WooCommerce winkelwagen
met de shortcode van de WooCommerce winkelwagen – kunt u de winkelwagen van de klant weergeven op de front – end van uw WordPress website. U kunt het toevoegen aan WordPress pagina ‘ s of berichten of weer te geven in widgetized gebieden (zoals de zijbalk).
het ziet er ongeveer zo uit op de front-end:
wanneer u WooCommerce installeert en activeert op uw WordPress website, maakt het automatisch enkele pagina ‘ s voor u aan, waaronder de winkelwagenpagina, die deze shortcode gebruikt. U kunt de shortcode gebruiken om de winkelwagen toe te voegen aan extra delen van uw site.
WooCommerce checkout pagina
u kunt de WooCommerce checkout shortcode – gebruiken om een complete checkout pagina op uw e – commerce website te genereren. Deze pagina wordt ook automatisch voor u gemaakt wanneer u WooCommerce installeert. U kunt de shortcode ook gebruiken om de kassa elders in te voegen (bijvoorbeeld onder een producttabel om één pagina te winkelen).
De WooCommerce checkout shortcode bevat factuurgegevens, bestelgegevens en de optie om naar een ander adres te verzenden.
WooCommerce ordertracking
WooCommerce laat winkeliers een ordertracking-pagina maken met behulp van de shortcode. Hoewel deze pagina niet wordt geleverd met WooCommerce uit de doos, kunt u gewoon een nieuwe pagina te maken en plaats de shortcode in de teksteditor om uw eigen te maken. Het zou er ongeveer zo uit moeten zien op de front-end:
WooCommerce gebruikersaccount pagina
WooCommerce maakt automatisch een Mijn Account pagina aan wanneer u deze voor het eerst op uw website installeert. Dit wordt gedaan met de shortcode. U kunt de shortcode gebruiken om het accountgebied op extra locaties op uw site in te voegen.
De Mijn Account shortcode fungeert ook als een aanmeldings – en registratieformulier voor uitgelogde gebruikers. Als gevolg hiervan kunt u dit ook gebruiken als een WooCommerce login shortcode.
voeg WooCommerce-shortcodes gemakkelijker toe met een werkbalkknop
terwijl u allerlei WooCommerce-shortcode-plug-ins op het web kunt vinden, raden we u aan de gratis WooCommerce-shortcodes-plug-in van WooThemes te gebruiken. Eenmaal geà nstalleerd en geactiveerd, deze plugin voegt een TinyMCE drop-down knop om de WordPress teksteditor om u gemakkelijke toegang tot alle ingebouwde WooCommerce shortcodes. Dit bespaart u het kopiëren en plakken van de shortcodes.
na het activeren van de WooCommerce Shortcodes plugin, ziet u een nieuwe shortcode knop in uw WordPress teksteditor. Zodra u op deze knop klikt, verschijnt er een vervolgkeuzelijst met alle standaard WooCommerce shortcodes:
problemen oplossen met WooCommerce shortcodes
soms plakt u de juiste WooCommerce shortcode in de teksteditor, maar geeft niet de juiste uitvoer weer. Controleer in dit geval of u de shortcode niet per ongeluk hebt ingebed in <pre> tags. U kunt deze tags verwijderen door naar de HTML-teksteditor te gaan.
beste WooCommerce-shortcodes voor producttabel
voordat we klaar zijn, is hier een snel overzicht van de meest bruikbare ingebouwde WooCommerce-shortcodes die u kunt gebruiken met de WooCommerce-producttabel-plug-in en de WooCommerce Quick View Pro-plug-ins:
| Plugin Required | Shortcode name | WooCommerce shortcode | Description |
| None | Shopping Cart | Displays a shopping cart on the front-end of the website | |
| None | Checkout Page | Displays a complete checkout page. | |
| None | Order Tracking | Displays an order tracking form for your e-commerce website. | |
| geen | Gebruikersaccountpagina | toont een pagina ‘Mijn Account’ voor gebruikers | ooCommerce producttabel | productprijs/Winkelwagenknop | voegt een productprijs (of toevoegen aan winkelwagen) knop toe aan de producttabel. |
| WooCommerce Quick View Pro | meerdere producten Shortcode | toont meerdere (geselecteerde) producten op een pagina of post met quick view-knoppen. | |
| WooCommerce Quick View Pro | productcategorie | toont specifieke productcategorieën op de front-end van de website. | |
| WooCommerce Quick View Pro | productcategorie per Slug | toont producten uit een specifieke productcategorie samen met quick view-knoppen. | |
| WooCommerce Quick View Pro | recente producten | geeft een lijst weer van de meest recente producten die u aan uw online winkel hebt toegevoegd, samen met quick view-knoppen. | |
| WooCommerce Quick View Pro | Uitgelichte producten | toont een lijst van de uitgelichte producten met quick view-knoppen. | |
| WooCommerce Quick View Pro | verkoopproduct | geeft een lijst weer van alle producten die te koop zijn met quick view-knoppen. | |
| WooCommerce Quick View Pro | Best verkopend Product | toont een lijst van uw best verkopende producten met quick view knoppen. | |
| WooCommerce Quick View Pro | Top Rated Product | toont een lijst van uw top rated producten met quick view knoppen. | |
| WooCommerce Quick View Pro | gerelateerd Product | toont een lijst van gerelateerde producten met quick view knoppen op enkele productpagina ‘ s. | |
| WooCommerce Quick View Pro | geeft een knop ‘Toevoegen aan winkelwagen’ op een enkel product, met behulp van de Product-ID |
Laad uw WooCommerce-winkel op met shortcodes!
WooCommerce shortcodes zijn kleine codefragmenten waarmee u nette functies kunt toevoegen aan uw online winkel. U kunt ze toevoegen aan winkelpagina ‘ s, berichten, of widgetized gebieden op uw website (zoals de zijbalk). Sommige WooCommerce shortcodes ondersteunen ook parameters die u kunt gebruiken om de uitvoer aan te passen.
echter, niet alle WooCommerce shortcodes bieden een goede gebruikerservaring. In plaats van ze te plakken zoals het is, kunt u overwegen om ze te gebruiken naast de WooCommerce Product Table plugin of de WooCommerce Quick View Pro plugin.
Het is bijvoorbeeld de enige manier om klanten toe te staan om hoeveelheden en variaties buiten de productpagina te kiezen, en het laat u extra informatie over elk product weergeven en de afbeeldingsgrootte controleren. Als u extra flexibiliteit wilt, kunt u WooCommerce-producttabel installeren en beginnen te experimenteren met de 50+ shortcode-opties. Dit geeft u een meer nette en georganiseerde blik op de front-end, terwijl ervoor te zorgen dat uw site verbetert de klant shopping ervaring.
om samen te vatten, WooCommerce shortcodes laten u het traject van de koper verbeteren, meer producten tegelijk zien, en maakt het gemakkelijk voor klanten om snel door het afrekenproces te navigeren. U kunt ook proberen andere WooCommerce shortcode plugins (zoals WooCommerce Coupon Shortcodes) waarmee u gebruik maken van geavanceerde functies, zoals het toevoegen van couponcodes aan uw online winkel.