Custom Fields on Products

WooCommerce offers the capability to enhance your product listings with custom fields, a feature that allows you to display additional product details to customers.

Custom fields are additional metadata of your products, which can be utilized in various ways within your theme or site to display extra information, tailor the shopping experience, or provide specific product details that aren’t covered by the default product fields.

This flexibility allows you to extend the functionality of your online store per your goals. This guide will walk you through the process of adding custom fields to WooCommerce products directly through the WordPress admin and displaying them on your site.

Attributes vs Custom Fields

↑ Back to top

Before we learn more about custom fields, it’s important to understand the difference between custom fields and product attributes. The difference lies primarily in their application and functionality:

• Product Attributes serve as foundational elements for categorizing a broad range of products. They function similarly to taxonomies, enabling customers to filter and group products based on these attributes. This feature is crucial for creating meaningful relations among products, helping customers navigate and discover products through attributes like color, size, or material.
• Custom Fields, in contrast, are tailored to individual products, providing specific information or options for that single item. Unlike attributes that categorize products into broader groups, custom fields offer unique details or personalization choices for each product.

In essence, while attributes work to organize products into categories or groups based on shared characteristics, custom fields add depth to a product’s individual listing by offering additional information that is specific to that particular item.

Enable Custom Fields for Products

↑ Back to top

To enable Custom Fields for products, please follow the below steps:

1. Go to WP-admin > Products
2. Choose to add a new product using the “Add New” button or “Edit” an existing product
3. On the product edit page, click the “Screen Options” at the top right corner of the screen.
4. In the dropdown, find and check the “Custom Fields” option to enable it for the products

Add Custom Fields to a Product

↑ Back to top

After enabling the custom fields for your products, you can now add custom data to your products:

1. On the same product edit page, scroll down until you find the “Custom Fields” section at the bottom
2. To add a new custom field, click on the “Add Custom Field” button to create a new field
3. Name your custom field in the “Name” input box. This name will be used to reference the field programmatically in your theme or site
4. Enter the value for the custom field in the “Value” input box. This could be any piece of information relevant to the product, such as additional specifications, unique identifiers, or custom notes
5. Once you’ve added your custom fields and filled out their corresponding values, make sure to save or update the product

Displaying Custom Fields in Your Theme or Site

↑ Back to top

With custom fields added to your products, you can use this metadata within your theme or site to display the added information.

To display the Custom Fields for each product, you have to edit your theme’s files. Here’s an example of how you might display a custom field within the single product pages after the short description:

	<?php
	// Display a product custom field within single product pages after the short description
	function woocommerce_custom_field_example() {
	if ( ! is_product() ) {
	return;
	}
	global $product;
	if ( ! is_object( $product ) ) {
	$product = wc_get_product( get_the_ID() );
	}
	$custom_field_value = get_post_meta( $product->get_id(), 'woo_custom_field', true );
	if ( ! empty( $custom_field_value ) ) {
	echo '<div class="custom-field">' . esc_html( $custom_field_value ) . '</div>';
	}
	}
	add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_custom_field_example', 10 );

view raw woo-product-custom-fields.php hosted with ❤ by GitHub

By leveraging the custom fields feature, you have the flexibility to enhance product listings with additional information. Please make sure to carefully test any changes you make to theme files before making your site live to avoid any potential issues.