Custom Button WooCommerce Product Page

Public Ticket #13952

Custom Button WooCommerce Product Page

Conversation thread

KatkaG replied

6 years ago

Customer Reply

Perfect! Thank you.

PenciDesign replied

6 years ago

Staff Reply

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

KatkaG started the conversation

6 years ago

Conversation Start

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.

Want to join this conversation or access attachments? Sign in first.