How Can I Add a Custom Field With HTML Tag Support to the WooCommerce Settings Page in WordPress?

How to Allow HTML Content in WooCommerce Settings Fields

Are you seeking ways to customize your WooCommerce store settings? Well, you’re in luck! By tweaking your WordPress code, you can create a settings field which permits HTML content – something super handy if you, for example, want to embed a Google Map iframe to showcase the physical location of your store. The solution provided here involves writing a few lines of PHP code that you’ll insert in your theme’s functions.php file or within a custom plugin.

Steps to Create and Save New Settings Field

1. Create a new WooCommerce settings field: The first piece of code you need will enable you to insert a new settings field within your WooCommerce general settings section. The purpose of this new settings field is to allow HTML content input, like Google Map iframe code. addfilter('woocommercegeneralsettings', 'generalsettingsshopmap_address'); function generalsettingsshopmapaddress($settings) { $key = 0;foreach( $settings as $values ){ $new_settings[$key] = $values; $key++; if($values['id'] == 'woocommercedefaultcountry'){ $new_settings[$key] = array( 'title' => __('Store Address (Map)'), 'desc' => __('Copy your store Google Map iframe here'), 'id' => 'woocommercestoremap', 'default' => '', 'type' => 'textarea', 'desc_tip' => true, 'css' => 'width:500px;height:150px;', ); $key++; } } return $new_settings;}

By adding this code, a textarea field named ‘Store Address (Map)’ will be created in the ‘Store Address’ area of the WooCommerce general settings.

1. Save the settings value: To save the inputted HTML content correctly, you need to add an extra function. This will allow WooCommerce to correctly handle the data once you press the ‘Save Changes’ button. addaction('woocommerceupdateoptionsgeneral', 'savegeneralsettingsshopmap_address'); function savegeneralsettingsshopmap_address() { woocommerceupdateoption('woocommercestoremap'); }

How to Allow HTML content in the field

Another important element you need to handle is sanitization and escaping of output. This is crucial for avoiding potential security risks associated with code injection. In WordPress, the wp_kses_post function can help you with that. WordPress uses this function to filter out any invalid HTML tags from the input before saving it to the database.

addfilter('woocommerceadminsettingssanitizeoptionwoocommercestoremap', 'allowhtmlinstoremap', 10, 3);
function allowhtmlinstoremap($value, $option, $raw_value) {
    return wpksespost($raw_value);
}

By adding this extra filter, your HTML content input (like iframe or other HTML tags) will be sanitized and saved correctly.

By following this guide, you can customize the WooCommerce settings field and allow HTML content to be correctly input and saved. So, go ahead, add a Google map or other rich HTML content and boost your store’s functionality! Don’t forget, it’s important to create a child theme or use a custom plugin to add this code, preventing loss of data when you update your theme in the future. If you don’t have much experience with PHP, don’t worry! There are many resources available online that can guide you through the process with ease. Happy customizing!