In WordPress, all post types and taxonomies have an archive page, by default. Toolset allows you to customize these archive pages and use Divi Builder to design how the individual posts are listed there.
If you want to design the listing of your WooCommerce products, visit our page about creating a custom Shop page using Divi Builder and Toolset.
The following image shows an archive page with a list of all posts belonging to our custom post type of “Tours”.
Use the following steps to create your custom archive page.
- To start, go to Toolset -> Dashboard.
- Locate the row for your custom post type.
- In the Archive column, click Create archive.
- Click Create WordPress Archive in the pop-up dialog that appears.
An archive is created and automatically assigned to your custom post type.
You have now been taken to the Edit WordPress Archive screen, where you design your archive.
- Scroll down to the Loop Editor section.
- Click the Loop Wizard button.
- On the first step of the wizard, you 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, so let us choose Table-based grid and set the Number of columns to 2. Click Next.
- On the second step of the wizard, you select fields that appear for each listed post. We are going to select only one field now, and add all the other fields later using the Divi Builder.
- Click Add field.
- Select Post title with a link.
- Make sure to select the Use a Content Template to group the fields in this loop option checked.
- Click Finish.
- Click to Scroll to the Content Templates.
In this editor, you design the content of a single product entry. We are going to design that part using the Divi editor.
- Press the Update button.
- Click the Divi Builder button.
- Click the Edit with Divi Builder button.
The Edit Content Template screen opens in a new browser tab. Now, you can design how single post entries are listed on your archive page.
Use the Divi basic building blocks (Sections, Rows, Columns, and Modules) to build the content of your product entry.
The first text module (which includes the Product title with a link) has already been inserted.
Use the Divi Text module, and then click the Fields and Views button to insert other fields.
In our example, to add a “Tour City” field:
- Insert a new Text module.
- Click on Fields and Views.
- Locate the Tours section.
- Choose the City field to insert it.
Perform similar steps to insert other fields for your custom post type.
This is how your Content Template may look like:
Feel free to tweak your product appearance by applying custom styling. The Divi Design tab might help.
- Press Update to save your changes.
- Switch back to the tab of your browser that displays your Edit WordPress Archive screen and click Save all changes at once.
Visit your archive page on the front-end.
Toolset allows you to customize certain Divi theme options for each archive page specifically. To do this, on the Edit WordPress Archive screen, scroll down to the Theme Options section and tweak the options to your liking.
You can also add a custom search to your archive page so that users can filter the posts by custom fields and taxonomies.
To add a search to your archive:
- Scroll up the WordPress Archive screen to the top and open the Screen Options.
- Check Custom Search Setting and Filter editor.
- Scroll down to the Filter Editor and add your filters and the submit button.
You can find the detailed guide about this on the Building Custom Searches page.