2.11 WooCommerce winkelmeldingen, catalogusweergave en productafbeeldingen beheren

WooCommerce Customizer is onderdeel van WordPress> Customize en maakt het mogelijk om opties te selecteren die in de hele site gebruik worden voor winkelkennisgeving , productcatalogus en productafbeeldingen zonder code aan te raken.

Waar vindt u WooCommerce Customizer?
Ga vanuit het WordPress-dashboard naar: weergave> customizer

woocommerce-customizer-image
Selecteer WooCommerce in het menu Aanpassen :
woocommerce-customizer

Onder WooCommerce zijn drie opties:

  • Winkel kennisgeving
  • Product catalogus
  • Productafbeeldingen

Elk is hieronder in detail beschreven.

woocommerce-customizer-cust1

Winkel kennisgeving

Winkelmelding stelt u in staat om een ​​site-breed bericht in te voeren dat wordt getoond aan iedereen die uw winkel bezoekt. Het bericht kan zijn:

  • Informatief – Een opmerking die klanten informeert over vertragingen bij het verzenden als gevolg van weersomstandigheden. Een ‘weg’-melding als je op vakantie bent.
  • Promotie – Een notitie voor een evenement, een speciale vakantie, een bundel, een verkoop op alle / sommige artikelen of gratis verzending.

Toon een winkelmelding

Om klanten een kennisgeving over de hele winkel te laten zien:

1 / Ga naar: Uiterlijk> Aanpassen> WooCommerce> Winkelmelding:

woocommerce-customizer-storenotice
2 / Voer een bericht in het tekstgebied in.
woocommerce-customizer-storenotice-option
3 / Vink het vakje aan voor kennisgeving van winkel inschakelen .
woocommerce-customizer-storenotice-promotion-disable

4 / Voorbeeld hoe de Store mededeling ziet er op uw site / winkel.

woocommerce-customizer-storenotice-preview

5 / Publiceer wanneer u tevreden bent en klaar om uw winkelmelding live te laten verschijnen.

woocommerce-customizer-storenotice-publish
Wat bezoekers zien

Dit is hoe de winkelmelding op de voorkant van uw winkel / site wordt weergegeven. Bezoekers kunnen ervoor kiezen de melding te negeren nadat ze deze eenmaal hebben gezien.

* De locatie en het uiterlijk van de winkelmelding variëren, afhankelijk van het thema dat u gebruikt. Screenshot hierboven is met ons gratis Storefront-thema .

woocommerce-customizer-storenotice-display-usage

Bewerk of verwijder een winkelmelding

Om de weergave van een winkelmelding op de hele site te wijzigen of te stoppen:

1 / Ga naar: Uiterlijk> Aanpassen> WooCommerce> Winkelmelding:

woocommerce-customizer-storenotice-2

2 / De winkelmelding wijzigen:

  • Bewerk het bericht in het tekstgebied om het te wijzigen.
  • Vink het selectievakje aan om Kennisgeving over winkel inschakelen in te schakelen voor weergave aan bezoekers.
woocommerce-customizer-storenotice-disable

3 / Publiceren om wijzigingen op te slaan.

woocommerce-customizer-storenotice-publish-change

Plan een winkelmelding

Het gebruik van de optie Schema voor winkelkennisgeving kan handig zijn als u een promotie voor een beperkte tijd uitvoert of een verkoop / korting om middernacht op een specifieke datum beëindigt.

In dit voorbeeld willen we stoppen met de gratis verzending wanneer deze op 28 februari eindigt.

1 / Ga naar Uiterlijk> Aanpassen> WooCommerce> Winkelmelding om de huidige / gepubliceerde promotie te bekijken en te openen.

woocommerce-customizer-storenotice-current-promotion

2 / Vink het selectievakje uit voor Winkelkennisgeving inschakelen.

woocommerce-customizer-storenotice-promotion-disable

3 / Selecteer het tandwiel. Een paneel wordt geopend.

4 / Selecteer Schema in het rechtermenu en voer vervolgens de Datum en Tijd in waarop u wilt dat de wijziging van kracht wordt.

woocommerce-customizer-storenotice-schedule-change

5 / Selecteer Schema om de wijzigingen aan te brengen die u op de toekomstige Datum en tijd hebt ingevoerd.

* U moet verkoopkortingen, couponcodes of aanbiedingen met een beperkte tijd uitschakelen. Het verwijderen van de melding stopt niet automatisch de promotie.

woocommerce-customizer-storenotice-schedule-future

Product catalogus

Alle opties voor Productcatalogus zijn te vinden op: Uiterlijk> Aanpassen> WooCommerce> Productcatalogus.

woocommerce-customizer-customizer-productcatalog

Met Productcatalogus kunt u kiezen:

  • Wat te tonen op de winkelpagina
  • Wat te tonen op Category-pagina’s
  • Hoe producten in een categorie te sorteren
  • Hoeveel producten worden in één rij weergegeven?
  • Hoeveel rijen producten die op een pagina worden weergegeven
woocommerce-customizer-customizer-productcatalog-option

Winkelpagina

Uw winkelpagina kan producten, categorieën of beide weergeven. We raden aan er een te kiezen voor een schone uitstraling.

1 / Selecteer Producten of categorieën in de vervolgkeuzelijst.

woocommerce-customizer-shoppage-options

2 / Voorbeeld uw keuze te leven. U moet de winkelpagina bekijken.

woocommerce-customizer-shoppage-products
3 / Publiceren om te bewaren en live te gaan.
woocommerce-customizer-productcatalog-shop-publish-5

Categoriepagina’s

Uw categoriepagina ’s kunnen producten of subcategorieën binnen een categorie weergeven, of beide . Het is aan te bevelen er een te selecteren.

Als u slechts een paar producten hebt, of als u geen subcategorieën heeft, is er mogelijk geen verschil in uiterlijk.

1 / Selecteer producten of subcategorieën in de vervolgkeuzelijst.

woocommerce-customizer-categorypages-display

2 / Voorbeeld van uw keuze, categoriepagina bekijken .

woocommerce-customizer-categorypage-display-preview
3 / Publiceren om te bewaren en live te gaan.
woocommerce-customizer-productcatalog-shop-publish

Sorteer producten

Met standaardsorteersortering kunt u de volgorde bepalen waarin producten worden weergegeven op de pagina’s Winkel en Categorie. Bezoekers kunnen desgewenst nog steeds een andere manier sorteren.

In dit voorbeeld hebben we Prijs oplopend gekozen (sorteren op prijs: laag naar hoog met een √) en de klant selecteert op Meest recent (nieuwheid).

woocommerce-customizer-product-sort-select

Om een standaard sorteervolgorde te kiezen:

1 / Selecteer er één uit de vervolgkeuzelijst:

  • Populariteit per verkoop
  • Gemiddelde beoordeling door klanten
  • Meest recente , nieuwste producten toegevoegd aan de winkel
  • Prijs oplopend , laagste tot hoogste
  • Prijs aflopend , van hoogste naar laagste
woocommerce-customizer-products-sort-options

2 / Voorbeeld van uw keuze, winkelpagina of een categoriepagina bekijken

3 / Publiceren om te bewaren en live te gaan.

woocommerce-customizer-products-defaultsort-preview

Producten per rij

Met producten per rij kunt u het aantal items kiezen dat in één rij op de pagina’s Winkel en Categorie wordt weergegeven .

Houd hierbij rekening met:

  • Grootte van een productafbeelding
  • Ruimte op een computer / laptop, tablet of mobiel apparaat
  • Optimale ervaring voor een klant die uw producten bekijkt en koopt

1 / Gebruik de pijltoets om het aantal producten te verhogen / verlagen.

woocommerce-customizer-products-row-select

2 / Voorbeeld van uw keuze, de winkelpagina of een categoriepagina bekijken.

woocommerce-customizer-products-row-preview
3 / Test op verschillende apparaten . Hieronder ziet u een voorbeeld van verschillende weergaven met dezelfde instellingen.
woocommerce-customizer-products-row-screen
Computer of laptopscherm
woocommerce-customizer-products-row-tablet
Tablet
woocommerce-customizer-products-row-mobile
Mobiel

* Het schalen van de afbeeldingsgrootte en het uiterlijk kan variëren, afhankelijk van het thema dat u gebruikt.

4 / Publiceren om te bewaren en live te gaan

Rijen per pagina

Met rijen per pagina kunt u het aantal rijen kiezen dat op de pagina’s Winkel en Categorie wordt weergegeven .

Houd rekening met:

  • Grootte van productafbeeldingen
  • Aantal producten dat u verkoopt
  • Ruimte op een computer / laptop, tablet of mobiel apparaat
  • Optimale ervaring voor een klant die uw producten bekijkt en koopt

1 / Gebruik de pijlen om het aantal rijen te verhogen / verlagen .

woocommerce-customizer-rows-page-select

2 / Voorbeeld van uw keuze, de winkelpagina of een categoriepagina bekijken

woocommerce-customizer-rows-page-preview
3 / Test op verschillende apparaten . Hieronder ziet u een voorbeeld van verschillende weergaven met dezelfde instellingen.
woocommerce-customizer-rows-page-screen
Computer of laptop scherm
woocommerce-customizer-rows-page-tablet
Tablet
woocommerce-customizer-rows-page-mobile
Mobiel

* Het schalen van de afbeeldingsgrootte en het uiterlijk kan variëren, afhankelijk van het thema dat u gebruikt. 

4 / Publiceren om te bewaren en live te gaan.

Productafbeeldingen

Productafbeeldingen heeft twee functies:

  • Hiermee kunt u selecteren hoe catalogus- en miniatuurafbeeldingen moeten worden aangepast en bijgesneden
  • Hiermee worden de afbeeldingen in de catalogus en miniatuurafbeeldingen in uw winkel automatisch aangepast wanneer een gepubliceerde wijziging wordt aangebracht *

Dit bespaart u tijd en energie bij het handmatig bijsnijden en vergroten en verkleinen van elke grootte.

Beeldtypen

  • Catalogusafbeeldingen zijn middelgrote afbeeldingen die worden weergegeven op de winkelpagina, categoriepagina’s en voor gerelateerde producten, up-sells en cross-sells.
  • Miniatuurafbeeldingen zijn de kleinste afbeeldingen die worden gebruikt in de winkelwagen, widgets en (optionele) galerijafbeeldingen onder de afzonderlijke productafbeelding op afzonderlijke productdetailspagina’s.
  • Eén productafbeelding is de grootste afbeelding en verwijst naar de hoofdafbeelding. Instellingen voor productafbeeldingen in WooCommerce Customizer zijn hier niet op van toepassing. Zie voor het toevoegen, bewerken of verwijderen van de enkelvoudige productafbeelding of productafbeeldingengalerie: Productafbeeldingen en -galerieën toevoegen.

* Voorheen moesten thumbnails opnieuw worden gegenereerd met behulp van een plug-in van derden. WooCommerce 3.3x behandelt dit nu voor u. Voorbeeldmodus activeert geen regeneratie.

Formaat wijzigen en miniatuurafbeeldingen bijsnijden

1 / Ga naar: Uiterlijk> Aanpassen> WooCommerce> Productafbeeldingen .

woocommerce-customizer-customizer-thumbnail-cropping

2 / Selecteer er een:

woocommerce-customizer-cropped-square
1:1 – Vierkant beeld
woocommerce-customizer-cropped-custom

Aangepast: u selecteert de verhouding waarin afbeeldingen worden bijgesneden. In dit voorbeeld wordt 1: 2 ingevoerd; en één afbeelding kan niet worden vergroot om aan deze vereiste te voldoen.

woocommerce-customizer-image-uncropped

UncroppedAfbeeldingen worden weergegeven zoals ze zijn, wat ertoe kan leiden dat ze allemaal anders zijn tenzij u foto’s gebruikt die qua grootte en resolutie gelijk zijn. De schermafbeelding hieronder is hiervan een voorbeeld: de ene is perfect vierkant, de volgende is een kleiner vierkant en de laatste is een rechthoek.

3 / Test op verschillende apparaten . Hieronder ziet u een voorbeeld van verschillende weergaven met dezelfde instellingen.

woocommerce-customizer-squarecrop-screen
Computer of laptopscherm
woocommerce-customizer-squarecrop-tablet
Tablet
woocommerce-customizer-squarecrop-mobile
Mobiel

4 / Publiceren om te bewaren en live te gaan.

Uitchecken

Alle opties voor Afrekenen zijn te vinden op: Customizer> Aanpassen> WooCommerce> Afrekenen .

woocommerce-customizer-checkout-customizer

U kunt nu instellen of bepaalde velden verplicht of optioneel zijn, afhankelijk van de gegevens die u wilt verzamelen. U kunt er ook voor kiezen om de verplichte velden met een asterisk te markeren, wat de standaard is.

Het wordt aanbevolen om Privacybeleid en Algemene voorwaarden-pagina’s te maken en deze vervolgens hier in te stellen. De paginaset is gekoppeld aan de tekst die u invoert en wordt op de Checkout-pagina weergegeven als hiernaast.

De link ‘privacybeleid’ opent de pagina in een nieuw venster, terwijl de link ‘algemene voorwaarden’ een vak opent op de pagina met de inhoud van de pagina met voorwaarden en condities. Een bestelling kan niet worden geplaatst zonder de vereiste voorwaarden te controleren.

woocommerce-customizer-terms

Veelgestelde vragen

Ik kan WooCommerce Customizer niet vinden.

Winkels die gebruikmaken van WooCommerce 3.3x + hebben deze optie beschikbaar bij: Uiterlijk> Aanpassen> WooCommerce . Winkels die gebruikmaken van een versie van WooCommerce vóór 3.3.0 zullen Store Notice en Product Images zien op: WooCommerce> Instellingen> Producten> Display sectie; Productcatalogus is nieuw.

We raden aan om bij te werken naar de nieuwste versie van WooCommerce om te profiteren van nieuwe en verbeterde functies en functionaliteit. Bedankt!

Kan ik de plug-in Regenerate Thumbnails nog steeds gebruiken ?

Ja, dat kan. Maar het is niet nodig om WooCommerce 3.3.0 of hoger te gebruiken omdat WooCommerce 3.3 of hoger, of een wijziging in een nieuwe productcatalogus of productafbeeldingen WooCommerce activeert om miniatuur- en productcatalogusafbeeldingen automatisch bij te werken en automatisch bij te werken.

U kunt ook de optie Thumbnails voor opnieuw genereren gebruiken op: WooCommerce> Status> Tools .

woocommerce-customizer-regenerate-thumb-tool