08
November
2021
Adding a testimonial to your checkout page can put potential customer at ease and increase your overall sales conversions. In this video Sterling runs through the process of adding a testimonial to your checkout page manually using a function and css; he also runs through adding testimonials to a Handsome Checkout, One Page WooCommerce Checkout.
Needed Function Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php // Your PHP code goes here! add_action( 'woocommerce_review_order_after_payment', 'add_content_on_checkout' ); function add_content_on_checkout() { echo '<div class="tcontainer"> <img src="https://sandbox.handsomewp.com/wp-content/uploads/2019/03/profile-1.jpg" alt=vAvatar" style="width:90px"> <p><span>John Doe.</span> - CEO at Company.</p> <p><i class="fa fa-quote-left" aria-hidden="true"></i> This is the best product in the world! I would recommend you purchase it!<i class="fa fa-quote-right" aria-hidden="true"></i> </p> </div> <div class="tcontainer"> <img src="https://sandbox.handsomewp.com/wp-content/uploads/2019/03/profile-1.jpg" alt=vAvatar" style="width:90px"> <p><span>John Doe.</span> - CEO at Company.</p> <p><i class="fa fa-quote-left" aria-hidden="true"></i> This is the best product in the world! I would recommend you purchase it!<i class="fa fa-quote-right" aria-hidden="true"></i> </p> </div> '; //add the image url in the src attribute } |
Needed CSS Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .tcontainer { border: 3px solid #eee; background-color: #f1f1f1; border-radius: 5px; padding: 16px; margin: 16px 0 } .tcontainer::after { content: ""; clear: both; display: table; } .tcontainer img { float: left; margin-right: 20px; border-radius: 50%; } .tcontainer span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .tcontainer { text-align: center; } .tcontainer img { margin: auto; float: none; display: block; } } |
Leave a Reply