Create A Custom Product Review Block With Lazy Blocks

Product reviews are all the rage these days – and in order for them to convert well, they need to look good and be easy for the user to understand why they need the product or service you are reviewing.

This tutorial uses Lazy Blocks to create a custom Product Review block that has a few cool options to allow you to use it in 2 different ways – as a features list or with a pros and cons list!

You can see examples of both below.

Option 1: Single Product With Features List

Below is how the block looks on one of our own websites in a buying guide for a specific product. We do not consider this a “review” but just a recommendation for users so we just wanted to share the image and some important details for the user to help them decide if it is worth reviewing further.

You can see the features list on the bottom with checkmarks next to them.

Gutenberg block with featured items review.

Option 2: Single Product Review With Pros & Cons List

This is the block option we like to use if we are doing a true product review and are able to clearly show the pros and cons of the item. Below is the sample of the sample above with the pros and cons list.

This option allows you to have 2 columns – 1 for the pros and 1 for the cons and has corresponding checkmarks or x’s to give some visual pop.

Again – these are both created from the same Gutenberg block!

The Lazy Block Fields

The block has the following fields for you to use:

Title – product title
Title Background Color – you can select a color or add your own brand colors
Uploaded Image – allows you to add an image from the media gallery or upload one
Amazon Image – this will be used if you are using the code from Amazon to use as a product image
Button Text – your call to action for the button like Buy Now on Amazon for example
Button Link – the url for the product so users can learn more or buy
Button Color – you can select a color or add your own brand colors
Product Description – an editor to add some general thoughts about the product
Pro Box – allows you to add a text field for each pro you want to add
Con Box – allows you to add a text field for each con you want to add
Features Box – allows you to add a text field for each feature you want to add
Bottom Box Color – you can select a color or add your own brand colors

If you have content in the FEATURES box and the PRO/CON Boxes they will both show on the front end. If you have no content in them – they will not show.

Building A Review Block With Lazy Blocks: Step By Step

Before you do anything, you will need to have Lazy Blocks installed and activated. Once installed you can dive in and get started!

1. Adding A New Block

Go to LAZY BLOCKS then click ADD NEW. Make sure your editor is set to block editor or you will not see the fields you need to see. You should see the screenshot shown below if Lazy Blocks is ready to use.

2. Naming The Block

In the right of the screen above click on the Block tab under the publish button.
Enter Review – Single Product in the title box.
Enter review-single-product in the slug block (it should auto populate after you enter the title)
Select an icon of your choice – we selected a star
(optional) choose a category that will hold your block we like to use Lazy Blocks
(optional) add keywords to help you find your block, we used product and review as keywords.
(optional) add a description to remind you what the block is for
Click the SUPPORT toggle below the description box and make sure Multiple is turned on so you can use this block multiple times on a page
Click Publish

3. Adding The Fields

All fields below are added by clicking the ADD CONTROL (circle with plus sign in it) area in the main part of the screen as shown above.

The options for each field will be done in the sidebar where there is a BLOCK and CONTROL tab. You will want to make sure you are on the CONTROL tab to edit each field.

Click the add control box to get started and enter the following fields.

TITLE FIELD

Enter Title for label
Enter title for name field
Select Text for type

TITLE BACKGROUND COLOR

Enter Title Background Color for label
Enter title-background-color for name field
Select Color Picker for type

UPLOADED IMAGE

Enter Uploaded Image for label
Enter uploaded-image for name field
Select Image for type

AMAZON IMAGE

Enter Amazon Image for label
Enter amazon-image for name
Select Code Editor for type

BUTTON TEXT

Enter Button Text for name field
Enter button-text for name field
Select Text for type

BUTTON LINK

Enter Button Link for name field
Enter button-link for name field
Select Text for type

BUTTON COLOR

Enter Button Color for label
Enter button-color for name field
Select Color Picker for type

PRODUCT DESCRIPTION

Enter Product Description for label
Enter product-description for name field
Select Rich Text (WYSIWYG) for type

PRO BOX

Enter Pro Box for label
Enter pro-box for name field
Select Repeater for type
Enter Add New Pro Item in add button label
Select Yes and Collapsed by Default under collapsible rows
In the main screen area under Pro Box click Add Child Control (click on the show child controls link to open the control area)
Enter Pro Item for label
Enter pro-item for name
Select Text for type

CON BOX

Enter Con Box for label
Enter con-box for name field
Select Repeater for type
Enter Add New Con Item in add button label
Select Yes and Collapsed by Default under collapsible rows
In the main screen area under Con Box click Add Child Control (click on the show child controls link to open the control area)
Enter Con Item for label
Enter con-item for name
Select Text for type

FEATURES BOX

Enter Features Box for label
Enter features-box for name field
Select Repeater for type
Enter Add New Feature Item in add button label
Select Yes and Collapsed by Default under collapsible rows
In the main screen area under Features Box click Add Child Control (click on the show child controls link to open the control area)
Enter Feature Item for label
Enter feature-item for name
Select Text for type

Below is a sample image for the Features, Pro and Con Box so you can see how they should look.

BOTTOM BOX COLOR

Enter Bottom Box Color for label
Enter bottom-box-color for name field
Select Color Picker for type

Click Update

Once the above is done you should now have a screen that looks something like the below.

4. Building The Code

Below your fields there is a CODE box where you will enter the code that makes the magic happen on the front end. LazyBlocks has several options for their code options, but for this one we are using what are called handlebars. Handlebars are the items that are in the {{ }} items and are simply calling the field names above.

You can simply copy the code below and add it to your Code block – then click UPDATE!

Now your block is ready to go on the front end.

<div class="block-review">
  <h3 style="background-color:{{title_background_color}}">{{title}}</h3>
{{#if image}}
 <center><img src="{{image.url}}" alt="{{image.alt}}"></center>
{{/if}}  
{{#if amazon_image}}
 <center>{{{amazon_image}}}</center> 
{{/if}}  
<center><a class="buttonamazon" href="{{check_price_link.url}}" target="_blank" rel="nofollow sponsored" style="background-color:{{button_color}}">{{check_price_text}} <i class="fa fa-arrow-right"></i></a></center>
  <p>{{{description}}}</p>
  
  {{#if pro_box}}
      <div class="overview">
        <div class="pros">
          <h4>PROS</h4>
            <ul>{{#each pro_box}}
              <li><i class="fa fa-check"></i> {{pro_item}}</li>
            {{/each}}</ul>
        </div>
        {{/if}}
  {{#if con_box}}      
        <div class="bad">
          <h4>CONS</h4>
            <ul>{{#each con_box}}
              <li><i class="fa fa-times"></i> {{con_item}}</li>
            {{/each}}</ul>
        </div>
      </div>
  {{/if}}
  {{#if features}}  
    <div class="features">
      <div class="feature-items">
        <h4>FEATURES</h4>
         <ul>  {{#each features}}
          <li><i class="fa fa-check"></i> {{feature_item}}</li>
          {{/each}}</ul>
      </div>
    </div>
{{/if}}
  
  <div class="bottombox" style="background-color:{{bottom_box_color}}">
    <a href="{{check_price_link.url}}" target="_blank" rel="nofollow sponsored">{{check_price_text}} <i class="fa fa-arrow-right"></i></a></div>
  </div>

Need help customizing your website?

We can’t wait to talk about your project. Let’s set up a call.