WooCommerce tips og tricks 4. del:

Jeg har tidligere lavet et indlæg om custom fields i WooCommerce. Opgaver der har krævet custom fields på produkter har jeg ofte placeret felterne i ”General” tab’en. I sidste uge kom jeg ud til, en kunde og fandt ud af, at WooCommerce efter en opdatering fjerner denne tab når man opretter et variabelt produkt. Dette skabte et lidt rodet workflow for kunden. Jeg valgte derfor, at flytte felterne til en custom tab og tænkte derfor, at jeg ville lave et indlæg om hvordan man laver custom tabs på produkter i WooCommerce backend.

Den følgende kode laver selve tab’en. Det man skal bide mærke i er link taggets href stig da den bruges til, at identificere hvad for noget indhold der skal placeres i tab’en. Stigen skal pege på et id og i dette tilfælde har jeg givet linket stigen "#more_info_tab_data".

PHP kode:

function create_more_info_tab() {
  <?php
    <li class="custom_tab"><a href="#more_info_tab_data"><?php _e('More info about the product', 'woothemes');   ?></a></li>
  ?>
}

add_action('woocommerce_product_write_panel_tabs', 'create_more_info_tab'); 

Herefter skal tab’en fyldes med indhold. Den yderste container div skal have et id der svarer til den førnævnte href stig. Inde i div’en kan man så placere det indhold man vil have vist når man klikker på, tab’en. I dette eksempel har jeg kopieret WooCommerce egen mark-up og indsat en wysiwyg editor.

PHP kode:

function add_more_info_custom_field() {
   global $woocommerce, $post;
   ?>
      <div id="more_info_tab_data" class="panel woocommerce_options_panel">
         <div class="options_group more_info">                                                
            <p class="form-field">
               <h2><?php _e('More Info:', 'woothemes'); ?></h2>
               <?php
                  $readmore = get_post_meta( $post->ID, '_readmore', true);
                  echo '<p>In this field you can write more info about the product</p>';
                  echo wp_editor( $readmore, 'readmore', array( 'textarea_name' => '_readmore' ) );
               ?>
            </p>
         </div>
      </div>
   <?php
}

add_action('woocommerce_product_write_panels', 'add_more_info_custom_field');

Hvis du har nogle konkrete problemmer i WooCommerce er jeg åben for forslag til kommende indlæg 🙂