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!

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 The Custom Fields On The Product Page

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.

That’s it! The custom field content should now appear on the product front end. Verify it yourself to check the same:

You can create many more custom fields to enhance your product pages, making them more dynamic and tailored to your needs.