Bearbeiten Sie den WooCommerce-Versandrechner

Ich habe der Woocommerce-Kaufabwicklung benutzerdefinierte Städte hinzugefügt, und jede Stadt stellt eine Rate dar. Ich hätte jedoch gerne ein Dropdown-Menü mit Städten im Versandrechner, wie ich es mit der Checkout-Seite getan habe.

Das Stadtfeld im Versandrechner ist ein Textfeld. Derzeit konnte ich das Stadtfeld nur ändern, um es an der Kasse mit dem folgenden Code auszuwählen:

// Change "city" checkout billing and shipping fields to a dropdown
add_filter('woocommerce_checkout_fields', 'override_checkout_city_fields');

function override_checkout_city_fields($fields) {
  // Define here in the array your desired cities (Here an example of cities)
  $option_cities = array(
    '' => __('Select your city'),
    'City A' => 'City A',
    'City B' => 'City B'
  );

  $fields['shipping']['shipping_city']['type'] = 'select';
  $fields['shipping']['shipping_city']['options'] = $option_cities;

  return $fields;
}

Ich habe versucht, mit diese Lernmethode aber es hat nicht funktioniert

<?php
    // Ensure to get the correct value here. This __get( 'shipping_area' ) is based on how the Advanced Checkout Fields plugin would work
    $current_area = WC()->customer->__get( 'shipping_area' );
    ?>
    <p>
        <select name="calc_shipping_area" id="calc_shipping_area">
            <option value=""><?php _e( 'Select a area&hellip;', 'woocommerce' ); ?></option>
            <option value="alpha" <?php selected( $current_area, 'alpha' ); ?>>Alpha</option>
            <option value="beta" <?php selected( $current_area, 'beta' ); ?>>Beta</option>
            <option value="charlie" <?php selected( $current_area, 'charlie' ); ?>>Charlie</option>
        </select>
    </p>

Jede Hilfe wird geschätzt.

Um das Stadtfeld im Versandrechner zu aktivieren, müssen Sie Folgendes verwenden:

add_filter( 'woocommerce_shipping_calculator_enable_city', '__return_true' );

Hier ist die Möglichkeit, ein Auswahlfeld anstelle eines Eingabetextfeldes für Städte im Versandrechner zu aktivieren. Da Sie nun benutzerdefinierte Städte als Auswahlfeld zur Kasse hinzugefügt haben, müssen Sie Ihre benutzerdefinierte Anordnung von Städten wiederverwenden.

In der Woocommerce-Vorlage cart/shipping-calculator.php ersetzen Sie Folgendes:

        <p class="form-row form-row-wide" id="calc_shipping_city_field">
            <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_city() ); ?>" placeholder="<?php esc_attr_e( 'City', 'woocommerce' ); ?>" name="calc_shipping_city" id="calc_shipping_city" />
        </p>

Stattdessen mit diesem Code:

        <p class="form-row form-row-wide" id="calc_shipping_city_field">
            <?php
                // HERE <===== define your array of cities
                $cities = array('Paris','Lyon','Marseille','Nice');

                $current_city = esc_attr( WC()->customer->get_shipping_city() );
                ?>
            <select name="calc_shipping_city" id="calc_shipping_city">
                <option value=""><?php _e( 'Select a City&hellip;', 'woocommerce' ); ?></option>
                <?php foreach( $cities as $city ):
                echo '<option value="'.$city.'" '.selected( $current_city, $city ).'>'.$city.'</option>';
                endforeach; ?>
            </select>
        </p>

Getestet und funktioniert.

Fügen Sie den Code in Ihre “function.php”-Datei oder Ihr Plugin ein. Es ist nicht erforderlich, die Woocommerce-Datei zu manipulieren. Es besteht keine Notwendigkeit, sich an der WooCommerce-Datei zu beteiligen, indem Sie das folgende Verfahren ausführen:

//calc-------------------------------------------------------------

<script type="text/javascript">
  jQuery(function ($) {

$(document.body).on('change', 'select[name="calc_shipping_state"]', function() {
$('#calc_shipping_city').replaceWith(
  '<select id="calc_shipping_city" name="calc_shipping_city"
    class="hi_select address-field" autocomplete="address-level1"
    data-placeholder="salam" tabindex="-1">' +
 '<option value="" selected>- Select City -</option>' +
 '<option value="TEST1">TEST1</option>' +
 '<option value="TEST2">TEST2</option>' +
 '<option value="TEST3">TEST3</option>' +
 '<option value="TEST4">TEST4</option>' +
 '<option value="TEST5">TEST5</option>' +
'</select>');

  });
 });

  </script>

 //end:calc---------------------------------------------------