From 7.1 version we added some unique ways to make epic Versus posts. What is Versus Posts? It’s something like “Product VS Product” where you compare 2 or 3 products and give users some ideas which is better to buy.
We found that such pages have a really big love from google, so we added some templates and ready shortcodes for page builder.
First of all, check new demo for such pages
In first screen we made sliders for Revolution slider (bundled with theme). We will provide special page where you can download all unique sliders soon
Then, we use shortcode widget from Content Egg (this is not required, you can use any other shortcode from Offer hub tutorial)
Next part is new – Versus Table.
This is really great thing, for this, you need to use Versus Line module from page builder. You can add ready template (Element: Versus Line Block) on page. It’s easy to use this module, just add new line, add content for 1 column and second column, choose background color (or leave blank) and choose which column must be not highlighted (to highlight value which is better). First line better to make with light grey background and add there images, so, this line will be as heading.
In side columns I added also images and buttons (Button module) which goes to each product. If you want to import value of price from this product, add text module and shortcode
Price from $[wpsm_custom_meta field=_price post_id=72]
this shortcode will grab price value from product with ID 72 and will show it on page
In side columns, make all content as center aligned for better mobile UI
Next part which I use is section divider with subheading. You can find ready template in page builder for this (Elements: Section divider with two headings). I recommend to place image with dark style in background of this row, so, you will have interesting parallax effect
Next helper thing is Comparison Bars.
I used shortcode from shortcode generator with name. How it works. You set maximum value of bar which is equal to 100%. Then, add each line with it’s value. Theme will count each value and show it in comparison with maximum value. This is great tool to show differences between two product specifications.
I also added woocommerce attribute comparison bars. It’s working the same, but you don’t need to add all data manually, you just need to choose products which you want to compare and attributes. Read more
Also, when you make any comparison, maybe you want to add some small text who is winner. We added small helper
Just click on icon and you will have emoji special cup badge in post
Next thing is comparison of latest reviews. Use next shortcode
Also, you can add multiple review boxes with final verdicts. Use reviewbox shortcode from shortcode generator