Navigation

Egen flik för produktdata i WooCommerce

I denna artikel ska vi titta på hur man kan skapa en egen flik 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).

Skapa egen flik för produktdata i WooCommerce

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');

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

0 0 röster
Article Rating
Prenumerera
Meddela vid
guest
0 Kommentarer
Äldsta
Senaste Mest omröstade
Inline feedback
Visa alla kommentarer

Relaterade inlägg

Hosta vid bröstsmärta
Första Hjälpen & HLR
Hosta vid bröstsmärta

Det förekommer både kedjebrev och delningar i sociala medier om en typ av självhjälp och att man ska hosta vid bröstsmärta (= vid misstänkt hjärtinfarkt).

Göteborgs-Postens korståg mot BB Gårda
BB & Förlossning
Göteborgs-Postens korståg mot BB Gårda

Det är tragikomiskt att se Göteborgs-Postens slogan ”riktig journalistik gör skillnad” i webbläsarens flik när man går in på deras sida och se artikelserien Naturlig födsel

Dr. Eva Wiberg-Itzel om BB Gårda
BB & Förlossning
Eva Wiberg-Itzel om BB Gårda

Under den gångna veckan skriver Doktor Eva Wiberg-Itzel om BB Gårda i ett nytt inlägg i sin blogg och även på Instagram. Doktor Eva Wiberg-Itzel,

0
Lämna gärna en kommentarx
()
x
Chrille Hedberg logotyp
Chrille Hedberg

Använd gärna detta formulär för att komma i kontakt med mig.

Hej! Vad kul att du är här!

Hemsidan har precis fått sig en rejäl ansiktslyftning! Allt gammalt innehåll sopades och den nya byggdes upp på nytt. Vissa länkar kan därför vara lite knas att funkera, och vissa bloggkategorier saknar innehåll.

Hoppas ändå att du trivs här! Tjoa gärna till om det är något!

Som många andra webbplatser kör jag cookies på denna. Du kan också, frivilligt, välja att använda ett konto från sociala medier för att logga in och kommentera. Du kan när som helst återkalla detta och/eller radera din profil.