Display Custom Product Field on OpenCart 4.x Frontend

Learn how to display a custom product field on OpenCart 4.x frontend, including Product Detail and Compare pages. Easy step-by-step guide with code examples.

If you’ve added a custom field like custom_field to your OpenCart 4.x products (like we did in our previous tutorial), you might want to show it to customers on your store’s front page. This guide will show you how to display custom_field on the Product Detail and Product Compare pages. Let’s get started!

Note: This guide is for OpenCart 4.1.0.3 but should work for other 4.x versions. Always back up your database and files before making changes! We’re using the default theme and English language. For custom themes or multi-language stores, you may need extra steps (we’ll cover those too).

Why Show a Custom Field on the Frontend?

Showing custom_field on your store’s frontend helps customers see unique product info. For example:

• Toy Store: Show “New Arrival” to highlight new toys.
• Clothing Store: Display “Material: 100% Cotton” for shirts.
• Electronics Shop: Add “Warranty: 2 Years” for gadgets.
• Food Store: Show “Dietary: Vegan” for snacks.

We’ll make custom_field (e.g., “Eco-Friendly”) appear on the Product Detail page (where customers see one product) and the Product Compare page (where they compare multiple products).

Before You Start

We assume you’ve added custom_field to the oc_product table (as shown in our previous tutorial). You’ll need:

• XAMPP (e.g., C:\xampp) with OpenCart in C:\xampp\htdocs\your_opencart.
• Access to phpMyAdmin (http://localhost/phpmyadmin) to check the database.

Test with a sample value:

UPDATE `oc_product` SET `custom_field` = 'Eco-Friendly' WHERE `product_id` = 1;

This sets custom_field to “Eco-Friendly” for product ID 1.

Step 1: Display on Product Detail Page

The Product Detail page shows all info about one product (e.g., index.php?route=product/product&product_id=1). Let’s add custom_field to it.

1.1 Add Language String

We need a label for custom_field. Open catalog/language/en-gb/product/product.php.

1. Add:

   $_['text_custom_field'] = 'Custom Field';

Note: For multi-language stores, add this to other language files (e.g., fr-fr/product/product.php) after downloading the language pack from the OpenCart Extension Store.

1.2 Update the Model

The model fetches product data. Open catalog/model/catalog/product.php.

1. In the getProduct function, after:

   $product_data['price'] = (float)($query->row['discount'] ?: $query->row['price']);

   Add:

   $product_data['custom_field'] = $query->row['custom_field'] ?? '';

   This ensures custom_field is a string.

1.3 Update the Controller

The controller passes data to the template. Open catalog/controller/product/product.php.

1. In the index function, before:

   $data['reward'] = $product_info['reward'];

   Add:

   $data['custom_field'] = $product_info['custom_field'] ?? '';

1.4 Update the Template

Add custom_field to the product page. Open catalog/view/template/product/product.twig.

1. After:

   <h1>{{ heading_title }}</h1>

   Add:

   {% if custom_field %}
       <p class="custom_field"><strong>{{ text_custom_field }}:</strong> {{ custom_field|default('') }}</p>
   {% endif %}

Step 2: Display on Product Compare Page

The Product Compare page lets customers compare multiple products side by side. We’ll add custom_field to the comparison table.

2.1 Add Language String

Open catalog/language/en-gb/product/compare.php.

1. Add:

   $_['text_custom_field'] = 'Custom Field';

2.2 Update the Controller

Open catalog/controller/product/compare.php.

1. In the index function, after:

   $description = trim(strip_tags(html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8')));

   Add:

   $data['custom_field'] = $product_info['custom_field'] ?? '';

2. After:

   'description' => $description,

   Add:

   'custom_field' => $data['custom_field'],

2.3 Update the Template

Open catalog/view/template/product/compare.twig.

1. After:

   <tr>
       <td>{{ text_manufacturer }}</td>
       {% for product in products %}
           <td>{{ product.manufacturer }}</td>
       {% endfor %}
   </tr>

   Add:

   <tr>
       <td>{{ text_custom_field }}</td>
       {% for product in products %}
           <td>{{ product.custom_field|default('') }}</td>
       {% endfor %}
   </tr>

Step 3: Clear OpenCart Caches

Caches can hide your changes. Clear them:

1. Go to Admin > Dashboard, click the Gear Icon, refresh Theme and Sass caches.
2. Go to Extensions > Modifications, click Refresh.
3. In XAMPP, run:

   del /s /q C:\xampp\htdocs\your_opencart\system\storage\cache\cache.*

Step 4: Test Your Changes

Let’s make sure it works:

1. Go to Admin > Catalog > Products, edit a product (e.g., ID 1), set custom_field to “Eco-Friendly”, and save.
2. Check the database:

   SELECT product_id, custom_field FROM oc_product WHERE product_id = 1;

   Should show custom_field = 'Eco-Friendly'.
3. Visit the Product Detail page (e.g., index.php?route=product/product&product_id=1). See “Custom Field: Eco-Friendly”.
4. Add two products to the Compare page (e.g., index.php?route=product/compare). Check that custom_field appears in the table.

Real-World Example: Product Badges

{% if custom_field %}
    <span class="badge bg-success">{{ custom_field }}</span>
{% endif %}

Multi-Language Support

If your store supports multiple languages (e.g., French), add custom_field to the oc_product_description table instead:

ALTER TABLE `oc_product_description` ADD `custom_field` VARCHAR(200) DEFAULT '';

Update catalog/model/catalog/product.php’s getProduct to fetch it from oc_product_description, and adjust product.php and product.twig accordingly. This lets you show “Eco-Friendly” in English and “Écologique” in French!

Troubleshooting Tips

• Field Not Showing? Check catalog/model/catalog/product.php. Ensure $product_data['custom_field'] = $query->row['custom_field'] ?? ''; is correct (no json_decode).
• Compare Page Empty? Verify compare.php and compare.twig. Clear caches again.

Final Thoughts

Displaying custom_field on the frontend makes your OpenCart store more informative and attractive. From badges to warranty info, this field can do a lot! Test changes in your XAMPP setup (C:\xampp\htdocs\your_opencart), back up your files, and share your ideas in the comments.