Archived topic
Change style to title
15 replies · Started by Pedro on December 14, 2019
Hello! Previously you had helped me to personalize the checkout of my site.
I would like you to help me with something more related to this customization.
Currently in the header the title of the checkout has been added.
See screenshot: https://mega.nz/#!q9Nx1CDC!sGUMO44wSAib15Gmyibqj--fplS8ICIWOGEBQjGCH7Y
I would now like to replace the title text of "Finish purchase" with "Return to cart" and that it be linked to the cart page.
The codes you gave me were:
CSS
.woocommerce-checkout #primary-menu {
display: none;
}
.checkout-title {
order: 10;
line-height: 60px;
color: #fff;
font-size: 17px;
padding-right: 40px;
}
@media (max-width: 768px) {
.checkout-title {
padding-right: 20px;
}
}
@media (max-width: 768px) {
.woocommerce-checkout button.menu-toggle,
.woocommerce-checkout .mobile-bar-items {
display: none;
}
.woocommerce-checkout .checkout-title {
order: 2;
margin-right: 5px;
}
}HOOK
<div class="checkout-title">Finalizar compra</div>
I want to note that I would like the source to be the same. Size, type and color.
Thank you!
Hi there,
Try replacing Finalizar compra with this:
<a href="URL TO YOUR CART">Back to Cart</a>
Then add this CSS:
.checkout-title a {
color: #fff;
}Hello Tom! I have added the CSS after the last line of the code.
I changed the hook, and it worked perfectly.
However for some strange reason, now this text looks smaller.
Could you help me with this?
You can adjust the font size like this:
.checkout-title a {
color: #fff;
font-size: 17px;
}Hello Tom! The new code worked perfectly, thanks!
Now there is something else, when customers already place the order and are redirected to the thank you page.
You still see the link "Back to cart"
Is there any way to make another text appear when they reach the thank you page?
Hmm, not sure about that one. What Display Rule are you using?
Hello Tom! For this hook I am showing it on Page -> Checkout
Hi there,
the thank you page is an endpoint of the Checkout hence it displays the same hooked content. You can try using this Woo function to check the endpoint condition:
https://docs.woocommerce.com/wc-apidocs/function-is_wc_endpoint_url.html
Code will look something list this just need to make sure the endpoint_url matches:
<?php
if ( ! is_wc_endpoint_url('order-received') ) { ?>
<a href="URL TO YOUR CART">Back to Cart</a>
<?php }
?>Hello david! I'm not sure what to do with exactly what you tell me.
Can you explain me in a simpler way?
Thank you!
You replace the HTML Tom provided ie.
<a href="URL TO YOUR CART">Back to Cart</a>
With the code I provided here
Then ensure you Check Execute PHP in the Hook
Hello david! I have added the code and when I get to the thank you page the title disappears.
What I really want is for the text to change from "Back to cart" to "Order received"
Try this instead:
<?php
if ( ! is_wc_endpoint_url('order-received') ) { ?>
<a href="URL TO YOUR CART">Back to Cart</a>
<?php } else { ?>
Order Received
<?php } ?>Works great! Thank you Tom :)
You're welcome :)
Hello again! I hope you are well.
I want to report a problem with this customization.
Recently I updated all the themes and plugins of my site, and now the two titles are being shown at checkout.
Here is a screenshot: https://mega.nz/#!3oEFECJJ!lElHkb8HlPv5Zhps_MXBpmMj1yrnhw7fbVeshwUuBQw
Please I need help to correct this.
