How To Add Custom Fields To Your Product Page 

This guide will show you how to create a custom field and display it on your SureCart product page. 

For this guide, we will demonstrate using the Metabox plugin, but you can choose any tool that you prefer, such as ACF. These tools can recognize your SureCart product type and let you easily add custom fields.

For example, if you’re selling clothes online, you might add a custom field for “Fabric Details” to give buyers extra information about the materials, washing instructions, or any other relevant product details.

In this example, we’ll add this extra description field to a product page, but you can customize it for other uses like file uploads, maps, images, and more.

Let’s begin!

List of All Product Custom Fields

The following table outlines all SureCart native product custom fields. For each field, we’ve included a description to help you understand its purpose, along with a practical example to show how it might be displayed on your website.

Configuring Custom Fields In Meta Box

Note: You need to have the Metabox plugin installed and activated on your site before we proceed. 

To do this, go to your WordPress dashboard, and:

• Navigate to Meta Box > Custom Fields.

• Here, click Add New to create a new field group.

• Name the field group anything descriptive, like “Extra Product Description.” This is for your internal reference.

• Click the Add Field button and choose any field type. In this example, we’ll use a “WYSIWYG Editor” field type, so you can add rich text content like links, media, and formatted text.

You can search and choose any other field type you wish.

• Click on the newly created field to open it up and customize how it’ll appear inside your product settings. For example:

• Under Settings, choose “SureCart Product (sc_product)” along with the “Post Type” dropdown. This ensures the custom field will show up on your product pages.

Note: You can choose to add it for all your products or just specific product collections.

Click the “Publish” button on the right to add the custom field to your SureCart product settings.

Customizing The Custom Fields In Your Product Settings

Now, you should see the custom field added to your product settings, to verify it:

• Go to SureCart > Products and select any preferred product.

• Scroll down to the bottom to see the custom field. Here’s how the custom field we added looks like:

Now, we’ll see how this can actually be displayed on your product page frontend. To do that, we’ll first fill our extra product description field.  If you’ve any other field added here, you can customize it accordingly.

Once done, click on the “Save Product” button on the top-right. The product won’t be visible on your product page yet, we’ll cover that in the next step.

Displaying Custom Fields With The Block Editor

If you are using the block editor (Gutenberg), you can display SureCart product custom fields on your product pages using the Meta Field Block plugin. This plugin allows you to display any custom field in the Gutenberg editor easily and works seamlessly with SureCart custom fields.

Using Meta Field Block Plugin

The Meta Field Block plugin provides a straightforward way to display custom fields as blocks directly within the Gutenberg editor.

Steps to Use Meta Field Block:

1. Install and activate the Meta Field Block plugin from the WordPress repository.
2. Edit your product template.
3. Add a new block and search for Meta Field Block.
4. In the block settings, input the Field Name corresponding to the SureCart custom field you want to display. For example:
   • min_price_amount
   • max_price_amount
   • display_amount
   • available_stock
   • sku
5. Save the changes and preview your product page to ensure the field is displayed correctly.

Example Use Case

If you want to display the Available Stock of a product on the product page:

• Add a Meta Field Block in the Gutenberg editor.
• Enter available_stock as the Field Name in the block settings.
• Save the changes.

On the frontend, the stock level will display dynamically.

Displaying The Custom Fields With Bricks Builder

Now, you’ll need to decide where and how to display the custom field on your product’s front end. 

To do that, open your product template in the page builder of your choice. For this guide, we’ll demonstrate using the Bricks builder, but this can also be done using the block editor.

• Drag the “Basic Text” field anywhere on the product page where you want to display the custom field.

• Select the basic text element, delete any text inside of it, and click on the following “Dynamic Data” symbol inside.

• Select the custom field label that you want to add here. For example, we’ll search and select the “Fabric Details” custom field here.

A new shortcode will be added inside the basic text field. Your custom field will be embedded and displayed here. Finally, click on the “Save” or “Publish” button.

The custom field content should now appear on the product front end. Verify it yourself to check the same.

That’s it! You can create many more custom fields to enhance your product pages, making them more dynamic and tailored to your needs regarding the builder you are using.