I used the Code Snippet plugin and the code I added is:
add_action( 'woocommerce_after_add_to_cart_form', 'my_function_sample', 10 ); function my_function_sample() { global $product; echo ' <button type="button" onclick="history.back();"> Go back </button> '; }
The button works exactly like I want but I'm wondering if you can help with a CSS code so I can customize the size, font, and colour of this button.
Hi. I added a custom 'go back' button in the woocommerce_after_add_to_cart_form page hook on my single product pages. You can see it here:
https://www.bluechiselstudio.com/product/bridge-into-morning-shop-listing/
I used the Code Snippet plugin and the code I added is:
add_action( 'woocommerce_after_add_to_cart_form', 'my_function_sample', 10 );
function my_function_sample() {
global $product;
echo ' <button type="button" onclick="history.back();"> Go back </button> ';
}
The button works exactly like I want but I'm wondering if you can help with a CSS code so I can customize the size, font, and colour of this button.
Thank you.
Hi,
First, please add a classes for that button by replace the code to:
add_action( 'woocommerce_after_add_to_cart_form', 'my_function_sample', 10 );
function my_function_sample() {
global $product;
echo ' <button class="penci-goback-woo-button" type="button" onclick="history.back();"> Go back </button> ';
}
After that, add more this code to Customize > Custom CSS:
.penci-goback-woo-button{ border: none; background: #ddd; color: #414C6A; padding: 10px 20px; text-transform: uppercase; font-family: "Raleway", sans-serif; font-weight: bold; cursor: pointer; }Best Regards,
PenciDesign
Perfect! Thank you.