Adding space below Back / Return button on single product pages

Resolved epatri
(@epatri)

6 years, 7 months ago

I was successfully able to add a “GO BACK” button to my single product pages using the solution in this topic.

I used the visual hooks guide for single product pages to edit the code so the button was positioned above the product photos, title and description but below my shop banner/header (I used “woocommerce_before_single_product”).

However, the button is now sitting directly on top of the main product image on the single product page, with no gap underneath, so they’re touching. I would rather there be a bit of empty space below the “GO BACK” button so it’s not touching the main product image below. How do I edit code of my snippet to achieve this? Thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)

Joey – a11n
(@jricketts4)

6 years, 7 months ago

Hi there,

I’d need to see the page where this is located to give an exact answer, but you should be able to use a margin in your styling (located in the Customizer of the page).
You can read a bit on margins here: https://www.w3schools.com/css/css_margin.asp

Also, this is considered beyond our offered support, but I’d still be happy to look if you can provide that link.

Thank you,
Joey
Thread Starter epatri
(@epatri)

6 years, 7 months ago
I’ve actually created it using this snippet:
```
add_action( 'woocommerce_before_single_product', 'my_function_sample', 10);
function my_function_sample() {
  global $product;
  echo ' <button type="button" onclick="history.back();"> Go back </button>' ; 
}
```
Joey – a11n
(@jricketts4)

6 years, 7 months ago

Thanks for letting me know, @epatri.
I’m going to go ahead and close this since it seems you’ve managed to figure this out. 🙂

Thank you,
Joey

Thread Starter epatri
(@epatri)

6 years, 7 months ago

Hi Joey, I haven’t figured this out as the button code doesn’t include any margins or a space to add margins, so it’s not resolved 🙁

Thread Starter epatri
(@epatri)

6 years, 7 months ago

Does anyone know a fix for this? Still haven’t been able to add space below the button.
3 Sons Development
(@3sonsdevelopment)

6 years, 6 months ago
Hey @epatri,

What you’ll probably want to do is add a class to the button so that it can be styled with CSS a bit more easily.
```
<button class="back-to-product-button" type="button" onclick="history.back();"> Go back </button>
```
Then you could use CSS like this to move it around:
```
.back-to-product-button {
    margin-top: 20px;
    margin-left: 20px;
}
```
If you have trouble positioning it, could I get you to send over the URL to where this button can be found on the site? Being able to see and interact with it would help out quite a bit.

Thanks
Plugin Support EtienneP a11n
(@etiennep)

6 years, 6 months ago

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.