In this post we show you how to create a responsive comparison table and adapt it to your wishes.
1. Import template
So you do not have to start from 0, download our template from the documentation. You can find the template here.
The downloaded ZIP archive you must now unzip and then import as a template.
2. Adjust template
After you have imported our template, you can adapt it to your needs.
Each line represents a comparison value (see figure).
1. Designation
The name is the name of the comparison value. This is displayed in the header, if activated.
2. Description
The description underlines the designation of the comparison value and shows a tooltip with the description.
3. View
With this option (desktop and mobile / desktop / mobile), you can control where the comparison value should be displayed.
4. CSS class
With the CSS class, you can add your own classes to the table cell.
5. Detail
Detail is the normal placeholder input. Here you can use any product holder as you like it from the normal templates.
6. Alignment
The alignment controls only the value within the cell.
7. Remove
Removes the comparison value.
8.-9. To the top and to the bottom
Use the buttons to move the comparison values up or down.
10. Add a comparison value
Adds a new comparison value at the end.
11. Type of display
With the view type you can control whether the comparison table should switch from desktop to mobile, only mobile or only the desktop variant should be displayed.
12. Maximal products
The maximum number of products in the desktop view.
13. Maximals products (Mobile)
The maximum number of products in the mobile view.
14. Horizontal scrollbars
With the horizontal scrollbar, you can also display more than 3 or 4 products on one page. Here, the content is then simply scrolled.
If the price comparison drop-down causes problems with this option, you should push it up.
15. Hide headspace
With the hiding of the headspace, additional space can be created, but this only counts for the “desktop” version.
16. Mobile template
This template is used when the Desktop and Mobile or Mobile view type is selected. The placeholders can be used as in the detail area of the product template. In addition, there is the placeholder% mobiletable% for the mobile variant of the comparison table.
17. Header
The header area for the comparison table.
The foot area for the comparison table.
19. Deactivate disclaimer
If you do not want to display your disclaimer, you can disable it here.
3. Insert shortcode
The templates are output as usual via the shortcode generator. Just select your comparison table.
4. View result
Some styles may be overwritten by your theme. As a result you should then get such an output:
Desktop version
Demoempfehlung 1  |  | Demoempfehlung 2  | |
| Link | PHP 7 und MySQL: Von den Grundlagen bis zur prof. Programmierung* | Erfolgreiche Websites: SEO, SEM, Online-Marketing, Kundenbindung, Usability* | HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen.* |
| Testergebnis | Demo-Bewertung1,1GutJuni 2017 | Demo-Bewertung1,2Sehr gutMai 2017 | |
| Kundenbewertung | |||
| Preis | Price not available Price incl. VAT., Excl. Shipping | Price not available Price incl. VAT., Excl. Shipping | Price not available Price incl. VAT., Excl. Shipping |
| Hersteller | |||
| Verfügbarkeit | |||
| Eigenschaften | Von den Grundlagen bis zur professionellen Programmierung | SEO, SEM, Online-Marketing, Kundenbindung, Usability | Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. |
| Price not available Price incl. VAT., Excl. Shipping | Price not available Price incl. VAT., Excl. Shipping | Price not available Price incl. VAT., Excl. Shipping | |
| zum Anbieter | Jetzt bei ansehen* | Jetzt bei ansehen* | Jetzt bei ansehen* |
| weitere Angebote |
Mobile version
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | Von den Grundlagen bis zur professionellen Programmierung |
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | SEO, SEM, Online-Marketing, Kundenbindung, Usability |
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. |