You are currently viewing Add Custom Extra Button After Woocommerce Add To Cart Button

Add Custom Extra Button After Woocommerce Add To Cart Button

Requirements for Content Switcher Button in Elementor – 

1 – Advanced Custom Field Plugin (Free)
2 – WPcode custom snippet plugin (Free)

Best part about this custom button is that you can choose on which product it can be shown and have different links/URL for different products.

Use the below code in WPcode plugin or in your child theme .

					/*PHP to add buton*/

function display_custom_button() {
    global $product;

    // Check if it's a WooCommerce product and the ACF field is checked
    if (is_product() && get_field('enable_custom_button', $product->get_id())) {
        // Get the custom URL
        $custom_url = get_field('custom_url', $product->get_id());

        // Output the button HTML with the right arrow icon from Font Awesome
        echo '<a href="' . esc_url($custom_url) . '" class="button custom-url-button"> Custom Button Text <i class="fas fa-arrow-right"></i></a>';
add_action('woocommerce_after_add_to_cart_button', 'display_custom_button');


display_custom_button – Name of the function (You can name it anything)
enable_custom_button – Name of the True/False ACF field
custom_url – The name of the ACF field for the URL
custom-url-button – CSS class to target this specific button for customization
Custom Button Text – The text that is shown inside the button (You can remove the i class section to remove icon or simply replace it)

If you change the names above then make sure you keep it same in the color coded sections (Example: for green color ones below, keep the text you have chosen same on all 3 parts).

PhP Custom Button after add to cart woocommerce

Use the below code to customize the custom button after add to cart. In some cases, theme might be overriding the style. So, simply add ” !important” after the color codes.

If you changed the class in above code (custom-url-button), then make sure to use the same below.

					/*CSS to customize the button*/
/*Use !important if your theme is over-riding the below settings*/

.custom-url-button {
background-color: #0073e6;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;

.custom-url-button:hover {
background-color: #005baa;

Code explanation written with ChatGPT :

This code is for adding a custom button to WooCommerce product pages in WordPress using PHP and styling the button with CSS.

PHP Code Explanation:

function display_custom_button(): This function is defined to display the custom button on the product pages.

global $product;: It makes the $product variable available within the function, assuming that $product is a global variable representing the current WooCommerce product.

if (is_product() && get_field(‘enable_custom_button’, $product->get_id())): Checks if the current page is a product page (is_product()) and if a custom field called ‘enable_custom_button’ is checked for the current product.

$custom_url = get_field(‘custom_url’, $product->get_id());: Retrieves the value of another custom field called ‘custom_url’ for the current product, assuming Advanced Custom Fields (ACF) is being used.

echo ‘<a href=”‘ . esc_url($custom_url) . ‘” class=”button custom-url-button”> Custom Button Text <i class=”fas fa-arrow-right”></i></a>’;: Outputs an HTML anchor (<a>) element with a link to the custom URL. The button has a class ‘button‘ and ‘custom-url-button‘ for styling purposes. It includes the text “Custom Button Text” and an icon from Font Awesome (<i class=”fas fa-arrow-right”></i>).

add_action(‘woocommerce_after_add_to_cart_button’, ‘display_custom_button’);: Hooks the display_custom_button function to the ‘woocommerce_after_add_to_cart_button’ action hook, ensuring that the custom button is displayed after the default WooCommerce “Add to Cart” button.

CSS Code Explanation:

The CSS code is used to style the custom button:

.custom-url-button: Styles the button with a blue background color (#0073e6), white text color (#fff), removes text decoration, adds padding, and gives it a border-radius for rounded corners.

.custom-url-button:hover: Styles the button when hovered over. It changes the background color to a darker blue (#005baa).

Additionally, there is a comment suggesting the use of !important if the theme is overriding the styles. !important is a CSS declaration that gives a rule higher specificity, making it more likely to override other conflicting styles.

In summary, this code adds a custom button to WooCommerce product pages, and the button’s appearance is customized using the provided CSS styles.


Leave a Reply