Show custom fields added to be used in variable product variations.

Good day:

Please your advice, manage to display the added fields on the frontend (variable product page).

I have managed to define (based on information from the internet) the code that allows me to enter / store personalized information in the variations of the attributes of a variable product, for this:

1. I have installed / activated the theme: Woodmart-child,
2. I have defined the changes in the file: functions.php (see attachment)

At the moment everything is fine.

But I want to show such fields in variable product page on frontend.

Indicate which directory I must create in the Woodmart-Child theme, which file I must copy (so as not to alter the original file) and what changes I must make. It will be very useful to achieve the objective set by my client.
Your advice is appreciated in advance.

Best regards.

Attachments:

You must be logged in to view attached files.

Please check the attached file, it is the PHP code I am using, and it is working fine.

<?php
/**
 * Enqueue script and styles for child theme
 */
function woodmart_child_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'woodmart-style' ), woodmart_get_theme_info( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'woodmart_child_enqueue_styles', 10010 );

 
 /**
* How to Add Fields to WooCommerce Variable Product - Inicio - 01
* To Add the fields to WooCommerce variable product is quite simple. You just need to follow the steps to add your own custom variation fields.

Step1: Add custom field to each product variation
Lets move forward to store the variation fields into database.

1. create the custom function ci_save_variation_settings_fields() and store the submitted variation fields data.
2. To store the data add the function to action hook woocommerce_save_product_variation

To Add the fields to WooCommerce variable product, copy below code to your child theme functions.php file.

Step2: Store custom field value into variation data
Step3: Variation Template Override

* https://codeinform.com/how-to-add-fields-to-woocommerce-variable-product/
*/

// Admin side Variable product fields

add_action( 'woocommerce_product_after_variable_attributes', 'ci_variation_settings_fields', 10, 3 );
// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'ci_save_variation_settings_fields', 10, 2 );

// Create new fields for variations
function ci_variation_settings_fields( $loop, $variation_data, $variation ) {
  
  // Number Field 01
  woocommerce_wp_text_input( 
    array( 
      'id'          => 'v_precio_anterior[' . $variation->ID . ']', 
      'label'       => __( 'Precio anterior en S/ ', 'woocommerce' ), 
      'placeholder' => '',
      'desc_tip'    => 'true',
      'description' => __( 'Ingrese el precio anterior en S/ .', 'woocommerce' ),
      'type'        => 'number',
      'value'       => get_post_meta( $variation->ID, 'v_precio_anterior', true ),
      'custom_attributes' => array(
              'step'  => 'any',
              'min' => '0'
            ) 
    )
  );
  
  // Number Field 02
  woocommerce_wp_text_input( 
    array( 
      'id'          => 'v_nro_de_cuotas[' . $variation->ID . ']', 
      'label'       => __( 'Nro. de cuotas mensuales ', 'woocommerce' ),
	  'placeholder' => '', 
      'desc_tip'    => 'true',
      'description' => __( 'Ingrese el Nro. de cuotas mensuales.', 'woocommerce' ),
      'type'        => 'number',
      'value'       => get_post_meta( $variation->ID, 'v_nro_de_cuotas', true ),
      'custom_attributes' => array(
              'step'  => 'any',
              'min' => '0'
            ) 
    )
  );
  
  // Number Field 03
  woocommerce_wp_text_input( 
    array( 
      'id'          => 'v_cuota_inicial[' . $variation->ID . ']', 
      'label'       => __( 'Cuota Inicial S/ ', 'woocommerce' ),
	  'placeholder' => '', 
      'desc_tip'    => 'true',
      'description' => __( 'Ingrese el Valor de la cuota inicial en S/ .', 'woocommerce' ),
      'type'        => 'number',
      'value'       => get_post_meta( $variation->ID, 'v_cuota_inicial', true ),
      'custom_attributes' => array(
              'step'  => 'any',
              'min' => '0'
            ) 
    )
  );
  
  // Number Field 04
  woocommerce_wp_text_input( 
    array( 
      'id'          => 'v_cuota_mensual[' . $variation->ID . ']', 
      'label'       => __( 'Cuota Mensual S/ ', 'woocommerce' ),
	  'placeholder' => '', 
      'desc_tip'    => 'true',
      'description' => __( 'Ingrese el Valor de la cuota mensual en S/ .', 'woocommerce' ),
      'type'        => 'number',
      'value'       => get_post_meta( $variation->ID, 'v_cuota_mensual', true ),
      'custom_attributes' => array(
              'step'  => 'any',
              'min' => '0'
            ) 
    )
  );
  
  
  
}

// Save new fields for variations
function ci_save_variation_settings_fields( $post_id ) {
    
  // Number Field 01
  $number_field_01 = $_POST['v_precio_anterior'][ $post_id ];
  if( ! empty( $number_field_01 ) ) {
    update_post_meta( $post_id, 'v_precio_anterior', esc_attr( $number_field_01 ) );
  }
  
  // Number Field 02
  $number_field_02 = $_POST['v_nro_de_cuotas'][ $post_id ];
  if( ! empty( $number_field_02 ) ) {
    update_post_meta( $post_id, 'v_nro_de_cuotas', esc_attr( $number_field_02 ) );
  }
  
  // Number Field 03
  $number_field_03 = $_POST['v_cuota_inicial'][ $post_id ];
  if( ! empty( $number_field_03 ) ) {
    update_post_meta( $post_id, 'v_cuota_inicial', esc_attr( $number_field_03 ) );
  }
  
  // Number Field 04
  $number_field_04 = $_POST['v_cuota_mensual'][ $post_id ];
  if( ! empty( $number_field_04 ) ) {
    update_post_meta( $post_id, 'v_cuota_mensual', esc_attr( $number_field_04 ) );
  }
  
  
  
}

/**
* How to Add Fields to WooCommerce Variable Product - Inicio - 01
* To Add the fields to WooCommerce variable product is quite simple. You just need to follow the steps to add your own custom variation fields.

Step1: Add custom field to each product variation
Step2: Store custom field value into variation data

It is must that each custom variation field be added to the WooCommerce available variations filter hook add_filter( ‘woocommerce_available_variation’, ‘load_variation_settings_fields’ );

The below code is self explanatory, add it to the child theme functions.php file

Step3: Variation Template Override

* https://codeinform.com/how-to-add-fields-to-woocommerce-variable-product/
*/

// Add New Variation Settings
add_filter( 'woocommerce_available_variation', 'load_variation_settings_fields' );
/**
 * Add custom fields for variations
 *
*/
function load_variation_settings_fields( $variations ) {
  
  // duplicate the line for each field

  $variations['v_precio_anterior'] = get_post_meta( $variations[ 'variation_id' ], 'v_precio_anterior', true );
  
  $variations['v_nro_de_cuotas'] = get_post_meta( $variations[ 'variation_id' ], 'v_nro_de_cuotas', true );
  
  $variations['v_cuota_inicial'] = get_post_meta( $variations[ 'variation_id' ], 'v_cuota_inicial', true );
  
  $variations['v_cuota_mensual'] = get_post_meta( $variations[ 'variation_id' ], 'v_cuota_mensual', true );

  
  
  return $variations;
}
 

Hello,

Sorry, but your request requires additional code customization of the third-party plugin. Such work is out of our theme support scope. Read more in Envato Theme Support Policy here https://themeforest.net/page/item_support_policy

Kind Regards

[Author]

Posts