How can I add some HTML to a custom field and show it on a product page?

Questions
1

I can see how to create a custom field using the Custom Fields plugin, but how can I attach the field to a product, then put some HTML in that field for a specific product to show on product pages on my site?

2

Hi, ok this is the way to achieve what you’re looking to do…

  1. First, install the Custom Fields plugin

  2. In the plugin’s config area, create a new custom field, for example let’s call this “Washing Instructions”, selecting Text (multiple lines) as its type and setting the Location to “Admin: Products”

image
image2254Ă—222 22.1 KB

  1. Note that after saving your custom field it will be given a Unique Name of cf_washing_instructions

  2. Create a product and while filling in the minimum required details (name, category, price) scroll to the bottom to find your custom fields. Add your HTML to the box:

image
image1582Ă—344 17.4 KB

  1. Save your product

  2. To add your custom HTML to your product page design, we will use BlockLab. Open the “Product Page” layout in BlockLab and add a HTML block:

image

  1. Add any HTML to your block but include the special Twig tags to include the content of your custom fields, if it exists for the product being viewed:
<div>
    <h2>Product Information</h2>
    <div>{{ cf_washing_instructions | raw }}</div>
</div>

Please note: | raw has been added to the Twig tag above otherwise your HTML tags will be displayed on your website. See raw - Documentation - Twig - The flexible, fast, and secure PHP template engine for more info.

  1. Publish your design.

Done! Hope this helps. :grinning:

3

Nice, thanks for that! I will try this and see how I go.

Related question… can I add HTML to a custom field via the API?

4

Of course!

Here’s an example using POST /api/v2/products:

{
    "name": "Example Cotton Shirt",
    "category": {
        "path": "Clothing"
    },
    "children": [
        {
            "sku": "SHIRT1",
            "price": 49.99
        }
    ],
    "custom_fields": {
        "cf_washing_instructions": "<p>Example <b>washing instructions</b> for this product.</p>"
    }
}

You can include as many custom fields as you like in the “custom_fields” object and supply HTML too.

When you edit this product in the admin system you will see this data available for editing:

image
image1594Ă—352 16.7 KB

See Shopblocks | API for full documentation.

1 Like
5

That’s amazing, thanks so much :heart_eyes: