Skip to main content

Displaying the latest products - Meta Box + Elementor

We’ll create a section and choose the products or posts that are the latest ones to display only on the homepage.

I’ll take the restaurants as an example for products.

Example of showing latest products

Video version​

Preparation​

I will show the latest restaurants first and then the oldest ones. Each restaurant is a post of a custom post type. All the extra information of each restaurant such as address, logo, status and voucher will be saved in different custom fields.

So we need some tools for this practice:

1. Creating a new custom post type​

Go to Meta Box > Post Types > New Post Type to create a new custom post type.

Create a new post type for the latest products.

After publishing, you will see a new Restaurant menu in the Admin Dashboard.

A new menu named Restaurant appears.

2. Creating custom fields​

Go to Meta Box > Custom Fields to create a new field group. Then, create custom fields as you want.

Create custom fields for the lastest products.

You should set a simple ID to remember since we’ll need them in the next steps.

For the Status and Voucher information, they are the selections field. So, you can add some options in the Choices box like this:

Add options to the Status field

Add options to the Voucher field

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

Choose the post type as Restaurant in Location section.

When you edit any post in the Restaurant post type, you’ll see all the created custom fields. Just fill in the data.

Enter the information into fields.

3. Creating a new template​

We’re going to create a template to display the information of the restaurants.

Go to Templates > Theme Builder to add a new template .

Create a new template

Since we’ll have a list of products, choose the template as a loop.

Choose the template as a Loop.

Then, remember to set the preview in the Settings tab for having a live preview.

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

First, add an Inner Section element 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, add a Featured Image element into the created Inner Section to show the image of the restaurant.

add the Featured Image widget into the Inner Section

To get the value of the Voucher field, use a Text Editor element. Since this field is created by Meta Box, click the Dynamic Data button > choose Meta Box Field option in the Post section and connect it to the corresponding field. In this case, it’s Voucher.

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

For the Logo, add an Image element and also choose the source from a Meta Box field.

Setting for Logo field.

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

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

The Address of the restaurant is also saved in a custom field, add a Text Editor element and connect it to the corresponding field like we did to obtain Voucher information.

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. Rename the Title to View Detail and link it to the Post URL.

Setting for View Detail field.

For the Status information, just do the same as the Voucher information.

Setting for Status field.

Now, you also can see that all the information of the restaurant has been displayed.

4. Adding section to the page​

Go to edit the page where you want to display the latest products section with Elementor. I take the homepage as an example.

On the homepage, I created a title for this section, just add the posts below it.

Since there is a list of the latest restaurants, drag the Posts element to this position on the homepage for displaying them.

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.

You can also see some settings for you to display the order of posts. Since we will display the newest posts then the oldest ones, so I set the order by date and choose DESC, which means Descending options.

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

All the products are obtained and displayed in the time order: the latest post first, then the older one.

The result of displaying the latest products section before styling.

5. Styling the section​

Adding CSS code to style each element​

To style the section, you can set the CSS classes for each element in the Advanced tab.

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

After setting CSS classes for each element, choose the Section element that includes all the elements of the posts. Move to the Advanced tab > Custom CSS and add code to the box.

Add code to the box

I uploaded the code I use to Github, so you can easily refer to it.

Creating slider effect for the section (Optional)​

To have the slider effect, you should use some JS. I use the Slick Slider library for it. You can add JS code to the theme’s file or use a 3rd party plugin.

I use this JS code, you can refer to it.

I made all the manipulations on the video tutorials above. So if you want to know it in detail, please watch the video above.

Then, go to the homepage and you will see the latest products section has already turned into a slider:

The result after all steps