In some cases, it’s a good idea to only display individual information on products. For example, just the price or the title.
Even when creating your own comparison tables, you may only want to show “individual” details or information for comparison. Our data field function allows you to do this easily.
What are data fields and how can they be used? #
With data fields, individual product data such as, for example, the title, the description or the “Buy” button are easy to place within body text, an HTML table (e.g. comparison table) or directly into a PHP template using shortcode. The great thing about this is that this product information is automatically updated after you’ve inserted it. For example, price changes on Amazon. This is also reflected in the data fields.
Therefore, to display product information on your own website, it isn’t mandatory to include a product box or even several of these. Data fields have a decisive advantage: in addition to displaying individual product information, you can also place them anywhere on your website.
Today in this tutorial, we’d like to give you more details about how this can look.
Data fields within an HTML table #
Would you like to simply display data fields using an efficient and effective HTML table, created using the WordPress editor? No problem – it’s really easy.
Creating an HTML table in WordPress #
To do this, open a new page or a new post in WordPress and create a new table block in the Gutenberg editor by clicking on the plus symbol.
A selection menu then opens showing the most commonly used blocks. If you don’t see the table block, you can simply search for it using the search field.
Click on “Table” and you’ll then see a menu where you can specify your table formatting.
This is where you can easily set the desired number of columns and rows. To create the table, simply click on the “Create table” button.
By clicking on “Create table”, you’ll see the finished table in the WordPress editor.
You can now insert data fields to display individual product information in the table fields.
Inserting data fields into an HTML table #
Here is an example of how you can use data fields within an HTML table. If you’re currently using this tutorial to create a table at the same time, it’s best to bring up the data fields documentation for examples of the shortcode we’ll be using here.
In our example, we’ll create a simple table with 3 products. For this purpose, we’ll produce a product title using the data fields, the product image, the sales price, the “Buy” button and the date of the last update.
In addition to the shortcodes that you can find in the documentation we just mentioned, we now need the ASIN for the products that you want to display in the table. You can find the product’s ASIN on the corresponding product page in the Amazon Shop under the product information.
You can then insert the shortcodes, including the ASIN, into your HTML table in the WordPress editor. In our example, the end result looks like this:
As you can see, we have listed a product in each column with the shortcode to display the product image, product title, product price, the buy button and the date of the last update.
Of course, you can use the data fields to get a lot more product information such as the product description, the number of reviews, the current savings, the Prime logo and much more. To do this, you simply have to adjust the corresponding “value” settings (see documentation).
If we now click on “Preview“, we’ll see the HTML table we previously created in the Gutenberg editor, including the three products to display by means of the data field shortcodes.
If you’re still using the Classic Editor, you can, of course, easily create an HTML table here too. You just need the corresponding HTML tags to insert into the Classic Editor.
For example:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Content 1 | Content 2 | Content 3 |
| Content 4 | Content 5 | Content 6 |
You can insert this HTML code into the Classic Editor using the text or HTML view and you’ve already created an HTML table here.
Including data fields within a body text #
Inserting data fields into a body text is just as easy as within an HTML table that you’ve created. This means that if you want to display product information such as, for example, the price or title, you only have to insert the shortcode where you want the information to be displayed in the text.
Example 1: Price #
Product XY is available free of shipping, costs
[amazon fields = "B00WLI5E3M" value = "price"]and will be delivered tomorrow.
Display:
Example 2: Title #
The product
[amazon fields = "B00WLI5E3M" value = "title"]is available free of shipping costs, costs $ 12,99 and will be delivered tomorrow.
Display:
Of course, you can do this with any available parameter. It doesn’t matter where the body text appears on your page, whether in a post, the sidebar, the header, the footer or on the page.
Conclusion #
Using data fields, our plugin offers a flexible option to place individual product information exactly where you want it. As shown in our little guide, you can include data fields within a body text or in your own HTML tables.
This also works for integration into your own PHP templates. To create your own templates, use the following data fields documentation.
