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  style="border-radius: 10px; background-color:#FFDB58 !important; color:black;" target="_blank" href="https://myurls.bio/learn_alwayss">Our Links</a>';
    }
}

CodePudding user response：

For adding different links for different product you need to add following code

add_action('woocommerce_single_product_summary', 'custom_button_before_add_to_cart', 30);
function custom_button_before_add_to_cart() {
  global $product;
  $product_id = $product->get_id();
  if ($product_id == 123) {
    $button_link = 'https://myurls.bio/learn_alwayss';
  } elseif ($product_id == 456) {
    $button_link = 'https://myurls.bio/learn_alwayss';
  } else {
    $button_link = 'https://myurls.bio/learn_alwayss';
  }
  echo '<a href="' . $button_link . '" >Button Text</a>';
}

CodePudding user response：

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 ) . '" >' . esc_html( $button_text ) . '</a>';
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'custom_button_before_add_to_cart' );