Comment éditer/supprimer des champs et des emails dans les champs de caisse personnalisés de WooCommerce ?

WooCommerce Permet d'utiliser la fonctionChamps personnalisésLes caractéristiques. Idéal pour collecter des informations supplémentaires sur vos clients, comme leur adresse de livraison ou leur numéro de téléphone préférés. Cependant, il arrive que ces champs doivent être modifiés ou supprimés.

Dans ce tutoriel, nous verrons comment éditer ou supprimer des champs supplémentaires tels que la suppression de l'adresse de facturation, l'ajout et l'édition de champs de paiement personnalisés et l'enregistrement de ces champs personnalisés dans la base de données. Vous pouvez personnaliser le processus de paiement de WooCommerce en fonction des besoins de votre entreprise.

Image [1] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Supprimer les informations supplémentaires de la caisse de WooCommerce

Image [2] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Le code suivant supprime le champ d'adresse de la page de facturation.

function woocommerce_remove_additional_information_checkout($fields){
unset( $fields["billing_first_name"] ); ;
unset( $fields["billing_last_name"] ) ;
retour $fields.
}
add_filter('woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' ) ;
function woocommerce_remove_additional_information_checkout($fields){
    unset( $fields["billing_first_name"] ); ;
    unset( $fields["billing_last_name"] ) ;
    retour $fields.
}
add_filter('woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' ) ;
function woocommerce_remove_additional_information_checkout($fields){ unset( $fields["billing_first_name"] ); ; unset( $fields["billing_last_name"] ) ; retour $fields. } add_filter('woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' ) ;

Ajoutez cet extrait de code à votre site WordPressdans le dossier Themes de la base de données functions.php papiersAu milieu.

Image [3] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Ajouter des champs de caisse personnalisés à WooCommerce

Le code suivant permet d'ajouter un champ à la page de paiement, d'enregistrer les données dans les métadonnées de la commande et d'afficher ces métadonnées sur la page de gestion des commandes. J'ai déjà reçu quelques demandes concernant l'ajout de plusieurs champs. Pour y répondre, l'extrait de code a été modifié pour ajouter deux champs.

function cloudways_custom_checkout_fields($fields){
$fields['cloudways_extra_fields'] = array(
'cloudways_text_field' => array(
'type' => 'text',
'required' => true, 'label' => __('cloudways_extra_fields')) => array(
'label' => __('Input Text Field' )
),
'cloudways_dropdown' => array(
'type' => 'select', 'options' => array(
'options' => array('first' => __('First Option' ), 'second' => __('Second Option' ), 'third' => __('Third Option' ), 'required' => true, __('Input Text Field' ), 'cloudways_dropdown' => array('type' => 'select', 'options' => array(
'label' => __('Dropdown field' )
)
).
return $fields.
}
add_filter('woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ) ;
function cloudways_extra_checkout_fields(){
$checkout = WC()->checkout() ; ? >
<div class="extra-fields">
<h3><?php _e( 'Additional Fields' ); ?></h3>
checkout_fields['cloudways_extra_fields'] as $key => $field ) : ? >
get_value( $key ) ) ; ? >
</div>
<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );
function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_text_field' => array(
                'type' => 'text',
                'required' => true, 'label' => __('cloudways_extra_fields')) => array(
                'label' => __('Input Text Field' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select', 'options' => array(
                'options' => array('first' => __('First Option' ), 'second' => __('Second Option' ), 'third' => __('Third Option' ), 'required' => true, __('Input Text Field' ), 'cloudways_dropdown' => array('type' => 'select', 'options' => array(
                
                'label' => __('Dropdown field' )
                )
            ).

    return $fields.
}
add_filter('woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ) ;

function cloudways_extra_checkout_fields(){

    $checkout = WC()->checkout() ; ? >

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    checkout_fields['cloudways_extra_fields'] as $key => $field ) : ? >

            get_value( $key ) ) ; ? >
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );
function cloudways_custom_checkout_fields($fields){ $fields['cloudways_extra_fields'] = array( 'cloudways_text_field' =&gt; array( 'type' =&gt; 'text', 'required' =&gt; true, 'label' =&gt; __('cloudways_extra_fields')) =&gt; array( 'label' =&gt; __('Input Text Field' ) ), 'cloudways_dropdown' =&gt; array( 'type' =&gt; 'select', 'options' =&gt; array( 'options' =&gt; array('first' =&gt; __('First Option' ), 'second' =&gt; __('Second Option' ), 'third' =&gt; __('Third Option' ), 'required' =&gt; true, __('Input Text Field' ), 'cloudways_dropdown' =&gt; array('type' =&gt; 'select', 'options' =&gt; array( 'label' =&gt; __('Dropdown field' ) ) ). return $fields. } add_filter('woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ) ; function cloudways_extra_checkout_fields(){ $checkout = WC()-&gt;checkout() ; ? &gt; <div class="extra-fields"> <h3><?php _e( 'Additional Fields' ); ?></h3> checkout_fields['cloudways_extra_fields'] as $key =&gt; $field ) : ? &gt; get_value( $key ) ) ; ? &gt; </div> <?php } add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );

Sauvegarde des données pour les champs de caisse personnalisés de WooCommerce

function cloudways_save_extra_checkout_fields( $order_id, $posted ){
// n'oubliez pas la vérification appropriée si vous utilisez un type de champ différent
if( isset( $posted['cloudways_text_field'] ) ) {
update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) ); ;
}
if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array('first', 'second', 'third' ) ) {
update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] ) ;
}
}
add_action('woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 ) ;
function cloudways_save_extra_checkout_fields( $order_id, $posted ){
    // n'oubliez pas la vérification appropriée si vous utilisez un type de champ différent
    if( isset( $posted['cloudways_text_field'] ) ) {
        update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) ); ;
    }
    if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array('first', 'second', 'third' ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] ) ;
    }
}
add_action('woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 ) ;
function cloudways_save_extra_checkout_fields( $order_id, $posted ){ // n'oubliez pas la vérification appropriée si vous utilisez un type de champ différent if( isset( $posted['cloudways_text_field'] ) ) { update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) ); ; } if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array('first', 'second', 'third' ) ) { update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] ) ; } } add_action('woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 ) ;

Afficher les données des champs de caisse personnalisés de WooCommerce

function cloudways_display_order_data( $order_id ){ ? >
<h2><?php _e( 'Extra Information' ); ?></h2>
<table class="shop_table shop_table_responsive additional_info">
<tbody>
<tr>
<th><?php _e( 'Input Text Field:' ); ?></th>
<td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
</tr>
<tr>
<th><?php _e( 'Drop Down Field:' ); ?></th>
<td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
</tr>
</tbody>
</table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );
function cloudways_display_order_data( $order_id ){ ? >
    <h2><?php _e( 'Extra Information' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Input Text Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Drop Down Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );
function cloudways_display_order_data( $order_id ){ ? &gt; <h2><?php _e( 'Extra Information' ); ?></h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th><?php _e( 'Input Text Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td> </tr> <tr> <th><?php _e( 'Drop Down Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td> </tr> </tbody> </table> <?php } add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 ); add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );
Image [4] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Afficher les champs de commande personnalisés de l'administrateur de WooCommerce

Cet extrait de code sera utilisé comme données d'adresse de livraison et de facturation et sera disponible lorsque l'utilisateur cliquera sur le boutonPetit crayonLa zone de saisie s'affiche.

function cloudways_display_order_data_in_admin( $order ){ ? >
<div class="order_data_column">
<h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4>
<div class="address">
<?php
echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?>
</div>
<div class="edit_address">
'_cloudways_text_field', 'label' => __('Some field' ), 'wrapper_class' => '_billing_company_ field' ) ) ; ? >
'_cloudways_dropdown', 'label' => __('Another field' ), 'wrapper_class' => '_billing_company_ field' ) ; ? > ? field' ) ) ; ? >
</div>
</div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
function cloudways_display_order_data_in_admin( $order ){ ? >
    <div class="order_data_column">

        <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4>
        <div class="address">
        <?php
            echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?>
        </div>
        <div class="edit_address">
            '_cloudways_text_field', 'label' => __('Some field' ), 'wrapper_class' => '_billing_company_ field' ) ) ; ? >
             '_cloudways_dropdown', 'label' => __('Another field' ), 'wrapper_class' => '_billing_company_ field' ) ; ? > ? field' ) ) ; ? >
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
function cloudways_display_order_data_in_admin( $order ){ ? &gt; <div class="order_data_column"> <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4> <div class="address"> <?php echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>'; echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?> </div> <div class="edit_address"> '_cloudways_text_field', 'label' =&gt; __('Some field' ), 'wrapper_class' =&gt; '_billing_company_ field' ) ) ; ? &gt; '_cloudways_dropdown', 'label' =&gt; __('Another field' ), 'wrapper_class' =&gt; '_billing_company_ field' ) ; ? &gt; ? field' ) ) ; ? &gt; </div> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
Image [5] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Ajouter les champs personnalisés de WooCommerce aux e-mails de commande

function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
$fields['instagram'] = array(
'label' => __('Some field' ),
'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
) ;
$fields['licence'] = array(
'label' => __('another field' ), ) ; $fields['licence'] = array(
'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), .
) ;
retour $fields.
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 ) ;
function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['instagram'] = array(
                'label' => __('Some field' ),
                'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
            ) ;
    $fields['licence'] = array(
                'label' => __('another field' ), ) ; $fields['licence'] = array(
                'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), .
            ) ;
    retour $fields.
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 ) ;
function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) { $fields['instagram'] = array( 'label' => __('Some field' ), 'value' => get_post_meta( $order->id, '_cloudways_text_field', true ), ) ; $fields['licence'] = array( 'label' => __('another field' ), ) ; $fields['licence'] = array( 'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), . ) ; retour $fields. } add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 ) ;

Si vous souhaitez personnaliser le message, vous pouvez ajouter du texte à l'un des crochets disponibles dans le modèle de message.

function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {
$cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true ) ;
$cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true ) ;
if( $plain_text ){
echo 'La valeur d'un champ est ' . $cloudways_text_field . ' tandis que la valeur d'un autre champ est ' . $cloudways_dropdown ;
} else {
echo '<p>La valeur de <strong>champ de texte de saisie</strong> est ' . $cloudways_text_field' alors que la valeur de <strong>descendre</strong> est ' . $cloudways_dropdown . '</p>' ;
}
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 ) ;
function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {
    $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true ) ;
    $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true ) ;
    if( $plain_text ){
        echo 'La valeur d'un champ est ' . $cloudways_text_field . ' tandis que la valeur d'un autre champ est ' . $cloudways_dropdown ;
    } else {
        echo '<p>La valeur de <strong>champ de texte de saisie</strong> est ' . $cloudways_text_field' alors que la valeur de <strong>descendre</strong> est ' . $cloudways_dropdown . '</p>' ;
    }
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 ) ;
function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) { $cloudways_text_field = get_post_meta( $order-&gt;id, '_cloudways_text_field', true ) ; $cloudways_dropdown = get_post_meta( $order-&gt;id, '_cloudways_dropdown', true ) ; if( $plain_text ){ echo 'La valeur d'un champ est ' . $cloudways_text_field . ' tandis que la valeur d'un autre champ est ' . $cloudways_dropdown ; } else { echo '<p>La valeur de <strong>champ de texte de saisie</strong> est ' . $cloudways_text_field' alors que la valeur de <strong>descendre</strong> est ' . $cloudways_dropdown . '</p>' ; } } add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 ) ;

résumés

Dans ce tutoriel, il est démontré comment ajouter, éditer et sauvegarder des champs personnalisés sur la page de paiement de WooCommerce. Il ajoute également du code pour modifier le modèle d'email et ajouter les informations du champ personnalisé à l'email. Si vous avez des problèmes avec le code ou si vous voulez participer à la discussion, vous pouvez laisser un commentaire sous l'article.

Image [6] - Guide complet sur l'ajout, l'édition et la personnalisation des champs de caisse de WooCommerce

Questions fréquemment posées

Q : Comment puis-je personnaliser les champs de la caisse de WooCommerce ?

  1. Installez et activez "Éditeur de champs de caisse"Plugins.
  2. Accédez à l'éditeur de champs de caisse.
  3. Cliquez "Ajouter un champ"et sélectionnez le type de champ.
  4. Pour modifier un champ existant, cliquez surIcône de crayon à côté du champ.
  5. Pour supprimer un champ, cliquez surIcône de la corbeille à côté du champ.
  6. Cliquez "Enregistrer les modifications"pour mettre à jour la page de paiement.

Q : Comment ajouter des champs personnalisés dans WooCommerce ?

  1. partir pour WooCommerce > Champs de paiement.
  2. Cliquez sur "Ajouter un champ" pour créer un champ personnalisé.
  3. optionType de champ.
  4. Sélectionnez l'endroit où les champs personnalisés seront affichés.
  5. Après avoir ajouté et configuré les champs personnalisés, cliquez sur "Enregistrer les modifications".

Q : Comment puis-je personnaliser le bouton de paiement de WooCommerce ?
Méthode 1 : Modifier via les paramètres de WooCommerce

  1. Allez dans WooCommerce > Settings > Checkout (ou WooCommerce > Settings > Payments).
  2. Recherchez le paramètre "Texte du bouton de paiement" et modifiez-le en fonction du texte souhaité.

Méthode 2 : Utilisation de la personnalisation CSS

partir pour Apparence > Personnaliser > CSS supplémentairesajoutez le code suivant :

.woocommerce-checkout .button {
background-color : #FF5733 ; /* Changez la couleur de l'arrière-plan */
colour : #fff ; /* Changez la couleur du texte */
font-size : 16px ; /* Ajustez la taille de la police */
}
.woocommerce-checkout .button {
    background-color : #FF5733 ; /* Changez la couleur de l'arrière-plan */
    colour : #fff ; /* Changez la couleur du texte */
    font-size : 16px ; /* Ajustez la taille de la police */
}
.woocommerce-checkout .button { background-color : #FF5733 ; /* Changez la couleur de l'arrière-plan */ colour : #fff ; /* Changez la couleur du texte */ font-size : 16px ; /* Ajustez la taille de la police */ }

Contactez nous
Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été écrit par Banner1
LA FIN
Si vous l'aimez, soutenez-le.
félicitations73 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires