skip to Main Content

How to add a custom button before Add to Cart form on WooCommerce Product Page? and I want different links for different products.

My PHP Code:

add_action( 'woocommerce_before_add_to_cart_form', 'learnalwayss_after_add_to_cart_btn' );
function learnalwayss_after_add_to_cart_btn() {
    global $product;
    
    if ( $product->get_id() == 149685 ) {
        echo '<a class="button primary is-small box-shadow-4 box-shadow-2-hover" style="border-radius: 10px; background-color:#FFDB58 !important; color:black;" target="_blank" href="https://myurls.bio/learn_alwayss">Our Links</a>';
    }
}

2

Answers


  1. Your solution is simple and effective but you have to add every url manually in the source code.
    The solution I am suggesting uses wp_postmeta to store the label and url of the button. This way, a regular user can add/change the value of the url instead of asking a developer to make every change.

    We’ll add 2 custom fields to the product page to store these values into metadata.

    To add custom fields for the custom_button_url and custom_button_text metadata to the edit product page in WooCommerce, you can use the woocommerce_product_options_general_product_data hook to add the custom fields to the product data panel, and the woocommerce_process_product_meta hook to save the custom field values when the product is saved.

    function custom_button_product_data_fields() {
        global $post;
    
        // Get the values of the "custom_button_url" and "custom_button_text" custom fields
        $custom_button_url = get_post_meta( $post->ID, 'custom_button_url', true );
        $custom_button_text = get_post_meta( $post->ID, 'custom_button_text', true );
    
        // Add a custom field for the "custom_button_url" metadata
        woocommerce_wp_text_input( array(
            'id'                => 'custom_button_url',
            'label'             => __( 'Custom Button URL', 'your-text-domain' ),
            'placeholder'       => 'http://',
            'description'       => __( 'Enter the URL for the custom button.', 'your-text-domain' ),
            'type'              => 'url',
            'value'             => $custom_button_url,
            'custom_attributes' => array(
                'pattern' => 'https?://.+',
            ),
        ) );
    
        // Add a custom field for the "custom_button_text" metadata
        woocommerce_wp_text_input( array(
            'id'                => 'custom_button_text',
            'label'             => __( 'Custom Button Text', 'your-text-domain' ),
            'placeholder'       => '',
            'description'       => __( 'Enter the text for the custom button.', 'your-text-domain' ),
            'type'              => 'text',
            'value'             => $custom_button_text,
        ) );
    }
    add_action( 'woocommerce_product_options_general_product_data', 'custom_button_product_data_fields' );
    
    

    And to save the values into the wp_postmeta you can use woocommerce_process_product_meta hook

    function save_custom_button_product_data_fields( $post_id ) {
        // Save the value of the "custom_button_url" custom field
        $custom_button_url = isset( $_POST['custom_button_url'] ) ? sanitize_text_field( $_POST['custom_button_url'] ) : '';
        update_post_meta( $post_id, 'custom_button_url', $custom_button_url );
    
        // Save the value of the "custom_button_text" custom field
        $custom_button_text = isset( $_POST['custom_button_text'] ) ? sanitize_text_field( $_POST['custom_button_text'] ) : '';
        update_post_meta( $post_id, 'custom_button_text', $custom_button_text );
    }
    add_action( 'woocommerce_process_product_meta', 'save_custom_button_product_data_fields' );
    

    Now we only have to display the button using the woocommerce_before_add_to_cart_form hook. You can use any other hook on the product page to show the button in a different place.

    function custom_button_before_add_to_cart() {
        global $product;
    
        $product_id = $product->get_id();
    
        // Get the values of the "custom_button_url" and "custom_button_text" custom fields
        $custom_button_url = get_post_meta( $product_id, 'custom_button_url', true );
        $custom_button_text = get_post_meta( $product_id, 'custom_button_text', true );
    
        // If the "custom_button_url" custom field has a value, show the button
        if ( ! empty( $custom_button_url ) ) {
            // If the "custom_button_text" custom field has a value, use it as the button text
            if ( ! empty( $custom_button_text ) ) {
                $button_text = $custom_button_text;
            } else {
                // If the "custom_button_text" custom field is empty, use the default button text
                $button_text = __( 'Default Button Text', 'your-text-domain' );
            }
    
            // Use the value of the "custom_button_url" custom field as the button link
            $button_link = $custom_button_url;
    
            echo '<a href="' . esc_url( $button_link ) . '" class="single_add_to_cart_button button alt">' . esc_html( $button_text ) . '</a>';
        }
    }
    add_action( 'woocommerce_before_add_to_cart_form', 'custom_button_before_add_to_cart' );
    
    
    Login or Signup to reply.
  2. This code enables you to use WordPress or ACF custom fields to add unique button links.

    add_action( 'woocommerce_before_add_to_cart_form', 'button_custom_field' );
    function button_custom_field() {
    
       $wp = get_post_meta( get_the_ID(), 'wp_button', true );
        
       $acf = class_exists('acf') ? get_field('acf_button') : '';
        
       $field = $acf ? $acf : $wp;
        
       if ( $field && is_singular('product') ) {
            
       printf( '<a href="%s" class="button primary is-small box-shadow-4 box-shadow-2-hover" target="_blank" rel="”nofollow” noopener">' . __( 'Custom Button' ) . '</a>',  $field ); 
        
        }
    
    }
    

    Note : I wouldn’t add the styling inline. Better to add it in your child themes stylesheet. Source

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search