WooCommerce 教程：“在Twitter上分享您的购买”在谢谢页面

我正在考虑在某人成为官方支持者之后，在我的感谢页面上展示 “分享您的社交媒体购买” 的方式。所以，我花了一些时间编码，一如既往，我将花更多的时间来分享我的辛勤工作！

/**
 * @snippet       Display a "Share your Purchase on Twitter" button @ WooCommerce Thank You Page

 * @sourcecode    https://businessbloomer.com/?p=22104
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.14
 */

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

function bbloomer_share_purchase_twitter( $order_id ) {
$string = 'I%20just%20became%20an%20official%20Business%20Bloomer%20Supporter!%20Check%20out%20the%20benefits%20at:%20';
$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 );
}
$barmada = array("21665", "21657", "21650");
if (in_array($product_id, $barmada)) {
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">';
?>
<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 &rarr; </a>
</div>
</div>
</div>
<?php
}
}

而且今天我感到很慷慨，这里也是我使用的全部 CSS 🙂

/* 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;
}