woocoomerce checkout page edit [duplicate] - wordpress

Question

I would like to add some text under the "Place Order" button at WooCommerce checkout.
I'm using the woocommerce_review_order_after_submit hook:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p>By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Result (screenshot): https://ibb.co/F38bxDf
Could someone please help me edit this code to:
Add some space at the top (between the text and the "Place Order"
button)
Center align the text
Turn "Terms of Service" and "Privacy Policy" into clickable links
Decrease the line-height of the text
Decrease the font size
Is there a way to give this text a CSS class so I can control the styling of it with custom CSS? Or is possible to somehow type the custom CSS in the code snippet itself?
EDIT:
I've got 2 pieces of code.
Nr 1:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p class="text-under-place-order">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
and
Nr 2:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
Code snippet Nr 1 solves my initial question.
Code snippet Nr 2 is an addition to display "encrypted payment" and "money-back guarantee" above the text as per my request in the comments.
I don't know how to merge these 2 pieces of code into 1.

Answer 1

You could add a class like this:
function add_after_checkout_button() {
echo '<p class="yourClassName">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Or use css inline like this:
function add_after_checkout_button() {
echo '<p style="padding-top: 10px;">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
To turn the text into links just use a Terms and Service tag inside, just like you already did with the <p>.
EDIT:
HTML and CSS code to add an "encrypted payment" and "money-back guarantee" as requested in the comments:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
.row {
display: flex;
text-align: center;
}
.column {
flex: 50%;
}

Answer 2

You should just add a class to your tag <p></p> and style it in your style.css file in your child theme.
For the links, just add tags around the words "Terms of Service" and "Privacy Policy"