Verbesserte benutzerdefinierte WooCommerce-Felder für Variationen

Lesezeit: 3 Minuten

Verbesserte benutzerdefinierte WooCommerce Felder fur Variationen
ACE-CM

Verwendung der Rémi Coulson Tutorial wurde ein benutzerdefiniertes Feld für Produktvariationen hinzugefügt.

Dies funktioniert, das benutzerdefinierte Feld wird jedoch neben der Schaltfläche „Zum Warenkorb hinzufügen“ positioniert. Ich möchte es auf der Registerkarte Zusätzliche Informationen positionieren. Ich habe versucht, den Front-End-Code zur Additional-Information.php hinzuzufügen, aber er wird nicht angezeigt.

 <div class="woocommerce-variation-custom-text-field">
    {{{ data.variation.text_field }}}
</div>

Zur functions.php hinzugefügt, um Variationen anzuzeigen

   // Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );

// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

/**
 * Create new fields for variations
 *
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {

    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_text_field[' . $variation->ID . ']', 
            'label'       => __( 'My Text Field', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_text_field', true )
        )
    );

}

/**
 * Save new fields for variations
 *
*/
function save_variation_settings_fields( $post_id ) {

    // Text Field
    $text_field = $_POST['_text_field'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
    }
    

}

<?php

// Add New Variation Settings
add_filter( 'woocommerce_available_variation', 'load_variation_settings_fields' );

/**
 * Add custom fields for variations
 *
*/
function load_variation_settings_fields( $variations ) {
    
    // duplicate the line for each field
    $variations['text_field'] = get_post_meta( $variations[ 'variation_id' ], '_text_field', true );
    
    return $variations;

}

Verbesserte benutzerdefinierte WooCommerce Felder fur Variationen
LoicTheAztec

Beachten Sie, dass Ihr Code seit WooCommerce 3 etwas veraltet ist.

jQuery und einige andere Änderungen sind erforderlich, um den Wert des ausgewählten benutzerdefinierten Variationsfelds an einer bestimmten Stelle auf einzelnen Produktseiten anzuzeigen, insbesondere außerhalb des Variationsformulars.

Im Beispiel unten die ausgewählt Der Wert des benutzerdefinierten Variationsfelds wird auf der Produktregisterkarte “Zusätzliche Informationen” nach der Produktattributtabelle angezeigt.

Hier ist der vollständige überarbeitete Code:

// Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    woocommerce_wp_text_input( array(
        'id'          => '_text_field[' . $loop . ']',
        'label'       => __( 'My Text Field', 'woocommerce' ),
        'placeholder' => 'http://',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_text_field', true ),
    ) );
}

// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
    if( isset($_POST['_text_field'][$loop]) ) {
        $variation->update_meta_data( '_text_field', sanitize_text_field($_POST['_text_field'][$loop]) );
    }
}

// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
    $variation_data['text_field'] = $variation->get_meta('_text_field');

    return $variation_data;
}

add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
    echo '<div class="custom_variation-text-field"></div>';
}

// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
    ?>
    <script type="text/javascript">
    (function($){
        $('form.cart').on('show_variation', function(event, data) {
            $('.custom_variation-text-field').text(data.text_field);
        }).on('hide_variation', function(event) {
            $('.custom_variation-text-field').text('');
        });
    })(jQuery);
    </script>
    <?php
}

Der Code wird in die Datei functions.php des aktiven untergeordneten Designs (oder aktiven Designs) eingefügt. Getestet und funktioniert.

1001170cookie-checkVerbesserte benutzerdefinierte WooCommerce-Felder für Variationen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy