Boom! I was thinking of a way to show a “Share your Purchase on Social Media” on my thank you page right after someone becomes an official supporter. So, I spent some time coding and – as always – now I’m going to spend some more time to share my hard work!

Leave a comment below if this was helpful – and if you want to test this out, you’re very welcome to become an official Business Bloomer fan of course 🙂

WooCommerce: display a “Twitter Intent” button on the thank you page

PHP Snippet: Display a “Share your Purchase on Twitter” button @ WooCommerce Thank You Page


/**
 * @snippet       Display a "Share your Purchase on Twitter" button @ WooCommerce Thank You Page
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=22104
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.3
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_thankyou', 'bbloomer_share_purchase_twitter', 5 );

function bbloomer_share_purchase_twitter( $order_id ) {

// CREATE TWEET CONTENT
$string = 'I%20just%20became%20an%20official%20Business%20Bloomer%20Supporter!%20Check%20out%20the%20benefits%20at:%20';

// SEE WHICH PRODUCTS ARE IN THE ORDER
$order = new WC_Order( $order_id );
$items = $order->get_items();
foreach ( $items as $item ) {
	$product_id = $item['product_id'];
	$product_name = $item['name'];
	$product_url = get_permalink( $product_id );
}

// GET THE LAST PRODUCT AND SEE IF BELONG TO WANTED LIST
$barmada = array( "21665", "21657", "21650" );
if ( in_array( $product_id, $barmada ) ) {

	// IF YES, CREATE THE THANK YOU PAGE "TWITTER BOX"
	echo '<h2 class="twitter-prod-h2">Share your purchase with the WooCommerce community!</h2>';
	echo '<div class="twitter-prod-wrapper"><div class="twitter-prod-div col2-set addresses">';
	echo '<div class="col-1">';
	if ( has_post_thumbnail( $product_id ) ) {
		$image = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'single-post-thumbnail' ); 
		echo '<img width="100" height="100" src="' . $image[0] . '" class="alignleft twitter-prod-img">';
	}
	echo '<div class="twitter-prod-name">' . $product_name . '</div>';
	echo '<div class="twitter-prod-url"><small>' . $product_url . '</small></div>';
	echo '</div><div class="col-2">';

	// GENERATE THE CLICK TO TWEET A HREF, NOTE "$string"
	?>
		<a class="button twitter-prod-button" target="_blank" href="https://twitter.com/intent/tweet?text=<?php echo $string ?>&url=https://businessbloomer.com/bloomer-armada/&hashtags=BloomerArmada,WooCommerce"><img width="25" height="25" src="https://businessbloomer.com/wp-content/uploads/2017/03/Twitter_Logo_White_On_Image.png" class="twitter-prod-tw-icon"> Share your purchase on Twitter → </a>
		</div>
		</div>
		</div>
	<?php
}
}

And as I feel generous today, here’s the full CSS I used as well 🙂


/* THANK YOU PAGE TWITTER */

.twitter-prod-wrapper {
    overflow: hidden;
}

.twitter-prod-div {
border: 4px solid #4099FF;
padding: 1em 2em 0;
background: #fcfcfc;
}

.twitter-prod-div .col-1, .twitter-prod-div .col-2 {
margin-top: 1.618em;
}

.twitter-prod-name {
color: #4099FF;
font-weight: bold;
}

.twitter-prod-tw-icon {
display: inline-block;
vertical-align: middle;
}

.twitter-prod-button {
float: right;
background: #4099FF;
border-color: #4099FF;
}

Share:

Leave a Reply