Artikelen uitlijnen in je WooCommerce webshop

In deze tutorial gaan we -redelijk eenvoudig- de producten in onze catalogus (WooCommerce Catalog) netjes uitlijnen, zodat de foto’s, tekst en prijs netjes uitgelijnd en gecentreerd staan, ongeacht de grootte van de productfoto en de lengte van de titel. Dit gaan we doen door middel van het aanpassen van de Catalogus bestand in ons WooCommerce childtheme.

De webshop zoals je hem krijgt als je geen uitlijning doet zie je hieronder. Duidelijk zichtbaar zijn de knoppen die op verschillende hoogten staan. Naar onze mening niet echt netjes.

Woocommerce - voor -align

Om de producten netjes verticaal uit te lijnen, openen we het bestand content-product.php. Omdat we eerder een WooCommerce child-theme hebben opgezet, gaan we deze nu ook gebruiken. Open het bestand dus uit de map: wp-content/themes/THEME-child/woocommerce. Wij werken zoals altijd met het twentythirteen theme.

Mocht je niet met een child-theme werken, dan kan je het bestand ook openen uit de map wp-content/plugins/woocommerce/templates).

In het bestand, gaan we de producten in een tabel zetten. Maar laten we allereerst eens kijken hoe de catalogus pagina is opgebouwd.
Zoals we zien, staan er 4 producten naast elkaar. Elk product bestaat vervolgens uit een foto, een titel, een prijs en een knop die direct naar de adverteerder leidt. Omdat de foto’s bepalend zijn, gaan we deze in ons geval niet in de tabel zetten. Om de producten goed uit te lijnen, is het in ons geval genoeg om de drie overige items in de tabel zetten, waarbij we de tabel bepaalde kenmerken geven waardoor de items op een nette manier worden vertoond.

Stap 1: zoek de code die de de titel van de WooCommerce producten genereert: <h3><?php the_title(); ?></h3> en zet hier de volgende code voor, waarmee we de tabel aanmaken:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>

Stap 2: Vervang vervolgens de code:

<h3><?php the_title(); ?></h3>

vervang deze door de volgende code:


<td height="120" style="vertical-align: top; text-align: center;"><h3><?php the_title(); ?></h3></td>
</tr>

Hierbij is de term height=”120″ belangrijk, omdat deze de hoogte van de titel bepaald. Wij zien namelijk in onze webshops dat de titel de ene keer uit 3 woorden bestaat, en een andere keer uit 10 woorden. Deze verschillen bepalen hoe “scheef” de producten uiteindelijk staan. In ons geval is een hoogte van 120 genoeg om de producten uit te lijnen, maar dit verschilt per webshop. Wij hebben dit gemeten door te kijken hoe groot de langste titel in de webshop was, en hierop het getal aangepast.

Stap 3: de omschrijving van het product uitlijnen
Op de volgende regels (zie plaatje hieronder) staat de loop die in onze de webshop de omschrijving van het product en de prijs regelt. Zet deze ook in de tabel door de volgende code:

<tr> <td style="vertical-align: top; text-align: center;">
en sluit de loop af met een </td> waardoor de loop er als volgt uit komt te zien:

Producten loop

Stap 4: de button onder het product uitlijnen

De laatste stap is de code <?php do_action( 'woocommerce_after_shop_loop_item' ); ?> vervangen, zodat deze ook in de tabel komt. Vervang deze dus voor de volgende code, waarmee je ook direct de tabel afsluit:

<tr>
<td style="vertical-align: top; text-align: center;">

<?php do_action( ‘woocommerce_after_shop_loop_item’ ); ?> </tr>
</table>

Sla je bestand in de juiste map op en voila, je producten zijn perfect uitgelijnd!

Woocommerce - na -alignNB. Om het einde van elke lijn te markeren, hebben we er er een streepje tussen gezet.

In deze 4 stappen hebben we laten zien hoe eenvoudig onze Woocommere webwinkel kan worden uitgelijnd zodat alle producten netjes naast elkaar staan.

De uiteindelijke aangepaste code ziet er in het geval van twentythirteen theme als volgt uit:

WooCommerce catalogus uitlijnen

7 reacties op “Artikelen uitlijnen in je WooCommerce webshop”

  1. Goedemiddag,

    wat een goed artikel! Na dagen gepuzzel toch maar de vraag. Mijn artikelnaam staat direct naast de prijs waardoor mijn benaming onlogisch wordt doorgedrukt naar de volgende regel. Bv:

    Gootst
    een
    haarver
    wijdera
    ar

    Het lijkt erop dat de benaming niet genoeg ruimte krijgt. Waar kan ik dit aanpassen? Ik heb werkelijk alles geprobeerd wat ik kan.

    Mijn dank is alvast groot!

    1. Hi Ilona, dat zou met custom css eenvoudig moeten worden opgelost. Kan je mij de pagina linken, dan check ik het even.

      Gr. Tascha

  2. Geweldig artikel! Nergens heb ik dit kunnen vinden. Helaas ziet mijn php bestand er anders uit. Is het ook op andere manieren te realiseren? Het lukt bij mij niet….

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *