Show custom field as external link in WooCommerce

Question

I have the code that shows the custom fields on the single product page and the WooCommerce archive page.

// Backend: Add Designer Fields
add_action( 'woocommerce_product_options_general_product_data', 'add_designer_fields' );
function add_designer_fields() {

// Designer Name Field
woocommerce_wp_text_input( array(
    'id' => '_designer_name',
    'label' => __( 'Designer Name', 'woocommerce' ),
));

// Designer URL Field
woocommerce_wp_text_input( array(
    'id' => '_designer_url',
    'label' => __( 'Designer URL', 'woocommerce' ),
));

}

// Backend: Save Designer Fields
add_action( 'woocommerce_admin_process_product_object', 'save_designer_fields' );
function save_designer_fields( $product ) {

// Save Designer Name Field
if( isset( $_POST['_designer_name'] ) ) {
    $product->update_meta_data( '_designer_name', sanitize_text_field( $_POST['_designer_name'] ) );
}

// Save Designer URL Field
if( isset( $_POST['_designer_url'] ) ) {
    $product->update_meta_data( '_designer_url', sanitize_text_field( $_POST['_designer_url'] ) );
}

}

// Display Designer Fields on single product pages and on archive pages
add_action('woocommerce_before_add_to_cart_form', 'display_designer_fields_value', 5 );
add_action('woocommerce_after_shop_loop_item', 'display_designer_fields_value', 0 );
function display_designer_fields_value() {
global $product;

if( $designer_name = $product->get_meta('_designer_name') )
    echo  '<span id="value-on-single-product" class="custom-field">' . __("", "woocommerce") . $designer_name . '</span>';

if( $designer_url = $product->get_meta('_designer_url') )
    echo  '<span id="value-on-single-product" class="custom-field">' . __("", "woocommerce") . $designer_url . '</span>';

}

• The first field shows the name
• The second an external link.

These fields work correctly. But I need the name field to be a link on the pages.

For example: when adding a product, the manager enters the name of the designer and a link to his site.

On the single product page and the archive page, the designer's name is shown as a link. When you click on it, you need to go to the website of the designer.

Can you tell me how to do this? I cannot find the right code.

Answer 1

You can use the following for this:

The conditions ensure that the text is always displayed (if not empty), the 2nd condition makes it a clickable link if the designer url field is not empty, otherwise just the designer name will be shown.

HTML <a> target attributes from w3schools.com:

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window

function display_designer_fields_value() {
    global $product;
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {  
        // Get meta
        $designer_name = $product->get_meta( '_designer_name' );
        $designer_url = $product->get_meta( '_designer_url' );

        // NOT empty
        if ( ! empty( $designer_name ) ) {
            $output = '<span id="value-on-single-product" class="custom-field">';

            // NOT empty
            if ( ! empty ( $designer_url ) ) {
                $output .= '<a href="' . $designer_url . '" target="_blank">' . $designer_name . '</a></span>';
            } else  {
                $output .= $designer_name . '</span>';
            }
            
            echo $output;
        }
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'display_designer_fields_value' );
add_action( 'woocommerce_after_shop_loop_item', 'display_designer_fields_value' );