woocommerce offtopic – Print HTML tags as custom field output

Question

I have this code (taken from the web) to display 3 custom field on Woocommerce variations. Then I want to show output as shortcode, but I can not figure out how to display output with HTML styling because I need table and few divs there.

/* Add custom field input @ Product Data > Variations > Single Variation */
add_action( 'woocommerce_variation_options', 
'add_custom_field_cage_code_to_variations', 10, 3 );
function add_custom_field_cage_code_to_variations( $loop, $variation_data, $variation 
 ) {
echo '<div class="cage_code_options_group options_group">';
    woocommerce_wp_text_input( array(
        'id' => 'cage_code[' . $loop . ']',
        'label' => __( 'One-line description', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'cage_code', true )
    ));

    woocommerce_wp_textarea_input( array(
        'id' => 'cage_code_part_number[' . $loop . ']',
        'label' => __( 'Short Description', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'cage_code_part_number', true )
    ));

    woocommerce_wp_textarea_input( array(
        'id' => 'cage_code_niin_nsn_number[' . $loop . ']',
        'label' => __( 'Long description', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'cage_code_niin_nsn_number', true )
    ));
echo '</div>';
}

/* Save custom field on product variation save */
add_action( 'woocommerce_save_product_variation', 
'magazine_save_custom_field_variations', 10, 2 );
function magazine_save_custom_field_variations( $variation_id, $i ) {
$cage_code = $_POST['cage_code'][$i];
if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code', esc_attr( 
$cage_code ) );

$cage_code_part_number = $_POST['cage_code_part_number'][$i];
if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code_part_number', 
esc_attr( $cage_code_part_number ) );

$cage_code_niin_nsn_number = $_POST['cage_code_niin_nsn_number'][$i];
if ( isset( $cage_code_niin_nsn_number ) ) update_post_meta( $variation_id, 
'cage_code_niin_nsn_number', esc_attr( $cage_code_niin_nsn_number ) );
 }

 function woo_cage_code_info_tab_content() {
 global $product;

if ( $product->is_type( 'variable' ) ) {
    
    // Loop through the variation IDs
    foreach( $product->get_children() as $key => $variation_id ) {
        // Get an instance of the WC_Product_Variation Object
        $variation = wc_get_product( $variation_id );
        
        // Get meta
        $cage_code = $variation->get_meta( 'cage_code' );
        $cage_code_part_number = $variation->get_meta( 'cage_code_part_number' );
        $cage_code_niin_nsn_number = $variation->get_meta( 
 'cage_code_niin_nsn_number' );
        
        // Output
        echo '<div class="woo_cage_code_info_tab_content 
 woo_cage_code_info_tab_content-' . $variation_id .'">';
        
        if ( $cage_code ) {
            echo '<p>' . $cage_code . '</p>';
        }
        
        echo '</div>';
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Hide all
        $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

        // Change
        $( 'input.variation_id' ).change( function() {
            // Hide all
            $( '.woo_cage_code_info_tab_content' ).css( 'display', 'none' );

            if( $( 'input.variation_id' ).val() != '' ) {
                var var_id = $( 'input.variation_id' ).val();

                // Display current
                $( '.woo_cage_code_info_tab_content-' + var_id ).css( 'display', 'block' );
            }
        });    
    });
    </script>
    <?php
}
}
 add_shortcode('woo_cage_code_info_tab_content', 'woo_cage_code_info_tab_content');

 function woo_cage_code_info_tab_content2() {
global $product;

if ( $product->is_type( 'variable' ) ) {
    
    // Loop through the variation IDs
    foreach( $product->get_children() as $key => $variation_id ) {
        // Get an instance of the WC_Product_Variation Object
        $variation = wc_get_product( $variation_id );
        
        // Get meta

        $cage_code_part_number = $variation->get_meta( 'cage_code_part_number' );

        
        // Output
        echo '<div class="woo_cage_code_info_tab_content woo_cage_code_info_tab_content-' . $variation_id .'">';
           

        if ( $cage_code_part_number ) {
            echo '<p>' . $cage_code_part_number . '</p>';
        }
        
        
        echo '</div>';
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Hide all
        $( '.woo_cage_code_info_tab_content2' ).css( 'display', 'none' );

        // Change
        $( 'input.variation_id' ).change( function() {
            // Hide all
            $( '.woo_cage_code_info_tab_content2' ).css( 'display', 'none' );

            if( $( 'input.variation_id' ).val() != '' ) {
                var var_id = $( 'input.variation_id' ).val();

                // Display current
                $( '.woo_cage_code_info_tab_content2-' + var_id ).css( 'display', 'block' );
            }
        });    
    });
    </script>
    <?php
}
}
add_shortcode('woo_cage_code_info_tab_content2', 'woo_cage_code_info_tab_content2');

function woo_cage_code_info_tab_content3() {
global $product;

if ( $product->is_type( 'variable' ) ) {
    
    // Loop through the variation IDs
    foreach( $product->get_children() as $key => $variation_id ) {
        // Get an instance of the WC_Product_Variation Object
        $variation = wc_get_product( $variation_id );
        
        // Get meta
        $cage_code_niin_nsn_number = $variation->get_meta( 'cage_code_niin_nsn_number' );
        
        // Output
        echo '<div class="woo_cage_code_info_tab_content woo_cage_code_info_tab_content-' . $variation_id .'">';
        
        if ( $cage_code_niin_nsn_number ) {
            echo '<p>' . $cage_code_niin_nsn_number . '</p>';
        }
        
        echo '</div>';
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Hide all
        $( '.woo_cage_code_info_tab_content3' ).css( 'display', 'none' );

        // Change
        $( 'input.variation_id' ).change( function() {
            // Hide all
            $( '.woo_cage_code_info_tab_content3' ).css( 'display', 'none' );

            if( $( 'input.variation_id' ).val() != '' ) {
                var var_id = $( 'input.variation_id' ).val();

                // Display current
                $( '.woo_cage_code_info_tab_content3-' + var_id ).css( 'display', 'block' );
            }
        });    
    });
    </script>
    <?php
}
}

  add_shortcode('woo_cage_code_info_tab_content3', 'woo_cage_code_info_tab_content3');

0
Karnak 3 weeks 2022-07-23T10:13:38-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse