Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add text under "Place Order" button at WooCommerce checkout

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 <a href="https://www.exampledomain.com/terms-of-service/">Terms of Service</a> and <a href="https://www.exampledomain.com/privacy-policy/">Privacy Policy</a></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.

Tags:

2

Answers


  1. 0

    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 <a href="link">Terms and Service</a> 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%;
}
    Login or Signup to reply.
  2. 0

    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 <a href="your-link"></a> around the words "Terms of Service" and "Privacy Policy"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search