By default, all post types and taxonomies have an archive page in WordPress. Toolset allows you to customize these archive pages, and WPBakery Page Builder (formerly Visual Composer) allows you to design the how individual posts are listed on them.
If you are new to the idea of archives, please consult our short page about the meaning and importance of archive pages. And if you want to design the listing of your WooCommerce products, visit our page about creating a customized Shop page using WPBakery Page Builder and Toolset.
Through this tutorial, we will explain how to create an archive page containing a two-column list of all posts belonging to our custom “Tours” post type:
- Go to your Toolset Dashboard and click on the Create Archive button within the custom post type’s row.
- In the pop-up dialog that appears, click on Create WordPress Archive. An archive is created and automatically assigned to your custom post type “Tours”:
The archive template is created, and in this example , it will be used for the Tours archive page, as shown below:
- Scroll down to the Loop Output Editor.
- Click on the Loop Wizard button.
- In this step of the wizard, you must select whether to display posts in a grid, table, list, or in any other way. In our example, we are going to display our “Tours” in a two-column grid.
- Choose Bootstrap grid and set Number of columns at 2.
- Click on the Next button.
- In this step of the wizard, select the fields available for each listed post. We must select at least one field at this point. All other fields can be selected later using the WPBakery Builder.
a. Click on the Add field button.
b. Select Post title with a link.
c. Make sure that the Content Template option has been checked when inserting fields, as shown below:
d. Click Finish.
- Scroll down to the Templates for this WordPress Archive section. In this editor, you must design the content for a single product entry. We are going to design this using the WPBakery Page Builder.
- Press the Update button:
- Start editing by using the WPBakery Page Builder:
- Click on the Edit with WPBakery Builder button:
As the Edit Content Template screen opens, you can design how single post entries are listed on your archive page by using the page builder:
Use the WPBakery basic building blocks (Rows, Columns, and Elements) to design the content of your Tour entry. As you can see, the post link has already been inserted while we were creating the archive.
Use the Text Block, and then click the Fields and Views button to insert other fields. Note that you are free to use any design blocks, not only the Text Block.
1. Let’s start by inserting the “Price of the Tour” field:
a. Insert a new Text module.
b. Click on Fields and Views.
c. Locate the Tours section.
d. Choose the WooCommerce Product Price field to insert it.
2. Repeat the previous steps to insert more fields to your Tours.
You can find a detailed guide about this process on the Building Custom Searches page.
If you need assistance with using Toolset in combination with WPBakery Page Builder, please visit our professional support forum dedicated to this topic.