I've managed to add two custom meta fields to the backend of woocommerce, shipping and size guides, using the add_meta_boxes function, as I don't want to use the woocommerce custom fields section as these will be consistent across most products. I will then use these new fields to display data in various points on my site, including pop up buttons and custom tabs.

I've kept the example short and with the security stuff missing, but you should get an idea.

add_action( 'add_meta_boxes', 'additional_product_tabs_metabox' );
function additional_product_tabs_metabox()
       __( 'Additional product Tabs', 'woocommerce' ),

//  Add custom metabox content

function additional_product_tabs_metabox_content( $post )
   echo '<h4>' . __( 'Shipping', 'woocommerce' ) . '</h4>';
   $value = get_post_meta( $post->ID, '_shipping_details', true );
   wp_editor( $value, '_shipping_details', array( 'editor_height' => 100 ) );

echo '<h4>' . __( 'Size Guide', 'woocommerce' ) . '</h4>';
   $value = get_post_meta( $post->ID, '_side_guide', true );
   wp_editor( $value, '_side_guide', array( 'editor_height' => 100 ) );

// Sanitize user input and save the post meta fields values.
if( isset($_POST[ '_shipping_details' ]) )
       update_post_meta( $post_id, '_shipping_details', wp_kses_post($_POST[ '_shipping_details' ]) );

if( isset($_POST[ '_side_guide' ]) )
       update_post_meta( $post_id, '_side_guide', wp_kses_post($_POST[ '_side_guide' ]) );

What I'm struggling with is getting the final results to display ONLY if I actually have data or text in the fields on the product page backend.

For the custom tabs, this is what I have (and it works), but I wondered if there was a better way that doesn't involve using the endif.

 // Adds the Shipping Details Tab
if( get_post_meta( $post->ID, '_shipping_details', true )): 
    $tabs['shipping_details_tab'] = array(
        'title'     => __( 'Shipping Details', 'woocommerce' ),
        'priority'  => 15,
        'callback'  => 'woo_shipping_details_tab_content'

 // Adds the Size Guide Details Tab
if( get_post_meta( $post->ID, '_size_guide', true )): 
    $tabs['size_guide_tab'] = array(
        'title'     => __( 'Size Guide', 'woocommerce' ),
        'priority'  => 15,
        'callback'  => 'woo_size_guide_tab_content'

For other occasions, I want it to appear as a button, which opens in a lightbox in different parts of my product page. But only when data is present in the product backend.

The only solution I've found was:

add_action( 'woocommerce_before_single_variation','size_guide_example', 12);
function size_guide_example(){
$post_id = get_post_meta( get_the_ID(), '_size_guide', true );
    if ($post_id == '') {
        echo '';
    } else {
echo /*my content */); 

However, as you can see that solution isn't ideal either. I've tried a whooooole bunch of different code such as:

$post_id = get_the_ID();
if ( metadata_exists( 'post', $post_id, '_size_guide' ) ) {

if( ! in_array( '_size_guide', get_post_custom_keys($post_id) ) ) {}

if ( metadata_exists( 'post', $post_id, '_size_guide' ) ) {
    $meta_value = get_post_meta( $post_id, '_size_guide', true );

And more, but none of them work!

Does anyone have some better solutions for me?

Short version: I want my size guide and shipping information, as shown in the image below, to display ONLY if there is text or code in the actual text area. I want the information to NOT show if it's blank. This will apply to hiding/showing additional tabs, and hiding/showing buttons that will open the information in a lightbox.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.