Custom Select Field for WooCommerce by Country

To create a WooCommerce custom select field with different options based on the selected country, you can use JavaScript to dynamically update the options of the select field based on the selected country. Here’s a basic example of how you can achieve this:

1. First, add a select field for the country and another select field for the options in your WooCommerce product page template.
2. Use JavaScript to listen for changes in the country select field. When the country changes, update the options of the options select field accordingly.

Here’s a simplified example of how you can implement this:

HTML:

<select id="countrySelect">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <!-- Add more country options as needed -->
</select>

<select id="optionsSelect">
  <!-- Options will be dynamically populated based on the selected country -->
</select>

JavaScript:

// Define options for different countries
const countryOptions = {
  us: ["Option 1", "Option 2", "Option 3"],
  uk: ["Option A", "Option B", "Option C"],
  // Define options for other countries as needed
};

// Function to populate options select field based on selected country
function populateOptions(country) {
  const optionsSelect = document.getElementById("optionsSelect");
  optionsSelect.innerHTML = ""; // Clear existing options

  const options = countryOptions[country];
  if (options) {
    options.forEach(option => {
      const optionElem = document.createElement("option");
      optionElem.value = option;
      optionElem.textContent = option;
      optionsSelect.appendChild(optionElem);
    });
  }
}

// Event listener for changes in the country select field
document.getElementById("countrySelect").addEventListener("change", function() {
  const selectedCountry = this.value;
  populateOptions(selectedCountry);
});

// Populate options for the default selected country
populateOptions(document.getElementById("countrySelect").value);

This example assumes that you have a predefined set of options for each country. You can extend this logic to fetch options dynamically from a server based on the selected country if needed. Additionally, ensure to replace the country codes and options with your actual data.