DEV Community

Cover image for Display The Latest Products Section - P2 - Using Meta Box and Elementor
WP Meta Box Plugin
WP Meta Box Plugin

Posted on • Edited on • Originally published at metabox.io

Display The Latest Products Section - P2 - Using Meta Box and Elementor

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

https://youtu.be/KvYfEO-X4OA

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.

Top comments (0)