Probo Configurable Product Type
• There should be a new WooCommerce product type named ‘Probo Configurable Product’.
• In the Probo Connect tab should be the following changeable settings:
◦ Api code
◦ Surcharge margin
◦ Advanced JSON overwrite for the configurator.
Proof of concept:
Render product configurator in the frontend
• There should be a template part which gets shown in the frontend of a ‘Probo Configurable Product’ that shows the configurator.
—
## ✅ 1. Register Custom Product Type
Hook into WooCommerce’s `init` to register your new product type:
// functions.php or a plugin
add_action('init', 'register_probo_configurable_product_type');
function register_probo_configurable_product_type() {
class WC_Product_Probo_Configurable extends WC_Product {
public function get_type() {
return 'probo_configurable';
}
}
}Also register it in product type selector:
add_filter('product_type_selector', 'add_probo_configurable_product_type');
function add_probo_configurable_product_type($types) {
$types['probo_configurable'] = __('Probo Configurable Product', 'woocommerce');
return $types;
}—
## ✅ 2. Show Custom Fields in “Probo Connect” Tab
Use `woocommerce_product_data_tabs` and `woocommerce_product_data_panels`:
add_filter('woocommerce_product_data_tabs', 'probo_add_product_tab');
function probo_add_product_tab($tabs) {
$tabs['probo_connect'] = [
'label' => __('Probo Connect', 'woocommerce'),
'target' => 'probo_connect_data',
'class' => ['show_if_probo_configurable'],
];
return $tabs;
}
add_action('woocommerce_product_data_panels', 'probo_product_data_fields');
function probo_product_data_fields() {
echo '<div id="probo_connect_data" class="panel woocommerce_options_panel">';
woocommerce_wp_text_input([
'id' => '_probo_api_code',
'label' => __('API Code', 'woocommerce'),
'desc_tip' => true,
'description' => __('Enter the API code for Probo.', 'woocommerce'),
]);
woocommerce_wp_text_input([
'id' => '_probo_surcharge_margin',
'label' => __('Surcharge Margin (%)', 'woocommerce'),
'type' => 'number',
'desc_tip' => true,
'description' => __('Enter the surcharge margin percentage.', 'woocommerce'),
]);
woocommerce_wp_textarea_input([
'id' => '_probo_json_overwrite',
'label' => __('Advanced JSON Overwrite', 'woocommerce'),
'description' => __('Add any advanced config JSON here.', 'woocommerce'),
]);
echo '</div>';
}—
## ✅ 3. Save Custom Fields
add_action('woocommerce_process_product_meta', 'save_probo_product_fields');
function save_probo_product_fields($post_id) {
$fields = ['_probo_api_code', '_probo_surcharge_margin', '_probo_json_overwrite'];
foreach ($fields as $field) {
if (isset($_POST[$field])) {
update_post_meta($post_id, $field, sanitize_text_field($_POST[$field]));
}
}
}—
## ✅ 4. Show Configurator in Frontend (Template Override)
Create a custom template for your product type. In your theme or plugin:
**File:** `woocommerce/single-product/probo-configurable.php`
<?php
defined('ABSPATH') || exit;
global $product;
$api_code = get_post_meta($product->get_id(), '_probo_api_code', true);
$json_config = get_post_meta($product->get_id(), '_probo_json_overwrite', true);
?>
<div class="probo-configurator-wrapper">
<div id="probo-configurator"
data-api="<?php echo esc_attr($api_code); ?>"
data-config='<?php echo esc_attr($json_config); ?>'>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById('probo-configurator');
const apiCode = container.dataset.api;
const config = container.dataset.config;
// Replace with real configurator rendering logic
container.innerHTML = `<iframe src="https://proxy-yourdomain.com/load-configurator?api=${apiCode}" width="100%" height="600"></iframe>`;
});
</script>Then override the Woo template loader:
add_filter('template_include', 'load_probo_custom_template');
function load_probo_custom_template($template) {
if (is_singular('product')) {
global $product;
if ($product && $product->get_type() === 'probo_configurable') {
$custom_template = locate_template('woocommerce/single-product/probo-configurable.php');
if ($custom_template) {
return $custom_template;
}
}
}
return $template;
}—
## 🧪 Testing / Proof of Concept
1. Add a new product in WooCommerce.
2. Select type: **Probo Configurable Product**.
3. Fill the **Probo Connect** tab fields.
4. View the product on the frontend – the configurator iframe should load with the passed API and JSON config.
—
Let me know if you want to:
– Add **price calculation via margin**,
– Enable **file uploads** to cart,
– Send data to **Probo API** after order,
– Or auto-sync the order after placement.
—
## ✅ 1. Add a New Tab (e.g. “Probo General Settings”)
You’ll hook into `woocommerce_product_data_tabs` to add a tab, and `woocommerce_product_data_panels` to add the content.
### 📌 Code to Add Tab
add_filter('woocommerce_product_data_tabs', 'probo_general_tab');
function probo_general_tab($tabs) {
$tabs['probo_general'] = [
'label' => __('Probo General', 'woocommerce'),
'target' => 'probo_general_settings',
'class' => ['show_if_probo_configurable'],
'priority' => 5,
];
return $tabs;
}—
## ✅ 2. Add Fields to That Tab
### 📌 Code to Add Fields
add_action('woocommerce_product_data_panels', 'probo_general_fields');
function probo_general_fields() {
echo '<div id="probo_general_settings" class="panel woocommerce_options_panel">';
woocommerce_wp_text_input([
'id' => '_probo_base_price',
'label' => __('Base Price', 'woocommerce'),
'type' => 'number',
'desc_tip' => true,
'description' => __('Enter the base price for Probo configuration.', 'woocommerce'),
]);
woocommerce_wp_checkbox([
'id' => '_probo_active',
'label' => __('Is Probo Active?', 'woocommerce'),
'description' => __('Enable this product for Probo integration.', 'woocommerce'),
]);
echo '</div>';
}—
## ✅ 3. Save These Fields
### 📌 Save Hook
add_action('woocommerce_process_product_meta', 'save_probo_general_fields');
function save_probo_general_fields($post_id) {
$fields = ['_probo_base_price', '_probo_active'];
foreach ($fields as $field) {
if (isset($_POST[$field])) {
$value = ($field === '_probo_active') ? 'yes' : sanitize_text_field($_POST[$field]);
update_post_meta($post_id, $field, $value);
} else if ($field === '_probo_active') {
update_post_meta($post_id, $field, 'no');
}
}
}—
## 🔄 Summary of Fields Added in "Probo General"
– **Base Price** (number)
– **Is Probo Active?** (checkbox)
These fields are scoped to only show for your custom product type: `show_if_probo_configurable`.
—
Let me know if you'd like to:
– Use **conditional logic** based on field values,
– Add **custom pricing calculations** from this tab,
– Integrate this data into the **frontend or order meta**.
I can help with that next.
To bring back the **Price** and **Quantity (Inventory)** sections for your `Probo Configurable Product`, follow these steps:
—
## ✅ 1. Enable Price Field for Your Product Type
WooCommerce hides the regular price fields unless the product type is listed in the JS-based visibility classes.
### 📌 Add This to Enable Pricing Fields
add_action('woocommerce_product_options_general_product_data', function() {
global $product_object;
if ($product_object && $product_object->get_type() === 'probo_configurable') {
echo '<script>
jQuery(function($) {
$(".product_data_tabs .general_tab, #general_product_data, .pricing").addClass("show_if_probo_configurable").show();
});
</script>';
}
});Or simply do it globally via filter (more stable):
add_action('init', function () {
add_filter('woocommerce_product_type_options', function ($options) {
$options['virtual']['wrapper_class'] .= ' show_if_probo_configurable';
$options['downloadable']['wrapper_class'] .= ' show_if_probo_configurable';
return $options;
});
});
add_filter('woocommerce_product_data_tabs', function ($tabs) {
$tabs['general']['class'][] = 'show_if_probo_configurable';
return $tabs;
});
add_filter('woocommerce_product_data_fields', function ($fields) {
foreach ($fields as &$field) {
if (isset($field['wrapper_class'])) {
$field['wrapper_class'] .= ' show_if_probo_configurable';
}
}
return $fields;
});—
## ✅ 2. Enable Inventory/Quantity Controls
To bring back the **Inventory** tab for stock quantity:
add_filter('woocommerce_product_data_tabs', function ($tabs) {
$tabs['inventory']['class'][] = 'show_if_probo_configurable';
return $tabs;
});
add_filter('woocommerce_product_data_fields', function ($fields) {
foreach ($fields as &$field) {
if (isset($field['wrapper_class'])) {
$field['wrapper_class'] .= ' show_if_probo_configurable';
}
}
return $fields;
});Also make sure the inventory fields are properly saved — but WooCommerce handles that automatically for standard fields.
—
## ✅ 3. Make Product Purchasable (Optional)
If the product is not purchasable due to custom logic, override this:
add_filter('woocommerce_is_purchasable', function ($purchasable, $product) {
if ($product->get_type() === 'probo_configurable') {
return true;
}
return $purchasable;
}, 10, 2);—
## 🧪 After This, You'll See:
– The **Price** field in the General tab.
– The **Inventory (stock quantity)** tab.
– Ability to use regular add-to-cart functionality if needed.
—
Would you also like:
– To disable the default **Add to Cart button** and replace it with **“Start Configuring”**?
– To dynamically change price based on **Probo API results**?
Let me know and I’ll help implement that.