How to Display Custom Fields Inside Custom Tabs on WooCommerce

When running an online store with WooCommerce, providing clear and concise information about delivery times can significantly enhance customer satisfaction. In this tutorial, I’ll show you how to add a custom tab to your WooCommerce product pages. This tab will display estimated delivery times based on a custom field you’ll add to your product backend.

Video: How to Display Custom Fields Inside Custom Tabs on WooCommerce?

Step 1: Locate Your Theme’s Functions.php File

First, you’ll need to locate the functions.php file of your WordPress theme. This file is typically found within your theme’s directory.

Alternative Step 1: Use a Plugin Called Code Snippets

While adding functionality directly to your theme’s functions.php file is a common approach, a more flexible and manageable option is to use a plugin like “Code Snippets.” This plugin allows you to add custom PHP code snippets to your WordPress website without directly editing theme files.

Why Use Code Snippets?

1. Modularity: Code Snippets allows you to organize your custom code snippets into individual snippets, making it easier to manage and maintain.
2. No Theme Dependency: Adding code snippets via a plugin ensures that your customizations remain intact even if you switch themes.
3. Error Handling: Code Snippets provides error checking and syntax highlighting, helping to prevent potential issues with your custom code.
4. Safety: It offers a safe environment to experiment with custom code without the risk of breaking your website.

Step 2: Adding the Custom Tab on Woocommerce Single Product Page

In this step, we will add a custom tab to the WooCommerce single product page to display delivery information. This tab will provide customers with essential details about the estimated delivery times for their orders.

To achieve this, we will utilize WordPress hooks and filters to modify the product page’s tab structure and content.

Let’s proceed with the implementation:

// Create new Woocommerce single product tab
add_filter( 'woocommerce_product_tabs', 'wpsh_custom_tab' );
function wpsh_custom_tab( $tabs ) {    
    // Add the new tab
    $tabs['delivery_tab'] = array(
        'title'     => __( 'Delivery Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'custom_tab_content'
    );
    return $tabs;
}

This code snippet hooks into the woocommerce_product_tabs filter, allowing us to add a new tab labeled “Delivery Information” to the product page.

With this step completed, we have successfully integrated a custom tab into the WooCommerce single product page, laying the foundation for displaying essential delivery details to customers.

Step 3: Adding Custom Field to WooCommerce Backend

Next, let’s add a custom field to the WooCommerce product backend where you can input the estimated delivery time. This code snippet here below adds a text input field labeled “Delivery Days” under the Shipping section in the WooCommerce product backend and saves custom field values.

// Add custom field to Woocommerce backend under the Shipping tab
add_action( 'woocommerce_product_options_shipping_product_data', 'wpsh_add_text_field' );
function wpsh_add_text_field() {
    woocommerce_wp_text_input( array(
        'id'            => '_shipping_time',
        'label'         => __( 'Delivery days', 'woocommerce' ),
        'description'   => __( 'Add an estimated delivery days number', 'woocommerce' ),
        'desc_tip'      => 'true',
        'type'          => 'text'
    ) );
}
// Save custom field values
add_action( 'woocommerce_admin_process_product_object', 'wpsh_save_field', 10, 1 );
function wpsh_save_field( $product ) {
    if ( isset( $_POST['_shipping_time'] ) ) {        
        $product->update_meta_data( '_shipping_time', sanitize_text_field( $_POST['_shipping_time'] ) );
    }
}

Step 4: Displaying Values Inside Custom Tab

Lastly, let’s display the custom field value inside the custom tab we created earlier. This code snippet displays the custom field value inside the custom tab. If no value is provided, it defaults to a standard delivery time (see line 13).

// Display values inside custom tab
function custom_tab_content() {
    global $product;

    // The new tab content
    echo '<h2>Delivery information</h2>';

    // Display custom field value
    $shipping_time = $product->get_meta('_shipping_time');
    if (!empty($shipping_time)) {
        echo '<div class="delivery-info"><strong>Estimated delivery time: </strong> ' . esc_html($shipping_time) . ' days</div>';
    } else {
        echo '<div class="delivery-info"><strong>Standard shipping:</strong> 3-5 days</div>';
    }
}

Step 5: Adding Custom CSS for Styling

To style the delivery information displayed within the custom tab, I’ll add some custom CSS. This CSS will enhance the appearance of the delivery information, making it visually appealing and easy to read.

Here’s how to add the provided CSS code:

1. Log in to your WordPress admin panel.
2. In the WordPress dashboard, navigate to “Appearance” > “Customize” > “Additional CSS”. This section allows you to add custom CSS code to your theme without modifying theme files directly.
3. Paste the CSS Code

.delivery-info {
		background: #f9f9f9;
		padding: 20px;
	font-size: 18px;
	border: 3px dashed #ebebeb;
}

.delivery-info::before {
    display: inline-block; 
    width: 35px;
    height: 35px;
    content: ""; 
    background-image: url('/wp-content/uploads/2024/02/truck.png');
    background-size: contain;
    margin-right: 20px;
	  vertical-align: middle;
	  margin-bottom: 10px;
}

Conclusion

By following these steps, you can enhance your WooCommerce store by providing clear delivery information to your customers. This customization not only improves the user experience but also builds trust and confidence in your online store. Experiment with different delivery time frames to find what works best for your business and customers.

Happy selling!