Vor- & Nachteile und Bilder in der Vergleichstabelle von WP Product Review Pro

Die Vergleichstabelle des WordPress Plugins WP Product Review Pro* ist eine sehr schöne Sache.

Damit ist es sehr einfach eine ansprechende Vergleichstabelle zu erstellen.

Allerdings fehlten mir darin die Vor- & Nachteile und die Produktbilder. Im Folgenden erkläre ich euch wie ihr das recht einfach einbauen könnt.

WP Product Review Pro – Vergleichstabelle

Das Plugin WP Product Review Pro ist die kostenpflichtige Version des kostenlosen Plugins WP Product Review.

Mit der kostenlosen Version kann man bereits sehr schöne Produkt-Boxen mit Bewertungen erstellen. Aber erst in der Pro-Version kann man daraus auch automatisch Vergleichstabellen erstellen.

Diese Vergleichstabellen sehen sehr gut aus, wie man an diesem Beispiel sehen kann, und bieten dem Besucher einen sehr guten Produktvergleich mit einem attraktiven Call to Action. Das steigert die Anzahl der Sales.

Vor- und Nachteile einbauen

Standardmäßig gibt die Vergleichstabelle den Produktnamen, die Gesamtbewertung, einen Link zum Review, eine Beschreibung, die bis zu 5 Einzelbewertungen und einen Button (mit dem Affiliatelink) aus.

Mir haben in der Tabelle aber die Vor- und Nachteile gefehlt, die man ja auch für jedes reviewte Produkt anlegen kann. Also habe ich in den Code geschaut und diese Spalte ergänzt.

Vor jeglichen Änderungen aber bitte ein Backup der Plugin-Dateien machen!

Um eine weitere Spalte einzubauen, müssen wir die Datei

...plugins/wp-product-review-pro/inc/addons/wppr-comparison-table/view/table.php

bearbeiten.

Darin findet man ausschließlich den kompletten <table> Code für die Vergleichstabelle. Unter <thead> sind die Spaltenüberschriften der Vergleichstabelle zu finden. Diese werden per PHP ausgegeben.

Ich wollte die Spalte „Vor- und Nachteile“ als vorletzte Spalte, also vor dem Button einbauen. Deshalb habe ich über:

<th><?php echo __( self::$settings['cwppose_lang_link'], 'cwppos' ); ?></th>

eine Leerzeile eingefügt und dort folgenden Code eingegeben:

<th>VOR- & NACHTEILE</th>

Damit haben wir schon mal die Überschrift der Spalte. Nun müssen wir noch die Vor- und Nachteile der Produkte ausgeben.

Dazu scrollen wir in der Datei etwas weiter runter, bis ca. zu Zeile 64. Dort müsste folgendes stehen:
<?php endif; ?>

Darüber habe ich wieder eine Leerzeile erzeugt und den folgenden Code eingefügt:

<td>
<ul style="line-height:1.1em; font-size:10pt; font-weight:normal; color:green; text-align:left; margin-left:-25px;">
<?php
$prometa1 = get_post_meta($review["post_id"],"cwp_option_1_pro", true);
if ($prometa1 != "") echo "<li style='padding-bottom:0px;'>".$prometa1."</li>";
$prometa2 = get_post_meta($review["post_id"],"cwp_option_2_pro", true);
if ($prometa2 != "") echo "<li style='padding-bottom:0px;'>".$prometa2."</li>";
$prometa3 = get_post_meta($review["post_id"],"cwp_option_3_pro", true);
if ($prometa3 != "") echo "<li style='padding-bottom:0px;'>".$prometa3."</li>";
$prometa4 = get_post_meta($review["post_id"],"cwp_option_4_pro", true);
if ($prometa4 != "") echo "<li style='padding-bottom:0px;'>".$prometa4."</li>";
$prometa5 = get_post_meta($review["post_id"],"cwp_option_5_pro", true);
if ($prometa5 != "") echo "<li style='padding-bottom:0px;'>".$prometa5."</li>";
?>
</ul>
<ul style="line-height:1.1em; font-size:10pt; font-weight:normal; color:red; text-align:left; margin-left:-25px;">
<?php
$consmeta1 = get_post_meta($review["post_id"],"cwp_option_1_cons", true);
if ($consmeta1 != "") echo "<li style='padding-bottom:0px;'>".$consmeta1."</li>";
$consmeta2 = get_post_meta($review["post_id"],"cwp_option_2_cons", true);
if ($consmeta2 != "") echo "<li style='padding-bottom:0px;'>".$consmeta2."</li>";
$consmeta3 = get_post_meta($review["post_id"],"cwp_option_3_cons", true);
if ($consmeta3 != "") echo "<li style='padding-bottom:0px;'>".$consmeta3."</li>";
$consmeta4 = get_post_meta($review["post_id"],"cwp_option_4_cons", true);
if ($consmeta4 != "") echo "<li style='padding-bottom:0px;'>".$consmeta4."</li>";
$consmeta5 = get_post_meta($review["post_id"],"cwp_option_5_cons", true);
if ($consmeta5 != "") echo "<li style='padding-bottom:0px;'>".$consmeta5."</li>";
?>
</ul>
</td>

Hier gehe ich also die maximal 5 Pro- und Kontra-Einträge jedes Produktes durch und wenn diese nicht leer sind, werden sie in einer Liste ausgegeben. Die Vorteile in grün und die Nachteile in rot.

Meine Empfehlungen für AffiliatesWERBUNG
Umfangreiche Bewertungsbox mit WP Product Review Das Plugin WP Product Review bietet nicht nur tolle Bewertungsboxen, sondern z.B. auch eine Vergleichstabelle. www.themeisle.com
Neues Gutschein-Affiliate-Plugin für WordPress Deutschsprachiges WordPress-Plugin zur flexiblen Anzeige von Gutscheinen und Rabatten, um mehr zu verdienen. www.affcoups.com
Erfolgsversprechen: 100 % mehr Besucher für Ihre Website! SEO Coach und Ex-Google Mitarbeiter Jonas Weber bietet über 10 Jahre SEO Know-how. seo-kurs.de

Produktbilder

Amazon Affiliate WordPress PluginWERBUNG

Zudem haben mir die Produktbilder gefehlt, die so eine Vergleichstabelle doch erst optisch richtig schön machen.

Dazu sucht ihr in der Datei diese Zeile:

<?php if(is_numeric(array_search("img", self::$arguments))): ?>

Diese prüft, ob es ein Bild gibt, aber das funktioniert leider nicht bei einem über eine Amazon-URL eingebundenen Produktbild.

Deshalb kommentieren wir diese Zeile mit einer Raute aus:

<?php # if(is_numeric(array_search("img", self::$arguments))): ?>

Dasselbe machen wir bei 3 weiteren Zeilen, so dass der komplette Code für die Ausgabe des Produktnamens und des Produktbildes so aussieht:

<?php # if(is_numeric(array_search("img", self::$arguments))): ?>
<h2><?php echo $review['product_title']; ?></h2>
<img id="cwppose_pimg" src='<?php echo wppr_get_image_id($review["post_id"],$review['product_image']); ?>' >
<?php # else: ?>
<h2><?php # echo $review['product_title']; ?></h2>
<?php # endif; ?>

Zudem habe ich in der zweiten Zeile die Klasse (class=“cwppose_hide“) aus dem h2-Tag entfernt. Nun wird immer der Produktname und das Produktbild angezeigt.

CSS

Man kann die Vergleichstabelle noch weiter gestalten, indem man die CSS-Klassen anpasst. Auf diese Weise kann man z.B. die Schrift in einzelnen Bereichen kleiner machen.

Das funktioniert wie immer bei CSS-Anpassungen und wird deshalb hier nicht weiter beschrieben.

Vorsicht Update!

Da die Einbindung des Produktbildes und der Vor- und Nachteile direkt im Code des Plugins geschieht, sollte man vor einem Update des Plugins ein Backup durchführen.

Beim Update wird natürlich auch die bearbeitete Datei überschrieben und durch die neueste ersetzt. Dann müsste man den Code wieder einfügen.

Amazon Education CentreWERBUNG

11 Gedanken zu „Vor- & Nachteile und Bilder in der Vergleichstabelle von WP Product Review Pro“

  1. Hey Peer,
    danke dir für diese Beschreibung! Da haben sich die Jungs von Product Review ja nicht allzu viel Mühe gegeben :/ Daran hätten die wohl denken können – aber um so größeren Dank an dich!

    Antworten
  2. Hallo Peter,
    Für welche WP Prodcut Review Version hast du die Anleitung geschrieben?
    Ich habe die WP Product Review Lite Version 2.9.5, kann leider den von dir angegebenen Pfad auf meinem FTP Server nicht finden. Wäre nett wenn du mir helfen könntest.

    Antworten
    • Die Vergleichstabelle gibt es nur in der kostenpflichtigen Pro-Version des Plugins. Deshalb kannst du den Pfad auch nicht in der Lite-Version finden.

      Antworten
  3. Hi Peer,
    es gab ja ein Update für die Tabelle.
    Jetzt kann man auch direkt die Preise anzeigen.
    Bei mir klappt das einfach nicht, hast du dafür eine Lösung?
    Die Spalte wird angezeigt, aber es sind keine Preise drin.

    Antworten
    • Soweit ich weiß gab es die Spalte schon immer, aber da werden von Hause aus keine dynamischen Preise angezeigt, sondern der Preis, den man im Produkt Review Formular eingibt.

      Ich habe mir da selbst was mit AAWP gebastelt, so dass der aktuelle Amazon Preis angezeigt wird.

      Ich werde mal in einem Artikel hier erklären, wie ich das gemacht habe.

      Antworten
      • Hallo Peer,

        hast du schon ein Artikel dazu geschrieben, wie du mit AAWP den Preis in die Vergleichliste einfügst?
        Würd mich wirklich brennend interessieren, damit ich das auf meine Webseiten übernehmen kann.

        Antworten
        • Leider geht das nur, wenn man den Code den Product Review Plugins anpasst. Das ist aber leider problematisch, da Updates des Plugins die Änderungen dann wieder zunichte machen.

          Antworten
          • Das ist ja kein Problem, ich update WP Produkt Review Lite einfach nicht :P Ich benutze auch AAWP hab mir damit auch schon viel selbst gebastelt, aber den Preis in die Tabelle einfügen hab ich noch nicht hinbekommen. Werde ich mich wohl nochmal hinsetzen müssen.

Schreibe einen Kommentar