Question 246024 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Using ACF plugin to add barcode information to WooCommerce product page

I am using ACF to add barcode information to the WooCommerce product page. It has to be with the terms here:

Has to follow the one here: https://support.convictional.com/woocommerce/adding-barcode-values-in-woo-commerce#adding_barcode_values_in_woo_commerce
with terms as they asked.

[{ "id": 1, 
   "key": "barcode",
   "value": "12345678912" 
}, 
{ 
   "id": 2, 
   "key": "barcode_type", 
   "value": "upc" 
}]

Could any experts here let me know how and where to set it up please?

I did set up test area in the ACF with barcode and barcode_type but showing differently on the page.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Wo...This is so Awesome! @LoicTheAztec, thank you so much. They works perfectly.


  2. 0

    ACF is not convenient for this purpose as the real meta key will never be like "barcode" or "barcode_type", but something like: "field_648f2aaff9f4b" as you can see in this thread or in this other thread…

    Based on In WooCommerce product options edit page display a custom field before the SKU answer, you can easily add 2 custom fields in the product settings under Inventory section.

    enter image description here

    This way, you will have the correct meta keys to be recognized and used via REST API.

    The code:

    // Utility function: Barcode type options
function get_options_barcode_type() {
    return array(
        'upc'       => __('UPC'),
        'gtin'      => __('GTIN'),
        'isbn'      => __('ISBN'),
    );
}


// Admin: Add custom fields to product inventory section
add_action('woocommerce_product_options_sku', 'add_product_barcode_fields' );
function add_product_barcode_fields(){

    echo '<div class="class="barcode-options options_group">';

    woocommerce_wp_select( array(
        'id'          => 'barcode_type',
        'label'       => __('Barcode type', 'woocommerce' ),
        'options'     => get_options_barcode_type(),
    ) );

    woocommerce_wp_text_input( array(
        'id'          => 'barcode',
        'label'       => __('Barcode', 'woocommerce' ),
        'placeholder' => __('Enter the barcode', 'woocommerce' ),
    ) );

    echo '</div>';
}

// Admin: Save custom field values
add_action('woocommerce_admin_process_product_object', 'save_product_barcode_field_values', 10, 1 );
function save_product_barcode_field_values( $product ){
    if( isset($_POST['barcode_type']) ) {
        $product->update_meta_data( 'barcode_type', esc_attr($_POST['barcode_type']) );
    }

    if( isset($_POST['barcode']) ) {
        $product->update_meta_data( 'barcode', sanitize_text_field($_POST['barcode']) );
    }
}

    To display the barcode in single product pages in the meta section (near the SKU):

    enter image description here

    // Display The Barcode on product single page in meta section (with the SKU)
add_action( 'woocommerce_product_meta_start', 'display_single_product_meta_barcode' );
function display_single_product_meta_barcode() {
    global $product; 

    if( $barcode = $product->get_meta('barcode') ) {
        $barcode_options = get_options_barcode_type();
        $barcode_type    = $product->get_meta('barcode_type');
        printf('<span class="barcode_wrapper">%s: <span class="barcode">%s</span></span>', 
            $barcode_type ? $barcode_options[$barcode_type]: reset($barcode_options), $barcode );    
    }              
}

    Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

    Other related threads around GTIN and barcode

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search