将 WooCommerce 中选定的变体自定义字段显示为 pdf 链接文件

问题描述

我希望能够为我的产品添加带有文档的外部链接。使用此代码，我为简单的产品添加了它，它可以按我的意愿工作：

// This function gets the value for the the custom fields from the database and adds it to the frontend output function
function wpse_add_custom_link_output() {
    $external_link = get_post_meta(get_the_ID(),'_custom_product_text_field',true);
    if ($external_link !== "")
        {
    $html = '<a href="'.$external_link.'" class="custom-button-class" target="_blank"><img src="https://pdfimage.png" width="100" height="100" alt="pdf_logo.png" title="'.__('External product link','woocommerce').'">Product Datasheet</a>';
    echo $html;
        }
};
add_action( 'woocommerce_after_add_to_cart_button','wpse_add_custom_link_output',10,0 ); 
// This function creates the field in the backend
function wpse_add_custom_link_field(){
    global $woocommerce,$post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field','placeholder' => __('Paste product link here','woocommerce'),'label' => __('Custom product link','desc_tip' => 'true'
        )
    );
    echo '</div>';
}
add_action('woocommerce_product_options_general_product_data','wpse_add_custom_link_field');
// this function saves the link/text field
function wpse_save_custom_link_field($post_id){
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
    update_post_Meta($post_id,esc_attr($woocommerce_custom_product_text_field));
}
add_action('woocommerce_process_product_Meta','wpse_save_custom_link_field');

我必须为要放置此类链接的变体添加相同的内容。此代码创建一个自定义字段，我可以在其中填写链接：

```// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation
 
add_action( 'woocommerce_variation_options_pricing','add_custom_field_to_variations',3 );
 
function add_custom_field_to_variations( $loop,$variation_data,$variation ) {
   woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']','class' => 'short','label' => __( 'Custom Field','woocommerce' ),'value' => get_post_meta( $variation->ID,'custom_field',true )
   ) );
}
 
// -----------------------------------------
// 2. Save custom field on product variation save
 
add_action( 'woocommerce_save_product_variation','save_custom_field_variations',2 );
 
function save_custom_field_variations( $variation_id,$i ) {
   $custom_field = $_POST['custom_field'][$i];
   if ( isset( $custom_field ) ) update_post_Meta( $variation_id,esc_attr( $custom_field ) );
}
 
// -----------------------------------------
// 3. Store custom field value into variation data
 
add_filter( 'woocommerce_available_variation','add_custom_field_variation_data' );
 
function add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ],true ) . '</span></div>';
   return $variations;
}

为了在前端显示它，我编辑：woocommerce/single-product/add-to-cart/variation.PHP，添加这一行：{{{data.variation.custom_field}}}

我的问题是它以纯文本形式出现 - 自定义字段：https://mylink.com 我正在寻找一种方法来使其成为可点击链接，并将链接本身替换为 PDF 文件或按钮的图像。

解决方法

对于您的产品变体，请将您的最后一个功能替换为以下内容：

add_filter( 'woocommerce_available_variation','add_custom_field_value_to_variation_data',10,3 );
function add_custom_field_value_to_variation_data( $variation_data,$product,$variation ) {
    $variation_data['custom_field'] = $variation->get_meta('custom_field');

    if( ! empty($variation_data['custom_field']) ) {
        $variation_data['custom_field_html'] = '<div class="woocommerce_custom_field"><a href="' . $variation_data['custom_field'] . '" class="custom-button-class" target="_blank"><img src="https://pdfimage.png" width="100" height="100" alt="pdf_logo.png" title="' . __("External product link","woocommerce") . '" />' . __("Product Datasheet","woocommerce") . '</a></div>';
    }
    return $variation_data;
}

然后在 variations.php 模板文件中，将 {{{data.variation.custom_field}}} 替换为：

 {{{data.variation.custom_field_html}}}