In the previous part of the series “How to display the Latest Products section in different ways”, we learned how to do it with Meta Box and Gutenberg. As promised, we’re showing you another method that uses Meta Box and a page builder. Today, I choose Elementor.

I’m also going to create this section with the posts in time order: the latest products first, then the older ones. It will look like this:

the example of creating the latest products section

Now, let’s start!

Before Getting Started

To do it, we need Elementor first. Here I use Elementor Pro which has integration with Meta Box. You also need other tools as follows:

FYI, here I use Ocean WP theme which is compatible with Elementor. Otherwise, you can choose any other ones which are compatible with Elementor as well.

Video Version

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type.

Create a new post type for the latest products.

After publishing it, a new menu appears.

A new menu named Restaurant appears.

Step 2: Create Custom Fields for The Custom Post Type

Go to Meta Box > Custom Fields > Add New. Meta Box Builder provides a UI in the back end to create custom fields without using code. But you also can code by yourself or use code generated by Online Generator.

Create custom fields for the lastest products.

I just need to fill in the Label and ID for fields. It is quite easy, but you should choose a simple ID to remember easily. Because you will need them in the next steps.

Meta Box supports over 50 field types, so you can choose any type of them for your own case. Here are the fields that I chose.

Field Type Name  ID
Text Address address
Single Image Logo logo
Select Status status
Checkbox List Voucher voucher

For the Status and Voucher fields, I added the options in the Choices section like this:

Add options to the Status field
Add options to the Status field
Add options to the Voucher field
Add options to the Voucher field

After creating all the fields, move to the Settings tab. In the Location section, choose the Post Types as Restaurant to apply these fields to it.

Choose the post type as Restaurant in Location section.

Now, go to the post editor in Restaurant post type, you will see the fields and can enter information into them.

Enter the information into fields.

Step 3: Create a New Template

Go to Templates > Theme Builder.

Create a new template

We will have a list of products, so we should choose the template as a loop. This option is available when you have Elementor Custom Skin.

Choose the template as a Loop.

To have the live preview, you can choose any post of the post type that you want in the Settings tab.

Choose any post of the post type in the Settings tab.

Firstly, I add an Inner Section to group some elements that I want to style at once as the featured image, logo, and voucher.

Add an Inner Section to group some elements

It has 2 columns inside so I’ll remove one.

Remove 1 columns in Inner Section.

Next, I add the Featured Image widget into the Inner Section.

add the Featured Image widget into the Inner Section

Then, to get the value of the Voucher field, add a Text Editor element and link it to the field following what I’m doing in the below picture.

Click on the Dynamic Tags icon > choose Meta Box Field option in the Post section > choose the field you want.
Click on the Dynamic Tags icon > choose Meta Box Field option in the Post section > choose the field you want.

And then, the value that you input to the corresponding field will display in the preview.

For the Logo, just add an Image widget, and choose the source from a Meta Box field as well.

Setting for Logo field.

Here I set the logo size as Thumbnail to scale down the image.

set the logo size as Thumbnail to scale down the image.

Moving on, out of the Inner Section, I add a Post Title widget and link it to the Post URL.

add a Post Title widget and link it to the Post URL.

The Address of the restaurant also will be got from the value of the custom fields in the same way with the Voucher. So, add a Text Editor and link it to the Address field.

Settings for Address field.

When users hover over the featured image of the restaurant, I want a text as View Detail display, so I add a Heading widget here. I also rename the Title to View Detail and link it to the Post URL.

Setting for View Detail field.

The last one, the Status is the same as the Voucher, so do likewise and link it to the Status field.

Setting for Status field.

Step 4: Add a Section for the Latest Products on the Homepage

Now, I will add the list of the latest restaurants to this position on the homepage. It is a list of posts, so I drag the Post widget to here.

add the list of the latest products to the position on the homepage

Because I have the Elementor Custom Skin plugin, I have an option to set the skin as Custom.

Choose Custom in Skin tab.

Then, select the Default Template as the template which we have just created.

Next, in the Query section, choose the source as the post type of your products.

In the Query section, choose the source as the post type of your products.

Now, the preview shows the posts with exactly the information we want. And the products are in the time order: the latest post first, then the older one without any further configuration.

The result of displaying the latest products section before styling.

We will style this section in the next step.

Step 5: Set CSS Classes for the Elements

Before styling my latest restaurants section on the homepage, I set CSS classes for each element in the Advanced tab.

In the Advanced tab, set CSS classes to prepare styling for the latest products section.

This step is so easy, but it will help in the next steps.

Step 6: Create Slider for The Latest Products Section

As you’ve seen at the beginning, my latest restaurant section is in a slider. To have it, I use some JS and CSS. But instead of adding them directly to the theme, I’m using the My Custom Functionality plugin, so when I change the theme, the slider won’t be affected. You can download this plugin from GitHub and install it on your website.

Download the JS and CSS Library

For the JS and CSS, I use the Slick library. It is also available on GitHub. It includes several files as you can see here. But, we just need three of them.

use 3 files CSS and JS in Slick library.

Go to the folder of the My Custom Functionality plugin, and upload them into the corresponding JS and CSS folders.

pload the slick-theme.css file into the css folder of My Custom Functionality plugin

Set Up The Slider Effect

Next, to set up the slider effect of Slick Slider, I’ll create a custom.js file in the JS folder, and add this code to it.

create a custom.js file in the JS folder, and add code to it

jQuery(document).ready(function ($) {
    jQuery(".list-restaurant .ecs-posts").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        nextArrow: '<button class="next-btn">Next</button>',
        prevArrow: '<button class="prev-btn">Previous</button>'
    });
    jQuery('.status-res .elementor-text-editor').each(function () {
        if (jQuery.trim(jQuery(this).html()) == 'Open') {
            jQuery(this).parents('.status-res').addClass('open');
        } else {
            jQuery(this).parents('.status-res').addClass('close');
        }
    });
})

Explanation:

  • jQuery(".list-restaurant .ecs-posts").slick({}): We use it to create a slider with the Slick Slider’s style for the elements in the .list-restaurant .ecs-posts class;
  • jQuery('.status-res .elementor-text-editor').each(function () {}): It will create a dynamic class depending on the returned values of the restaurant’s status in the section that I put in the status-res class. If the returned value is open, the class will be open. In return, the value is close, the class will be close.

Declare the JS and CSS Files

Go to the plugin.php file and add this code into the custom_enqueue_files() function:

wp_enqueue_style('slick', plugin_dir_url( __FILE__ ).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url( __FILE__ ).'/assets/css/slick-theme.css');
wp_enqueue_script('custom', plugin_dir_url( __FILE__ ).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url( __FILE__ ).'/assets/js/slick.min.js', ['jquery']);

Now, go to the homepage, my latest restaurants section has already turned into a slider.

the latest products section is displayed as a slider

But it hasn’t looked good yet. So, it’s time to add some additional CSS.

Step 7: Add CSS to Style The Latest Products Section

Back to the Template we’ve just created. In the Navigator, choose the Section element that includes all the elements of the posts we show on the Latest Products section. And move to the Advanced tab > Custom CSS and add code to the box.

Add CSS to style the latest products section

I uploaded the code to GitHub, so you can try it.

Now, back to the homepage, the slider turned to a beautiful one.

The final result of is display the latest products section

Last Words

As you see, displaying the Latest Products section on the front end in time order with Meta Box and Elementor is so intuitive. You just need to drag and drop without much coding and can preview the page easily.

Besides, if you want to try other plugins or compare which way is better, don’t forget to read other articles in this series.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. Display the Most Viewed Posts - P1 - using MB Views
  13. How to Add Custom Fields to Display Banners using Meta Box Plugin
  14. How to Add Guest Author in WordPress using Meta Box (Part 1)
  15. How to Add Guest Author in WordPress using Meta Box (Part 2)
  16. How to Add Related Posts to WordPress Using Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P1
  18. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  19. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  20. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  21. How to Create a Classified Ads Website using Meta Box
  22. How to Create a Product Page - P2 - Meta Box + Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box + Bricks
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe with Meta Box Plugin
  31. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  32. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  33. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  34. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  35. How to Create a Team Members Page - P4 - Just Meta Box
  36. How to Create ACF Flexible Content Field with Meta Box
  37. How to Create an Auto-Updated Cheat Sheet in WordPress
  38. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  39. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  40. How to Create an FAQs Page -P3- Using Meta Box
  41. How to Create Buttons with Dynamic Link using Custom Fields
  42. How to Create Category Thumbnails & Featured Images Using Custom Fields
  43. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  44. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  45. How to Create Online Admission Form for School or University
  46. How to Create Online Reservation Form for Restaurants using Meta Box
  47. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  48. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  49. How to Display Images from Cloneable Fields - P2 - with Oxygen
  50. How to Display Images from Cloneable Fields - P3 - with Elementor
  51. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  52. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  53. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  54. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  55. How to Manually Reorder Posts with Meta Box
  56. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  57. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply