This can be achieved with functions like woocommerce_wp_select(), woocommerce_wp_text_input() etc. However, as far as I know, whith these function you can only add text input fields, textarea’s, select boxes and select dropdowns.

I want to add a date picker field, a file upload field and an url input field.

I have created these fields and they do render on the admin panel as they should, but the values are not saved (although I’m using the action hook ‘woocommerce_process_product_meta’). Only the first 2 fields (event_type and event_location), which are created with the WooCommerce function, are stored properly.

What am I doing wrong here?

My code:

add_action('woocommerce_product_data_panels', 'okappi_add_custom_fields');

function okappi_add_custom_fields()
{ ?>
<div id="event_details" class="panel woocommerce_options_panel hidden">

    <div class="options_group" class="show_if_event">
        <? woocommerce_wp_select([
            'id' => 'event_type',
            'label' => __('Event type', 'custom'),
            'wrapper_class' => 'show_if_event',
            'value' => get_post_meta(get_the_ID(), 'event_type', true),
            'options' => array('online' => 'Online', 'international' => 'International', 'internal' => 'Internal'),

        ]); ?>

        <? woocommerce_wp_text_input([
            'id' => 'event_location',
            'label' => __('Event location', 'custom'),
            'wrapper_class' => 'show_if_event',
            'value' => get_post_meta(get_the_ID(), 'event_location', true),
        ]); ?>

        <p class="show_if_event form-field event_start_date_field">
            <label for="event_start_date">Start date</label>
            <input type="date" id="event_start_date" name="event_start_date" class="date short">
        </p>

        <p class="show_if_event form-field event_end_date_field">
            <label for="event_end_date">End date</label>
            <input type="date" id="event_end_date" name="event_end_date" class="date short">
        </p>

        <p class="show_if_event form-field event_pdf_field">
            <label for="event_pdf">PDF upload</label>
            <input type="file" id="event_pdf" name="event_pdf" class="date short">
        </p>

        <p class="show_if_event form-field event_link_field">
            <label for="event_link">Event link</label>
            <input type="url" id="event_link" name="event_link" class="date short" placeholder="https://www.my-event.com/">
        </p>
    </div>

</div>'
<? }

add_action('woocommerce_process_product_meta', 'save_custom_fields');

function save_custom_fields($post_id)
{
    $product = wc_get_product($post_id);

    $event_type = isset($_POST['event_type']) ? $_POST['event_type'] : '';
    $product->update_meta_data('event_type', sanitize_text_field($event_type));

    $event_location = isset($_POST['event_location']) ? $_POST['event_location'] : '';
    $product->update_meta_data('event_location', sanitize_text_field($event_location));

    $event_start_date = isset($_POST['event_start_date']) ? $_POST['event_start_date'] : '';
    $product->update_meta_data('event_start_date', sanitize_text_field($event_start_date));

    $event_end_date = isset($_POST['event_end_date']) ? $_POST['event_end_date'] : '';
    $product->update_meta_data('event_end_date', sanitize_text_field($event_end_date));

    $event_pdf = isset($_POST['event_pdf']) ? $_POST['event_pdf'] : '';
    $product->update_meta_data('event_pdf', sanitize_text_field($event_pdf));

    $event_link = isset($_POST['event_link']) ? $_POST['event_link'] : '';
    $product->update_meta_data('event_link', sanitize_text_field($event_link));

    $product->save();
}

I tried a ‘woocommerce accordions’ plugin except it did not work, is there any code I can maybe use instead to achieve the tabs to accordions?

Not sure if this is affecting anything but the current theme I am using is astra child, however for the single product pages I redid the layout through elementor templates which is being applied to all single product pages. I can insert accordions into this template through elementor but it will just be placeholder text and I need it to have the product data tab information as accordions instead (I also added extra tabs using custom product tabs plugin)…

Really lost at the moment so any help would be much appreciated, thank you in advance!!

On the Product data tabs I have on my site, I have Wash Care (Description), Reviews, and Size Chart tabs. Is there a way to make the Size Chart link to an external page instead of calling its tab contents which has no info in it? I wanted it to link to my separate Size Chart page.

Any assistance is very much appreciated.

Thank you!

I am trying to move my clients webpage to horrible web hosting since two weeks.. At first, there was a problem with php version and wordpress installation and now I have problem with plugins and woocommerce. Mentioned web hosting has security settings, that not allowed to install plugins using wordpress, but only manually. I have installed woocommerce manually, but all product data tabs are expanded and do not work correctly and admin icons not showing. I don’t know where the problem is. I made webpage with woocommerce before on other web hosting and everything works correctly. I have tried to write to web hosting support, but they just answered that problem should by because of server setting, but they are not sure. Is it possible to fix it somehow or my client need to change web hosting?

Thank you.

https://www.ads-software.com/plugins/woocommerce/

I want to break up the Related Products from the Product Data Tabs.
Both are being called -one after another- with the woocommerce_after_single_product_summary hook.

Basically, I want to output each one wherever I need it and wrap it with whatever I want to.

Is there any way to call them separetely?

Any help will be very much appreciated.

https://www.ads-software.com/extend/plugins/woocommerce/

https://www.ads-software.com/extend/plugins/woocommerce/