Eget fält för produktdata i WooCommerce

Egen flik för produktdata i WooCommerce

2 jul, 2020
Chrille Hedberg
Anpassat fält | WooCommerce

I denna artikel ska vi titta på hur man kan skapa ett eget fält för produktdata i WooCommerce. Jag skrev för en tid sedan i en artikel att man ibland vill samla in eller lägga till lite egen information vid beställningar, och skrev därför hur man lägger till anpassade fält i WooCommerce kassa. Denna gång handlar det om att lagra information i backend, direkt i produkten. Jag har byggt in ett egen liten flik i en av mina butiker, för att kunna lägga till data som lite ”kom ihåg” för mig själv.

Egen flik för produktdata i WooCommerce

Det är möjligt att lägga in ett enkelt textfält (enkel rad), sifferfält, kryssruta, radioknappar, rullgardinsmeny och ett textfält med flera rader.

Med lite sökande kan man hitta tillägg som kan göra detta åt en också. Plugin Republic har ett som verkar innehållsrikt.

WooCommerce inmatningsfält

  • Enkelt textfält – woocommerce_wp_text_input()
  • Sifferfält – woocommerce_wp_text_input()
  • Radioknapp – woocommerce_wp_radio()
  • Kryssruta – woocommerce_wp_checkbox()
  • Rullgardinsmeny – woocommerce_wp_select()
  • Textfält – woocommerce_wp_textarea_input()
  • Dolt fält – woocommerce_wp_hidden_input()

Argumenten som kan användas är (id, type, label, description, desc_tip, laceholder).

Lägg till egen flik

För att kunna lägga till en flik som ovan, den som kallas ”Egen flik”, bör du först och främst ha ett barntema. Har du inte ett barntema och lägger in dessa funktioner i din functions.php så kommer de skrivas över nästa gång du uppdaterar temat, och då är allt borta!

Alternativ 1: lägg till koden i functions.php
Alternativ 2: skapa en fil och lägg in all php-kod där, och anropa filen i functions.php.

För att anropa filen i functions.php skriver du:

include_once('itprojekt_custom_woocommerce_product_tab.php');

Vill du komma igång snabbt har jag förberett en färdig php-fil för dig med koden i. Bara att ladda ner, redigera fältens namn och köra igång!

Egen flik för produktdata i WooCommerce

Sifferfältet har ett minimivärde angivet till 15, och är stegbart med knappar på sidan.

Egen flik för produktdata i WooCommerce

Rullgardinen fungerar precis som en vanlig rullgardin. =)

Skapa fliken

För att skapa fliken i WooCommerce skriver du följande kod i början:

<?php

// Först börjar vi med att ansluta till hooken 'woocommerce_product_data_tabs'

add_filter( 'woocommerce_product_data_tabs', 'itp_egen_flik' );

function itp_egen_flik( $product_data_tabs ) {
    $product_data_tabs['egen-flik'] = array(
        'label' => __( 'Egen flik', 'woocommerce' ), // Här anger du namnet på fliken
        'target' => 'itp_egen_flik_data',
    );
    return $product_data_tabs;
}

/** Vi vill ju ha en liten ikon vid fliken också */

function wcpp_custom_style() {?>
<style>
#woocommerce-product-data ul.wc-tabs li.egen-flik_options a:before { font-family: WooCommerce; content: '\e006'; }
</style>

Lägg till eget fält

Använder du alternativ 1, och klistrar in koden i functions.php så tar du bort <?php } i början och kopierar från första add_action.

<?php 
}
add_action( 'admin_head', 'wcpp_custom_style' );

// Här lägger vi till de olika fälten

add_action('woocommerce_product_data_panels', 'woocom_custom_product_data_fields');
function woocom_custom_product_data_fields() {
    global $post;
    // Observera att 'id' måste matcha parametern 'target' ovan
    ?> <div id = 'itp_egen_flik_data'
    class = 'panel woocommerce_options_panel' > <?php
        ?> <div class = 'options_group' > <?php

  // Enkelt textfält, en rad
  woocommerce_wp_text_input(
    array(
      'id' => '_itp_enkel_text',
      'label' => __( 'Enkelt fält', 'woocommerce' ),
      'wrapper_class' => 'show_if_simple', //show_if_simple eller show_if_variable
      'placeholder' => 'Platshållare',
      'desc_tip' => 'true',
      'description' => __( 'Beskrivning i tooltip.', 'woocommerce' )
    )
  );

  // Sifferfält
  woocommerce_wp_text_input(
    array(
      'id' => '_itp_siffror',
      'label' => __( 'Sifferfält', 'woocommerce' ),
      'placeholder' => '',
      'description' => __( 'Ange värde.', 'woocommerce' ),
      'type' => 'number',
      'custom_attributes' => array(
         'step' => 'any',
         'min' => '15' // Här kan du ange ett minsta värde
      )
    )
  );

  // Kryssruta
  woocommerce_wp_checkbox(
    array(
      'id' => '_itp_kryssruta',
      'label' => __('Kryssruta', 'woocommerce' ),
      'description' => __( 'Kryssa i denna!', 'woocommerce' )
    )
  );
  
  // Radioknapp
  woocommerce_wp_radio(
    array(
      'id' => '_itp_radio',
      'label' => __('Radioknapp', 'woocommerce' ),
      'description' => __( 'Välj ett av två alternativ', 'woocommerce' ),
      'options' => array(
          'Ett' => __( 'Alt 1', 'woocommerce' ),
      'Två' => __( 'Alt 2', 'woocommerce' )
      )
    )
  );
  
  // Rullgardin
  woocommerce_wp_select(
    array(
      'id' => '_itp_rullgardin',
      'label' => __( 'Rullgardin', 'woocommerce' ),
      'options' => array(
         'Alpha' => __( 'Alpha', 'woocommerce' ),
         'Beta' => __( 'Beta', 'woocommerce' ),
         'Gamma' => __( 'Gamma', 'woocommerce' )
      )
    )
  );
  
  // Textfält
  woocommerce_wp_textarea_input(
     array(
       'id' => '_itp_textarea',
       'label' => __( 'Textfält', 'woocommerce' ),
       'placeholder' => '',
       'description' => __( 'Kanske för meddelande?', 'woocommerce' )
     )
 );
        ?> </div>
    </div><?php
}

Spara fälten

Vi behöver ju spara fälten i databasen också, annars är ju detta till ingen nytta.

/** Det är ju bra om vi sparar datan också? */
function woocom_save_proddata_custom_fields($post_id) {

    // Spara det enkla textfältet
    $text_field = $_POST['_itp_enkel_text'];
    if (!empty($text_field)) {
        update_post_meta($post_id, '_itp_enkel_text', esc_attr($text_field));
    }

    // Spara sifferfältet
    $number_field = $_POST['_itp_siffror'];
    if (!empty($number_field)) {
        update_post_meta($post_id, '_itp_siffror', esc_attr($number_field));
    }

    // Spara textfältet
    $textarea = $_POST['_textarea'];
    if (!empty($textarea)) {
        update_post_meta($post_id, '_itp_textarea', esc_html($textarea));
    }

    // Spara rullgardinen
    $select = $_POST['_itp_rullgardin'];
    if (!empty($select)) {
        update_post_meta($post_id, '_itp_rullgardin', esc_attr($select));
    }
    // Spara kryssrutan
    $checkbox = isset($_POST['_itp_kryssruta']) ? 'yes' : 'no';
    update_post_meta($post_id, '_itp_kryssruta', $checkbox);

    // Spara radioknappen
    $select = $_POST['_itp_radio'];
    if (!empty($select)) {
        update_post_meta($post_id, '_itp_radio', esc_attr($select));
    }
}
add_action( 'woocommerce_process_product_meta_simple', 'woocom_save_proddata_custom_fields'  );

?>

Har du använt alternativ 1 och lagt in koden i functions.php ser du till att inte ta med avslutande ?> i botten.

Hoppas du får nytta av ditt eget fält för produktdata! 🙂

Chrille Hedberg

Chrille Hedberg

Jag har jobbat med WordPress i dryga 10 års tid, främst på hobbynivå. Jag har blivit lite av en mästare på att knyta ihop olika tillägg för att få funktioner att lira ihop som de ska. Jag har också blivit rätt bra på det! Har nu startat ITprojekt.se främst för att hjälpa småföretagare som sitter illa till på grund av coronasituationen. Tillsammans med kollegan Martin tar vi olika uppdrag inom just området ITprojekt, men vi taggas lite extra av att kombinera teknik med försäljning. Har bakgrund från vården innan jag skolade om mig till ingenjör och sedan trillade in på bana som säljare. Jobbar nu med teknisk försäljning och är regionansvarig för motsvarande halva Sveriges yta.

1 kommentar

  1. Sigge

    Klockrent!
    Väldigt bra skrivet och användbart.
    Letat efter denna funktionalitet med utökad flexibilitet länge, uppskattar verkligen att du delade med dig utav detta.
    Ser fram emot framtida artiklar.

    Svara

Skicka en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Dela detta