Simple Custom Fields on Product Page

Welcome to this tutorial! Today, I’m going to show you a quick and easy way to replace those outdated and ugly emojis on your WordPress site with modern, clean icons from two popular libraries: Material Icons and Feather Icons.

Back to tutorials

1. Install and Enable a Snippets Plugin

• Install your preferred snippet plugin to manage custom code snippets. We personally recommend WP Code Box. You’ll use it to create a custom shortcode that pulls content from WordPress custom fields.
• Add a new snippet in your snippets plugin and paste the following code (or use your custom snippet):

Name: WP: Custom Field Shortcode

<?php 

// Create a shortcode to display custom field and process shortcodes
function display_custom_field_shortcode($atts) {
    // Extract shortcode attributes, setting 'field' to an empty string if not provided
    $atts = shortcode_atts(array(
        'field' => '',
        'post_id' => get_the_ID(), // default is the current post ID
    ), $atts);

    // Get the custom field value
    $custom_field_value = get_post_meta($atts['post_id'], $atts['field'], true);

    // If the field is empty, return nothing
    if (empty($custom_field_value)) {
        return '';
    }

    // Process shortcodes in the custom field value
    return do_shortcode($custom_field_value);
}

// Register the shortcode
add_shortcode('custom_field', 'display_custom_field_shortcode');

• Name this snippet, such as "WP Custom Field Shortcode," to remember its purpose.
• Save and enable the snippet.

2. Open Your Custom Product Layout in UX Builder

• Go to the custom product layout you’re using in UX Builder. This is where you’ll place the custom field data.
• Locate the area where you want unique content to display, such as a countdown or promotional text.

3. Enable Custom Fields in Product Pages

• Go to the WordPress dashboard, select a product, and enable "Custom Fields" in the screen options if it isn’t showing by default.
• Scroll to the bottom of the product edit page to find the “Custom Fields” section.

4. Add a Custom Field to Your Product

• In the Custom Fields area, select “Enter New” and name it (e.g., "countdown").
• In the "Value" field, enter the text or shortcode you want to display. For instance, type "Special Sale Ends Soon!" or add specific shortcode content.
• Save or update the product.

5. Add Custom Content via Shortcode in UX Builder

• In UX Builder, add a new HTML field in your product layout where you want the custom field data to appear.
• Use this shortcode to display your custom field content:

Shortcode

[custom_field field="name-field"]

Replace "name-field" with the name of your custom field.

6. Verify Custom Field Display on Product Page

• Save your layout changes and refresh the product page to see your custom content.
• If done correctly, the custom content should only appear on products where you’ve specified the custom field.

7. Optional: Use UX Blocks for Centralized Content

• To manage content centrally, create a UX Block (like a countdown banner) and paste its shortcode into the custom field value.
• This lets you update the UX Block in one place and have it appear across all relevant products.