Simple Custom Fields on Product Page
Learn how to build E-Commerce webshops using Flatsome & WooCommerce and convert visitors into loyal customers.
1. Install and Enable a Snippets Plugin
- Install your preferred snippet plugin to manage custom code snippets. 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):
Snippet: 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.
Having trouble?
Before reaching out, check out our troubleshooting video because I don’t provide support for Flatsome or WooCommerce-related issues. Other questions? Contact us.