Adding space below Back / Return button on single product pages

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

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

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

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 ??

Does anyone know a fix for this? Still haven’t been able to add space below the button.

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

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.