Aantal producten per pagina WooCommerce

In WooCommerce winkels is het aanpassen van het aantal producten dat per pagina wordt getoond een veelgevraagde functionaliteit. Dit helpt bij het verbeteren van de gebruikerservaring en kan ook bijdragen aan een betere productvisualisatie. Deze methode is alleen van toepassing als je WordPress thema deze functie niet bied. Bijvoorbeeld het GeneratePress en Avada thema bieden de optie al in hun eigen thema opties dus dan hoef je niet met custom code aan de slag.

Hieronder vind je een methode om dit aan te passen via de functions.php van je WordPress thema of via een plugin zoals Code Snippets.

Aantal producten per pagina aanpassen

Zorg voor toegang tot het functions.php bestand van je actieve (child)thema. Open het bestand FTP of de bestandsbeheerder in je hostingomgeving. Daarna voeg je de onderstaande code snippet voor WooCommerce toe.

add_filter( 'loop_shop_per_page','new_loop_shop_per_page', 20 );
function new_loop_shop_per_page ( $cols ) {
// $cols bevat het huidige aantal producten per pagina gebaseerd op de waarde opgeslagen bij Opties -> Lezen
// Geef het aantal producten terug dat je per pagina wilt tonen.
$cols = 24; // Pas dit getal aan naar het gewenste aantal producten per pagina
return $cols;
}

Aanpassen productaantal: In de code staat $cols = 24;, wat betekent dat er standaard 24 producten per pagina worden getoond. Dit getal kun je aanpassen naar het gewenste aantal producten dat je per pagina wilt tonen. Sla het bestand op na het toevoegen van de code. Bezoek je WooCommerce webshop en controleer of het aantal producten per pagina correct is aangepast.

WooCommerce aantal producten aanpassen

Het is aan te raden om wijzigingen in een child-thema te maken om te voorkomen dat je aanpassingen verloren gaan bij een thema-update. Maak uiteraard altijd een back-up van je website voordat je wijzigingen aanbrengt in de code.

Deze code wijzigt alleen het aantal producten dat wordt getoond in de WooCommerce productloops, zoals de hoofdproductpagina en categoriepagina’s. Door het aantal producten per pagina aan te passen, kun je de winkelervaring op je WooCommerce website aanzienlijk verbeteren.

Mocht je gebruik maken van FacetWP voor filtering en sorteren dan kun je ook een facet toevoegen om de sortering en aantal producten per pagina aan te passen.

Het automatisch aanvinken van de optie voor algemene voorwaarden in de checkout van een WooCommerce webshop kan het afrekenproces voor klanten versnellen en de gebruiksvriendelijkheid verbeteren.

Hieronder leggen we uit hoe je deze functionaliteit kunt implementeren in je WordPress website met WooCommerce.

Algemene voorwaarden aanvinken in checkout

Zorg ervoor dat je toegang hebt tot de bestanden van je WordPress-website, specifiek het functions.php bestand van je thema of de Code Snippet plugin.

Code toevoegen? Als je de onderstaande code direct in je thema wilt toevoegen, open dan het functions.php bestand van je actieve WordPress thema. Voor een veiligere methode, vooral als je updates van je thema verwacht, gebruik je de Code Snippet plugin. Deze methode zorgt ervoor dat je aanpassingen behouden blijven na een thema-update.

Code snippet toevoegen

// Standaard aangevinkte algemene voorwaarden in WooCommerce Checkout
add_filter( 'woocommerce_terms_is_checked_default', '__return_true');

Deze code zorgt ervoor dat de checkbox voor de algemene voorwaarden standaard aangevinkt is in de checkout.

1. Sla het functions.php bestand op of sla de snippet op in de Code Snippet plugin.
2. Test je checkout-pagina om te verifiëren dat de algemene voorwaarden standaard aangevinkt zijn.

Regelmatig back-ups maken van je website voordat je wijzigingen aanbrengt is altijd een goede praktijk.

Verboden bij Webwinkelkeur

Het is belangrijk om te onthouden dat het automatisch aanvinken van algemene voorwaarden soms juridische implicaties kan hebben, afhankelijk van de regio en de specifieke wetgeving. Zorg ervoor dat je op de hoogte bent van de relevante wetgeving. Bijvoorbeeld het Webwinkelkeur keurmerk verbied je de algemene voorwaarden in je checkout standaard aan te vinken.

Als je een webshop beheert met WooCommerce, kun je tegen situaties aanlopen waarin je gratis verzending wilt aanbieden, maar tegelijkertijd ook de optie voor afhalen op jouw winkel locatie bijvoorbeeld wilt behouden. Dit is vooral handig als je klanten wilt aanmoedigen om online te kopen, maar ook de flexibiliteit wilt bieden om hun bestelling zelf op te halen en eventueel nog meer te kopen.

In dit artikel leggen we uit hoe je dit kunt instellen door een stukje code (een ‘snippet’) toe te voegen aan je website.

Alleen gratis verzending en afhalen

Voeg de volgende snippet toe aan de functions.php van je WordPress thema of gebruik de plugin ‘Code Snippets’ als je niet handig bent met het aanpassen van code in je thema.

/**
 * Hide shipping rates when free shipping is available, but keep "Local pickup" 
 * Updated to support WooCommerce 2.6 Shipping Zones
 */

function hide_shipping_when_free_is_available( $rates, $package ) {
	$new_rates = array();
	foreach ( $rates as $rate_id => $rate ) {
		// Only modify rates if free_shipping is present.
		if ( 'free_shipping' === $rate->method_id ) {
			$new_rates[ $rate_id ] = $rate;
			break;
		}
	}

	if ( ! empty( $new_rates ) ) {
		//Save local pickup if it's present.
		foreach ( $rates as $rate_id => $rate ) {
			if ('local_pickup' === $rate->method_id ) {
				$new_rates[ $rate_id ] = $rate;
				break;
			}
		}
		return $new_rates;
	}

	return $rates;
}

add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 10, 2 );

Wat doet de code?

Deze code controleert of er een optie voor gratis verzending is. Als dat het geval is, worden alle andere verzendmethoden verborgen, behalve lokale afhaling. Dit betekent dat je klanten alleen de opties voor gratis verzending en lokale afhaling zien als gratis verzending beschikbaar is.

Nadat je de snippet hebt toegevoegd, is het belangrijk om je webshop goed te testen. Controleer of de verzendopties correct worden weergegeven tijdens het afrekenproces.

Personaliseer code

Je kunt deze code verder aanpassen om aan je specifieke eisen te voldoen. Bijvoorbeeld, je kunt extra logica toevoegen om te bepalen wanneer gratis verzending beschikbaar moet zijn.

Meer hierover vind je op de website van WooCommerce.

Om alleen gratis verzending te bieden in WooCommerce wanneer dit beschikbaar is, kan de volgende code worden toegevoegd aan je functions.php bestand of een plugin voor codefragmenten (zoals Code Snippets).

Deze code controleert of gratis verzending beschikbaar is voor een bestelling in de webshop en verbergt andere verzendopties als dat zo is. Dit wordt vaak gebruikt om klanten aan te moedigen een bepaald bestelbedrag te bereiken, waarna ze in aanmerking komen voor gratis verzending.

/**
 * Verberg verzendtarieven wanneer gratis verzending beschikbaar is.
 * Bijgewerkt om WooCommerce 2.6-verzendzones te ondersteunen.
 *
 * @param array $rates Array van gevonden tarieven voor het pakket.
 * @return array
 */
function my_hide_shipping_when_free_is_available( $rates ) {
    $free = array();
    foreach ( $rates as $rate_id => $rate ) {
        if ( 'free_shipping' === $rate->method_id ) {
            $free[ $rate_id ] = $rate;
            break;
        }
    }
    return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'my_hide_shipping_when_free_is_available', 100 );

Hoe werkt de code?

• Deze functie doorloopt alle beschikbare verzendtarieven voor een bestelling.
• Als het tarief voor gratis verzending (free_shipping) beschikbaar is, worden alle andere verzendopties verborgen.
• Dit wordt gerealiseerd door een filter toe te voegen aan woocommerce_package_rates.
• De prioriteit is ingesteld op 100, wat betekent dat het een van de laatste filters is die op de tarieven worden toegepast, zodat andere logica voor verzendtarieven al is uitgevoerd.

• Zorg ervoor dat je deze code in het thema’s functions.php bestand plaatst of gebruik een specifieke plugin voor het beheren van codefragmenten.
• Test altijd in een staging-omgeving voordat je wijzigingen doorvoert op je live website.
• Als je niet comfortabel bent met het bewerken van code, overweeg dan een professional in te schakelen.

Deze aanpak zorgt ervoor dat je klanten een duidelijke en stimulerende keuze krijgen voor gratis verzending, wat de klanttevredenheid kan verhogen en potentieel de gemiddelde bestelwaarde kan verbeteren.

Dit gratis script past de weergave van prijzen voor variabele producten in WooCommerce aan, zodat alleen de laagste prijs wordt getoond op de categoriepagina. Dit helpt bij het vereenvoudigen van de prijsweergave voor klanten.

WooCommerce vanaf prijs tonen

// Toon alleen de laagste prijzen voor variabele producten in WooCommerce
add_filter('woocommerce_variable_sale_price_html', 'wpglorify_variation_price_format', 10, 2);
add_filter('woocommerce_variable_price_html', 'wpglorify_variation_price_format', 10, 2);
function wpglorify_variation_price_format($price, $product) {
   // Hoofdprijs
    $prices = array($product->get_variation_price('min', true), $product->get_variation_price('max', true));
    $price = $prices[0] !== $prices[1] ? sprintf(__('Vanaf: %1$s', 'woocommerce'), wc_price($prices[0])) : wc_price($prices[0]);
// Verkoopprijs
    $prices = array($product->get_variation_regular_price('min', true), $product->get_variation_regular_price('max', true));
    sort($prices);
    $saleprice = $prices[0] !== $prices[1] ? sprintf(__('Vanaf: %1$s', 'woocommerce'), wc_price($prices[0])) : wc_price($prices[0]);
    if ($price !== $saleprice) {
        $price = '' . $saleprice . $product->get_price_suffix() . ' ' . $price . $product->get_price_suffix() . '';
    }
 return $price;
}

Uitleg code snippet

1. Filters: We voegen filters toe om de prijsopmaak van variabele producten aan te passen.
2. Functie wpglorify_variation_price_format: Deze functie past de weergave van de prijs aan.
   • Bepaalt de laagste en hoogste prijs van de variaties.
   • Toont ‘Vanaf: [laagste prijs]’ als er een prijsverschil is.
   • Verwerkt de normale en verkoopprijs.
   • Geeft de aangepaste prijsopmaak terug.

Hoe gebruik je de code?

Voeg deze code toe aan het functions.php bestand van je thema of gebruik een custom code plugin. Controleer of de prijzen correct worden weergegeven op de categoriepagina’s en pas aan indien nodig om aan te sluiten bij je specifieke behoeften of thema.

Door deze aanpassing wordt de prijsinformatie op categoriepagina’s duidelijker voor klanten, wat kan bijdragen aan een betere gebruikerservaring en mogelijk een verhoging van de verkoop.

In WooCommerce, als je te maken hebt met producten die variaties hebben, zoals verschillende maten of kleuren, wil je soms de prijs van elke variatie tonen, zelfs voordat de klant een specifieke optie selecteert.

Standaard toont WooCommerce alleen de prijs zodra een variatie geselecteerd is. Om dit te veranderen, kun je een kleine code snippet toevoegen aan je website.

PHP Code toevoegen

Je kunt de volgende code toevoegen aan het functions.php bestand van je thema of via een plugin zoals Code Snippets. Het is aanbevolen om een child thema te gebruiken om te voorkomen dat wijzigingen verloren gaan bij een thema-update. Hier is de code:

add_filter( 'woocommerce_show_variation_price', '__return_true' );

Deze code zorgt ervoor dat de prijs van elke variatie wordt getoond op de productpagina, ongeacht of de bezoeker een specifieke variatie heeft geselecteerd.

Altijd variatieprijs tonen

Na het toevoegen van de code, ga naar je productpagina met variaties om te controleren of de prijzen correct worden weergegeven. Als je meer dan één prijsklasse hebt (bijvoorbeeld €10 – €20), zal deze nu standaard getoond worden.

• Het is altijd een goed idee om wijzigingen eerst in een staging omgeving te testen voordat je ze op je live website toepast.
• Maak een back-up van je website voordat je wijzigingen doorvoert in de code.

Automatisch verwerken WooCommerce orders bij betalen op factuur

In WooCommerce kun je de orderstatus automatisch op “In Behandeling” zetten voor bestellingen die via factuur betaald worden. Dit zorgt voor een vlottere verwerking en minder handmatig werk. Om dit in te stellen, moet je een stukje code toevoegen aan je website.

Het is aanbevolen om deze code in de functions.php van je WordPress thema te plaatsen of een plug-in zoals Code Snippets te gebruiken, wat veiliger is en je aanpassingen behoudt bij een thema-update.

Basis code

add_action ( 'woocommerce_thankyou', 'custom_order_status_for_invoice_payment', 10, 1 );
function custom_order_status_for_invoice_payment( $order_id) {
if ( ! $order_id ) {
return;
$order = function_ invoke__">wc_get_order ( $order_id );
// Controleer of de betaalmethode 'Betalen op Factuur' is
if ( get_post_meta ( $order-> get_id() , true ) == 'invoice_payment_method' ) {
$order -> update_status( 'on-hold' ); // Verander dit naar de gewenste status
}
}

Vervang ‘invoice_payment_method’ door de daadwerkelijke ID van de betaalmethode voor betalen op factuur in jouw WooCommerce installatie.

Activeer betalen met cheque

Om betalen met cheque te activeren en de orderstatus automatisch naar ‘In Behandeling’ te wijzigen, kun je de volgende code gebruiken:

add_action( 'woocommerce_thankyou', 'cheque_payment_method_order_status_to_processing', 10, 1 );
function cheque_payment_method_order_status_to_processing( $order_id ) {
if ( ! $order_id ) {
return;
}$order = wc_get_order( $order_id );
// Orderstatus updaten naar 'In Behandeling' voor orders betaald met cheque
if ( get_post_meta( $order->get_id(), '_payment_method', true ) == 'cheque' ) {
$order->update_status( 'processing' );
}
}

Zorg ervoor dat je de juiste orderstatus en betaalmethode-ID’s gebruikt die passen bij jouw specifieke WooCommerce configuratie.

Als je de positie van de categoriebeschrijving in je WooCommerce webshop wilt wijzigen, kun je dit doen door enkele regels code toe te voegen aan je functions.php bestand of door gebruik te maken van de Code Snippets plugin. Dit kan bijvoorbeeld handig zijn als je de categorie omschrijving wilt tonen na de lijst met producten, in plaats van ervoor. Hier is hoe je dit kunt doen:

Als je direct in de code van je WordPress thema wilt werken, open dan het functions.php bestand. Dit kan via een FTP-client of via de editor in het WordPress dashboard. Als je liever een plugin gebruikt om aanpassingen te maken, kun je de Code Snippets plugin installeren en activeren.

Verplaatsen categorie omschrijving WooCommerce

Plak de volgende code in je functions.php bestand of in een nieuwe snippet in de Code Snippets plugin:

remove_action ( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 100 );

Wat doet deze code?

• remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );: Deze regel verwijdert de standaardactie die de categoriebeschrijving bovenaan de productlijst plaatst.
• add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );: Deze regel voegt de categoriebeschrijving toe onder de lijst met producten.

Tips

• Zorg ervoor dat je een back-up maakt van je website voordat je wijzigingen aanbrengt in de code.
• Als je niet comfortabel bent met het bewerken van code, overweeg dan een professional te raadplegen.

Dit zou de positie van de categoriebeschrijving in je WooCommerce webshop moeten veranderen, waardoor deze onder de productlijst verschijnt. Zo verbeter je de gebruikerservaring door de producten eerst te tonen en de beschrijvende tekst daarna.

Aangepaste viewport instellen in het Flatsome thema

Wanneer je een website of webwinkel in WordPress ontwikkelt of aanpast, kan het soms nodig zijn om de viewport te forceren om een ​​bepaald gedrag op mobiele apparaten te bereiken. In het geval van het Flatsome thema, kan dit worden bereikt door aangepaste code toe te voegen. Hieronder wordt uitgelegd hoe je dit kunt doen.

Wat is een viewport?

Een viewport is het zichtbare gebied van een webpagina op een displayapparaat. Het bepaalt hoe de inhoud op verschillende schermen en apparaten wordt geschaald en weergegeven. Het forceren van de viewport kan nuttig zijn om een ​​betere gebruikerservaring op mobiele apparaten te garanderen.

Stap voor stap: viewport forceren in Flatsome

1. Toegang tot code: Open je functions.php bestand van je thema of gebruik een plug-in zoals Code Snippets. Dit bestand wordt meestal gevonden in de themamap van je WordPress installatie.
2. Code toevoegen: Voeg de volgende code toe aan je functions.php bestand of als een nieuw snippet via Code Snippets:

function flatsome_allow_mobile_zooming(){
   print ' ';
   print "n";
}

add_action( 'wp_head' , 'flatsome_allow_mobile_zooming', 9999999 );

Deze code zal de viewport tag in de head sectie van je website plaatsen, waardoor gebruikers kunnen in- en uitzoomen op mobiele apparaten.

Sla de wijzigingen op en bekijk je website op een mobiel apparaat om te controleren of de veranderingen succesvol zijn doorgevoerd.

Tips voor viewport aanpassingen

• Het is essentieel om back-ups van je website te maken voordat je wijzigingen in de code aanbrengt, om eventueel gegevensverlies te voorkomen.
• Zorg ervoor dat de toegevoegde code geen conflicten veroorzaakt met andere functies of plug-ins op je website.
• Als je niet comfortabel bent met het rechtstreeks wijzigen van themabestanden, overweeg dan om een ​​child-theme te gebruiken of vraag hulp aan een WordPress ontwikkelaar.

Het forceren van de viewport in het Flatsome thema kan helpen om een ​​meer responsieve en gebruiksvriendelijke ervaring te creëren op mobiele apparaten. Door de bovenstaande stappen te volgen en de nodige voorzorgsmaatregelen te nemen, kun je de viewport van je website eenvoudig aanpassen en optimaliseren.

Je kunt het Flatsome thema hier aanschaffen*