Facebook and Line Inbox button under Add to Cart on WooCommerce Single Product Page

functions.php

/* add additional button on single product page for woocommerce */
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 31 );

function my_extra_button_on_product_page() {
  global $product;
  echo '<div class="social-order">';
  echo '<a href="https://m.me/FACEBOOK_PAGE_USER_NAME_HERE" target="_blank" class="button large facebook-btn"><span class="fa fa-facebook-square fa-2x" aria-hidden="true"></span> สั่งซื้อทาง Facebook</a>';
  echo '<a href="http://line.me/ti/p/~LINE_ID_HERE" target="_blank" class="button line-btn"><span class="icon icon-line fa-2x"></span> สั่งซื้อทาง Line</a>';
  echo '</div>';
}

style.css

/* Facebook and Line on Single Product button */
.social-order {
    	display: block;
    	overflow: hidden;
	margin-bottom: 20px;
}
.facebook-btn {
    	background-color: #3a589d !important;
	opacity: 1.0;
	padding: 4px 16px !important;
    	color: #fff !important;
    	font-size: 20px !important;	
	float: left;
	text-align: center;
	margin: 10px 0;
	border-radius: 3px !important;;
}
.facebook-btn:hover, .facebook-btn:focus {
    	opacity: 0.9;
}
.fa-facebook-square:before {
    	content: "\f082";
    	vertical-align: middle;
	font-size: 1.1em;
}
/* Line button */
.line-btn {
    	background-color: #00c300 !important;
	opacity: 1.0;
	padding: 3.5px 16px !important;
    	color: #fff !important;
    	font-size: 20px !important;	
	float: right;
	text-align: center;
	margin: 10px 0;
	border-radius: 3px !important;
}
.line-btn:hover, .line-btn:focus {
    	opacity: 0.9;
}
.icon-line:before {
    	content: "\e900";
    	vertical-align: middle;
}
@media (max-width: 1199px) {
	.facebook-btn {
    		background-color: #3a589d !important;
		opacity: 1.0;
		padding: 4px 16px !important;
    		color: #fff !important;
   	 	font-size: 18px !important;	
		float: none;
		display: block;
		overflow: hidden;
		margin-bottom: 20px !important;	
		width: 100%;
	}
	.line-btn {
    		background-color: #00c300 !important;
		opacity: 1.0;
		padding: 3px 36px !important;
    		color: #fff !important;
    		font-size: 18px !important;	
		float: none;
		display: block;
		overflow: hidden;
		width: 100%;
	}	
}