WooCommerce voor Waaghalzen – 5 gevorderde tips voor WooCommerce (deel 2)

Nog drie tips om WooCommerce zelf aan te passen

Zoals beloofd, in de serie ‘WooCommerce voor Waaghalzen’ bij deze nog een drietal andere tips hoe je met enkele regels code interessante aanpassingen aan WooCommerce door kunt voeren.

Tip 3: De ‘Doorgaan met winkelen’ knop

Eén van de kleine minpuntjes van WooCommerce is dat het niet standaard een ‘Doorgaan met winkelen’ knop heeft. Wanneer de details van een product hebt bekeken en hebt besloten, dat dit niet is wat je wilt, dan wil je graag terug naar het overzicht van de eerdere zoekopdracht. Natuurlijk. Dat kan makkelijk met de ‘back’ knop van je browser, maar het zal je verbazen (of, indien niet, het verbaasde mij wel) hoeveel mensen die knop niet weten te vinden. Bovendien is de ‘back’ functie op een telefoon of tablet nog beter verstopt.

Wil je de bezoeker van je webwinkel een beetje terwille zijn, dan is het goed om zo’n ’terug’ knop in de pagina op te nemen.

Dit kan in principe met een eenvoudig stukje javascript. Maar het nadeel van deze code is, dat indien je op de vorige pagina een formulier hebt ingevuld (zoals het zoek formulier) zal je browser altijd om bevestiging vragen. Een storende extra handeling dus.

Met onderstaande code kan het allemaal net iets gebruikersvriendelijker.

<?php 
add_action( 'woocommerce_single_product_summary', 'jans_woo_continue_shopping_button', 31 );
 
function jans_woo_continue_shopping_button() {
  if ( wp_get_referer() ) echo '<a class="button continue" href="' . wp_get_referer() . '>Doorgaan met winkelen</a>';
}

Weet je nog? Het stukje ‘jans_woo’  vervang je door je eigen unieke voorvoegsel.

Tip 4 : Algemene voorwaarden voor specifieke producten

Wanneer je business to consumeer werkt, dan heeft je klant in principe 14 dagen de tijd om zich te bedenken, wanneer hij in je webwinkel koopt. Een aantal producten is wettelijk uitgesloten van deze bedenktijd (zoals op maat gemaakte producten, dagverse producten en bepaalde gebruiksartikelen) en een aantal producten zijn uitgesloten mits dit nadrukkelijk en duidelijk wordt vermeld. Zoals bijvoorbeeld downloads. Op het moment, dat je een specifiek product hebt, wat niet voor retouren in aanmerking komt, dan kun -uitsluitend als dat product wordt gekocht- extra voorwaarden in beeld brengen, waarmee de gebruiker ook akkoord zal moeten gaan.

Onderstaande code is een simpel voorbeeld hoe dit kan. Wil je een meer uitgebreide versie hebben, zal je er zelf toch aan moeten ‘knutselen’.

<?php 
add_action('woocommerce_review_order_before_submit', 'jans_woo_add_checkout_tickbox', 9);
   
function jans_woo_add_checkout_tickbox() {
 
// Show Terms 1
$product_id_1 = 999; //Hier vullen we het specifieke product ID in. Heb je veel producten, is dit niet de handigste oplossing.
$product_cart_id_1 = WC()->cart->generate_cart_id( $product_id_1 );
$in_cart_1 = WC()->cart->find_product_in_cart( $product_cart_id_1 );
 
if ( $in_cart_1 ) {
      
?>;
  
<p class="form-row terms wc-terms-and-conditions">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">;
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox 
      input-checkbox" name="terms-1" 
      <?php checked( apply_filters( 'woocommerce_terms_is_checked_default', isset( $_POST['terms-1'] ) ), true ); ?>
     id="terms-1"> <span>Ik stem in met de voorwaarden voor <a href="/voorwaarden/product/1" target="_blank">product-1</a></span> 
<span class="required">*</span>;
</label>
<input type="hidden" name="terms-1-field" value="1">
</p>
  
<?php  
}
 
// Show Terms 2
$product_id_2 = 888;  //Zie aantekening bij 'terms 1'
$product_cart_id_2 = WC()->cart->generate_cart_id( $product_id_2 );
$in_cart_2 = WC()->cart->find_product_in_cart( $product_cart_id_2 );
 
if ( $in_cart_2a ) {
      
?>
 
<p class="form-row terms wc-terms-and-conditions">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" 
   name="terms-2" 
<?php checked( apply_filters( 'woocommerce_terms_is_checked_default', 
   isset( $_POST['terms-2'] ) ), true ); ?> id="terms-2"> 
  <span>Ik stem in met de voorwaarden voor <a href="/link/naar/product/2" target="_blank">Product 2</a></span>
  <span class="required">*</span>
</label>
<input type="hidden" name="terms-2-field" value="1">
</p>
  
<?php
 
}
 
}
  
// Show notice if customer does not tick either terms
 
add_action('woocommerce_checkout_process', 'jans_woo_not_approved_terms_1');
add_action('woocommerce_checkout_process', 'jans_woo_not_approved_terms_2');
  
function jans_woo_not_approved_terms_1() {
    if ( ! empty( $_POST['terms-1'] ) && empty( $_POST['terms-1'] ) ) {
        wc_add_notice( __( 'U dient met voorwaarden voor product 1 in te stemmen' ), 'error' );          }
}
 
function jans_woo_not_approved_terms_2() {
    if ( ! empty( $_POST['terms-2'] ) && empty( $_POST['terms-2'] ) ) {
        wc_add_notice( __( 'U dient met voorwaarden voor product 2 in te stemmen' ), 'error' );          }
}

Bovenstaande code heeft aardig wat aanpassingen nodig. Allereerst zal je de product id’s moeten vervangen door de ID’s van de daadwerkelijke producten. Ook de teksten zaal je mogelijk aan willen passen en natuurlijk dien je de urls te vervangen door URL’s op jouw site. Wil je dit ‘makkelijker gemaakt hebben’,  dan zal je het één en ander aan maatwerk uit moeten voeren.

Maar mocht je geinteresseerd zijn geraakt in het zelf maken van plugins, neem dan contact op via het contactformulier. Bij voldoende interesse, ben ik zeker bereid hier een cursus omtrent te organiseren.

Tip 5: Een productvideo tonen in plaats van een product afbeelding

Ok, nu gaan we iets doen, waar ik serieus veel vragen over heb gekregen en iets wat ik regelmatig ‘aanpas’ aan WooCommerce voor mijn klanten. Maar dit is ook een wat groter ‘projectje’ in de code. Dus maak je veiligheidsriemen alvast maar vast en maak in ieder geval eerst een kopie van je installatie.

Want hier laten we in plaats van de productafbeelding een productvideo zien. En daarvoor moeten we nog iets anders doen. Want we willen natuurlijk ook bijhouden per product welke video we willen tonen.

Wanneer ik iets dergelijks voor een klant bouw, dan zorg ik er altijd voor, dat er een keurig, goed beschreven veld in het product voorkomt, waar de klant dit in kan geven. Maar dan komen we eigenlijk al op het gebied van het ontwikkelen van een complete plugin, en dat kunnen we in één blogpost niet doen. Daarom een wat eenvoudiger voorbeeld. Minder gebruikersvriendelijk, maar het werkt wel!

Bovenin het scherm voor je producten vind je een knop ‘Scherminstellingen’. Als je hier op klikt, dan wordt een hele serie aankruisvakjes zichtbaar. Als ‘Aangepaste velden’ niet is aangevinkt doe je dat.

Onder het product is nu ergens een box bijgekomen voor ‘Aangepaste velden’. Hier kun je veld-namen en veld waarden ingeven. Bij geven hier bijvoorbeeld een veldnaam ‘video_code’ in en een veld waarde met de YouTube url van onze video.

In deze eerste stap, hebben we dus verteld, dat we bij een bepaald product een video willen hebben. Maar dat is nog iets anders, dan het ook zichtbaar maken. Dat doen we in de volgende stap:

<?php 
add_action( 'woocommerce_before_single_product', 'jans_woo_show_video_not_image' );
 
function jans_woo_show_video_not_image() {
   global $post;
 
   // Do this for product with video url only
   if ( get_meta_data('product',$post->ID,'video_code',true ) {
 
      remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
      remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
      add_action( 'woocommerce_before_single_product_summary', 'jans_woo_show_product_video', 20 );
 
   }
 
}
 
function jans_woo_show_product_video() {
   global $post;
   echo '<div class="woocommerce-product-gallery">';
 
// get video embed HTML from YouTube 
   echo '<iframe width="560" height="315" src="' . get_metadata('product',$post->ID,'video_code', true) . '?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>';
 
   echo '</div>';
}

Ik hoop, dat je met bovenstaand voorbeeld uit de voeten kunt.

Mocht je overigens niet in de scherminstellingen de optie ‘Aangepaste velden’  kunnen vinden, dan is het mogelijk dat een andere plugin, zoals bijvoorbeeld ‘Advanced Custom Fields’  deze mogelijkheid heeft uitgeschakeld. In dat geval zal hetgeen hierboven besproken is niet werken, en zal er wat serieuzer geprogrammeerd moeten worden. Dat valt helaas buiten het bestek van dit blogartikel.