CODEWITHSUNDEEP
phphtmlcsswordpresswoocommerce
JOKKER
JOKKER

Reputation: 542

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:

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.

Upvotes: 3

Views: 3076

Answers (2)

crossi100
crossi100

Reputation: 98

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%;
}

Upvotes: 2

Djilan MOUHOUS
Djilan MOUHOUS

Reputation: 46

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"

Upvotes: 1

Related Questions