diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index 3dc0e4701..66a641bd1 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/src/core/courses/pages/course-preview/course-preview.html
@@ -32,6 +32,16 @@
                 </a>
                 <ion-item-divider></ion-item-divider>
             </ng-container>
+
+            <ion-item text-wrap *ngIf="course.customfields" detail-none>
+                <ng-container *ngFor="let field of course.customfields">
+                    <div *ngIf="field.value" class="core-customfield core-customfield_{{field.type}} core-customfield_{{field.shortname}}">
+                        <span class="core-customfieldname"><core-format-text [text]="field.name"></core-format-text></span><span class="core-customfieldseparator">: </span>
+                        <span class="core-customfieldvalue"><core-format-text [text]="field.value" maxHeight="120"></core-format-text></span>
+                    </div>
+                </ng-container>
+            </ion-item>
+
             <core-file *ngFor="let file of course.overviewfiles" [file]="file" [component]="component" [componentId]="course.id"></core-file>
             <div *ngIf="!isEnrolled" detail-none>
                 <ion-item text-wrap *ngFor="let instance of selfEnrolInstances">
diff --git a/src/core/courses/pages/course-preview/course-preview.scss b/src/core/courses/pages/course-preview/course-preview.scss
index 3994f5cc9..9b34624df 100644
--- a/src/core/courses/pages/course-preview/course-preview.scss
+++ b/src/core/courses/pages/course-preview/course-preview.scss
@@ -15,4 +15,8 @@ ion-app.app-root page-core-courses-course-preview {
             width: 100%;
         }
     }
+    .core-customfieldvalue core-format-text {
+        display: inline;
+    }
+
 }
diff --git a/src/core/courses/pages/course-preview/course-preview.ts b/src/core/courses/pages/course-preview/course-preview.ts
index 51d2253e4..53fc896dd 100644
--- a/src/core/courses/pages/course-preview/course-preview.ts
+++ b/src/core/courses/pages/course-preview/course-preview.ts
@@ -233,6 +233,18 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
                     this.canAccessCourse = false;
                 });
             });
+        }).finally(() => {
+            if (!this.sitesProvider.getCurrentSite().isVersionGreaterEqualThan('3.7')) {
+                return this.coursesProvider.isGetCoursesByFieldAvailableInSite().then((available) => {
+                    if (available) {
+                        return this.coursesProvider.getCourseByField('id', this.course.id).then((course) => {
+                            this.course.customfields = course.customfields;
+                        });
+                    }
+                }).catch(() => {
+                    // Ignore errors.
+                });
+            }
         }).finally(() => {
             this.dataLoaded = true;
         });
@@ -386,6 +398,9 @@ export class CoreCoursesCoursePreviewPage implements OnDestroy {
         promises.push(this.coursesProvider.invalidateCourse(this.course.id));
         promises.push(this.coursesProvider.invalidateCourseEnrolmentMethods(this.course.id));
         promises.push(this.courseOptionsDelegate.clearAndInvalidateCoursesOptions(this.course.id));
+        if (this.sitesProvider.getCurrentSite().isVersionGreaterEqualThan('3.7')) {
+            promises.push(this.coursesProvider.invalidateCoursesByField('id', this.course.id));
+        }
         if (this.guestInstanceId) {
             promises.push(this.coursesProvider.invalidateCourseGuestEnrolmentInfo(this.guestInstanceId));
         }