In deze handleiding leg ik uit hoe je de thumbnails uit de product gallery op de winkelpagina kunt weergeven bij het product. Bekijk het onderstaande screenshot voor een voorbeeld.
Stap 1: Stel de WooCommerce product gallery in
Bij het toevoegen van een nieuw product moet je een productafbeelding en aanvullende afbeeldingen aan de productgalerij toevoegen.
Bij het maken van een nieuw product kun je aan de rechterkant onder ‘Product gallery’ afbeeldingen aan de galerij toevoegen. Voeg afbeeldingen toe en sla het product op.
De code in deze tutorial toont op de winkelpagina maximaal drie thumbnails per product. Deze thumbnails zijn de eerste drie afbeeldingen van de product gallery.
Stap 2: Voeg de code toe aan functions.php
Voeg de volgende code toe aan het functions.php-bestand van je thema.
/**
* Voeg galerij thumbnails toe aan de WooCommerce winkelpagina.
*/
add_action('woocommerce_shop_loop_item_title', 'wpx_add_extra_product_thumbs', 5);
function wpx_add_extra_product_thumbs() {
if ( is_shop() ) {
global $product;
// Haal de bijlage-IDs op van de productgalerij.
$attachment_ids = $product->get_gallery_attachment_ids();
// Begin met de weergave van de thumbnails.
echo '<div class="product-thumbs">';
// Loop door de eerste drie bijlage-IDs en toon de thumbnails.
foreach( array_slice( $attachment_ids, 0, 3 ) as $attachment_id ) {
$thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
echo '<img class="thumb" src="' . $thumbnail_url . '">';
}
// Sluit de div voor de thumbnails af.
echo '</div>';
}
}
Dit codefragment plaatst de extra thumbnails direct voor de producttitel. Ik heb de hook ‘woocommerce_shop_loop_item_title’ gebruikt met prioriteit 5 hiervoor. De juiste positie is afhankelijk van het thema dat je gebruikt. Probeer een andere hook als de thumbnails niet op de juiste plek worden weergegeven. Een handige tool om de juiste hook te vinden is de plugin ‘Simple Show Hooks’.
In dit voorbeeld toon ik slechts de eerste drie thumbnails. Als je een ander aantal thumbnails wilt weergeven, moet je dit stukje code ($attachment_ids, 0,3 ) aanpassen. Wijzig het nummer drie in het gewenste aantal.
Stap 3: Voeg CSS-styling toe
Zodra je de thumbnails zichtbaar hebt op de winkelpagina, moet je ze voorzien van wat extra styling (CSS). Hier zijn enkele basisregels die je aan je stylesheet kunt toevoegen om je op weg te helpen.
Voeg het volgende toe aan je style.css-bestand:
/* Product thumbnails shop page
--------------------------------------------- */
.product-thumbs {
display: block;
overflow: auto;
margin: 10px 0;
width :100%;
}
.product-thumbs .thumb {
float: left;
margin-bottom: 10px;
width: 30%;
}
.product-thumbs .thumb:nth-child(2) {
margin: 0 5%;
}Als je in functions.php het aantal thumbnails dat je wilt weergeven wijzigt, moet je ook de CSS aanpassen. Dat is logisch, toch?
