Archived topic
How to edit check-out page and single product page?
7 replies · Started by Mohammad on November 14, 2020
Hello,
I am trying to edit my check out and single product pages as follows:
1. I am trying to widen the photo and description area because when I add a sidebar, it becomes so thin and ugly.
2. I am trying to trusted badges after the buttons "add to cart" and "place order."
I hope I can get a clear answer to how to edit these pages and add what I need to add.
Hi there,
1. Prime is using a layout element to make the content container of single products and static pages narrow:
https://www.screencast.com/t/sJITQSltqiz
You can edit and remove that as you want.
2. Is this for a single product page?
Thank you! As for the second question it is for both check out page after the button "place order" and for the single product page after the button "add to cart"
You will need to use WooCommerce' hooks:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
Most of the hooks should be listed in the hook element dropdown list:
https://docs.generatepress.com/article/hooks-element-overview/
I understood the part of creating a "hook." However, I have no idea how to add the "trust labels or badges" after the button. From what I saw, I need to add a CSS code or whatever it's called, and I am not a "techy" person. How or where do I get the right code to add the "photo" from my media?
How or where do I get the right code to add the “photo” from my media?
You will need to use the HTML image tag:
https://www.w3schools.com/tags/tag_img.asp
You can Google HTML image tag to see lots of examples of usages as it's not theme specific.
Another option is to use a block element then you can just use the image block from Gutenberg:
https://docs.generatepress.com/article/block-element-overview/
Thank you.
No problem :)
