Egen flik för produktdata i 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.

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('intertech_custom_woocommerce_product_tab.php');

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

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! 🙂