Revamp Your Product Pages: How to Display Custom Fields in WordPress

Advanced Custom Field plugin provides multiple functions to display custom fields value. Those functions are get field and the field. Both functions have detailed descriptions on the advanced custom field site.

Revamp Your Product Pages: How to Display Custom Fields in WordPress

The only difference between both is, the get_field function will require an echo function to print the value returned by the get_field. While the_field prints the value directly. So if you wish to check whether the value for that custom field exists or not, you have to use the get_field function.

You also have to make sure with the usage of the functions as every time you call these functions, there will be a database query fired to wp_postmeta table to get the result. For example,

<?php if( get_field( ‘product_code’ ) ): 

the_field( ‘product_code’ ));

endif; ?>

The above code example will fire 2 queries to the database. The first to check if the value exists or not and the second is to print the result if the value exists.

Here is the example of displaying values of each field types of ACF:

  1. Text
<?php the_field( 'sub_heading' ); ?>
  1. Checkbox
<?php the_field( ‘country’ '); ?>
  1. Radio button
<?php the_field( ‘country’ '); ?>
  1. Select
<?php the_field( ‘country’ '); ?>
  1. Image

The Image field will return either an array, a string or an integer value depending on the Return Value set. 

Display Image using ID as return value

<?php $image = get_field( 'image' );

$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

    echo wp_get_attachment_image( $image, $size );

}

Using array as return value

<?php $image = get_field('image');

if( !empty( $image ) ): ?>

    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />

<?php endif; ?>

Display Image using URL as return value

<?php if( get_field('image') ): ?>

    <img src="<?php the_field('image'); ?>" />

<?php endif; ?>
  1. Gallery

The Gallery field will return an array of attachments where each attachment is either an array, a string or an integer value depending on the Return Format set.

<?php $images = get_field('gallery');

$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $images ): ?>

    <ul>

        <?php foreach( $images as $image_id ): ?>

            <li>

                <?php echo wp_get_attachment_image( $image_id, $size ); ?>

            </li>

        <?php endforeach; ?>

    </ul>

<?php endif; ?>
  1. Repeater

The Repeater field will return an array of rows, where each row is an array containing sub field values.

<?php // Check rows exists.

if( have_rows('repeater_field_name') ):

    // Loop through rows.

    while( have_rows('repeater_field_name') ) : the_row();

        // Load sub field value.

        $sub_value = get_sub_field('sub_field');

        // Do something...

    // End loop.

    endwhile;

else :

    // Do something

endif;
  1. Flexible content

The Flexible Content field returns a multi-dimensional array containing the layouts and their sub field values.

<?php // Check value exists.

if( have_rows('content') ):

    // Loop through rows.

    while ( have_rows('content') ) : the_row();

        // Case: Paragraph layout.

        if( get_row_layout() == 'paragraph' ):

            $text = get_sub_field('text');

            // Do something...

        // Case: Download layout.

        elseif( get_row_layout() == 'download' ): 

            $file = get_sub_field('file');

            // Do something...

        endif;

    // End loop.

    endwhile;

// No value.

else :

    // Do something...

endif;
  1. Taxonomy

The Taxonomy field will return one or more values (objects or IDs) depending on the Return Value setting

<?php $terms = get_field(product_category);

if( $terms ): ?>

    <ul>

    <?php foreach( $terms as $term ): ?>

        <li>

            <h2><?php echo esc_html( $term->name ); ?></h2>

            <p><?php echo esc_html( $term->description ); ?></p>

            <a href="<?php echo esc_url( get_term_link( $term ) ); ?>">View all '<?php echo esc_html( $term->name ); ?>' posts</a>

        </li>

    <?php endforeach; ?>

    </ul>

<?php endif; ?>
  1. File

The File field will return either an array, a string or an integer value depending on the Return Value set.

Display using array

<?php $file = get_field('file');

if( $file ): ?>

    <a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>

<?php endif; ?>

Using ID

<?php $file = get_field('file');

if( $file ):

    $url = wp_get_attachment_url( $file ); ?>

    <a href="<?php echo esc_html($url); ?>" >Download File</a>

<?php endif; ?>

Display using URL

<?php if( get_field('file') ): ?>

    <a href="<?php the_field('file'); ?>" >Download File</a>

<?php endif; ?>
  1. Date picker
<?php the_field( ‘manufacture_date’ ); ?>
  1. Google Map

The Google Map field returns an array of data for the selected location. The minimum data returned will include address, lat and lng values.

<?php $location = get_field('location');

if( $location ): ?>

    <div class="acf-map" data-zoom="16">

        <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>

    </div>

<?php endif; ?>
  1. WYSIWYG Editor
<?php the_field('product_summary'); ?>
  1. Link

The Link field will return either an array or string depending on the return value setting. 

Display using String

<?php $link = get_field('link');

if( $link ): ?>

    <a class="button" href="<?php echo esc_url( $link ); ?>">Continue Reading</a>

<?php endif; ?>

Display using Array

<?php $link = get_field('link');

if( $link ): 

    $link_url = $link['url'];

    $link_title = $link['title'];

    $link_target = $link['target'] ? $link['target'] : '_self';

    ?>

    <a class="button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>

<?php endif; ?>

This blog will help you while you are using our plugins like ACF For Dokan or ACF For WC Vendors PRO. Hope this article will help you to display custom fields on your WordPress site.