Add shortcode and div into PHP output to new shortcode

Question

This is the current HTML but I'd like to create a shortcode to display it all...

<div class="widget" sp-sku="sku-value-goes-here"></div>

I setup a shortcode that get the SKU

function wc_get_product_sku() { 
    global $product;
    echo $product->get_sku();
add_shortcode('product_sku', 'wc_get_product_sku');

But I'd like a new shortcode to output the entire div with the shortcode or sku in the div class.

Xhynk · Accepted Answer · 2020-02-13 18:50:54Z

1

Go ahead and give the WordPress Shortcode documentation a glance. The shortcode you have now is improper. WordPress Shortcodes are supposed to return a value, not echo or otherwise output it. If you see echo statements in a shortcode function, generally they have Output Buffering enabled, and then return the final value. (you also have a syntax error)

The following would be the proper way to implement your current function:

add_shortcode('product_sku', 'wc_get_product_sku'); 
function wc_get_product_sku() { 
    global $product;

    return $product->get_sku();
}

If you want to output the HTML, just include that in the return value. If you want another function:

add_shortcode( 'product_sku_div', 'wc_product_sku_div'); 
function wc_product_sku_div() { 
    global $product;

    return sprintf( '<div class="widget" sp-sku="%s"></div>', $product->get_sku() );
}

Alternatively, you could add them to the same function and use shortcode attributes to determine whether to output the whole HTML or just the SKU, something like this:

add_shortcode( 'wc_get_product_sku', 'wc_get_product_sku_function'); 
function wc_get_product_sku_function( $atts ) { 
    global $product;
    $sku = $product->get_sku();

    extract( shortcode_atts( array(
        'wrap' => false,
    ), $atts, 'wc_get_product_sku' ) );

    return ($wrap == true) ? sprintf( '<div class="widget" sp-sku="%s"></div>', $sku ) : $sku;
}

This would like you use [wc_get_product_sku] or [wc_get_product_sku wrap="false"] to get just the sku, and [wc_get_product_sku wrap="true"] to get the whole HTML.

Edit: to check the sku, just wrap the return statement in an if/else:

add_shortcode( 'product_sku_div', 'wc_product_sku_div'); 
function wc_product_sku_div() { 
    global $product;

    if( $product && !empty( $product->get_sku() ) ){
        return sprintf( '<div class="widget" sp-sku="%s"></div>', $product->get_sku() );    
    } else {
        return '<div>NO SKU FOUND</div>';
    }
}

edited Feb 13, 2020 at 18:50

answered Feb 13, 2020 at 18:06

Xhynk

13.9k8 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

neptunee Over a year ago

Thank you! The middle one worked perfectly. Would you know how to use the middle code but add an if/else. If there is a sku then show the div. If not then show and alternative div.

Xhynk Over a year ago

I added an edit. I'm not entirely sure what WC_Product::get_sku() returns when there is no SKU, so I took a stab and went with !empty($product->get_sku()), but you can change that if it's something else - the if/else structure should remain the same

neptunee Over a year ago

I have another side question. It appears that woocommerce uses the Sku Meta Data to change images and the SKU on display. Using the above code the sku updates on the page but the sku does not update inside the div.

Collectives™ on Stack Overflow

Add shortcode and div into PHP output to new shortcode

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related