How to add WhatsApp button?

You can add the WhatsApp as a contact option to the Contact Options block by adding the code below in your theme functions.php file or even better by creating a new blank plugin https://wpadverts.com/blog/how-to-use-code-snippets-in-wordpress/ and pasting it there

add_filter( "wpadverts/block/details/contact-options", function( $options, $atts, $post_id  ) {

    if( $post_id ) {
        $phone_number = str_replace( ["+", "-", " ", "(", ")" ], "", get_post_meta( $post_id, "adverts_phone", true ) );
        $post = get_post( $post_id );
        $post_title = htmlentities( $post->post_title );

        $url = esc_attr( sprintf( "https://wa.me/%s?text=%s", $phone_number, $post_title ) ); 
    } else {
        $url = "";
    }

    $options["my-contact-whatsapp"] = [
        "text" => "WhatsApp", 
        "icon" => "fas fa-phone-alt", 
        "class" => "my-contact-whatsapp",
        "type" => "secondary",
        "order" => 1,
        "options" => array(
            "mobile" => "text-and-icon",
            "desktop" => "text-and-icon"
        ),
        "label" => "WhatsApp",
        "is_active" => true,
        "attr" => [
            "onclick" => "window.location.href='$url'"
        ]
    ];

    return $options;
},5, 3);

Note that if you are using the default Ad detail template the new option should automatically appear, if you have a custom Ad details template created then you need to edit it from the wp-admin -> Pages panel click on the Classifieds Single Contact block and check “WhatsApp” in the contact methods.

is there anyway to change the color just for this button without affecting other default styles? because you know people already accustomed whatsapp with dark green color

You should be able to customize the new button by adding the code below in the wp-admin / Appearance / Customize / Additional CSS panel

.my-contact-whatsapp {
  background-color: green !important;
  color: white !important;
}

how to make the icon bigger on the whatsapp button?

when i change the icon parameter, the icon looks small compared to the text

"icon" => "fa-brands fa-whatsapp", 

I tried using “fa-2xl” doesnt seems to work

Also your code doesnt work if we change classifieds rendering to “Block (recommended) – use block templates” and set to custom page containing “Classifieds Details” block.

add_filter( "wpadverts/block/details/contact-options", function( $options, $atts, $post_id  ) {

    if( $post_id ) {
        $phone_number = str_replace( ["+", "-", " ", "(", ")" ], "", get_post_meta( $post_id, "adverts_phone", true ) );
        $post = get_post( $post_id );
        $post_title = htmlentities( $post->post_title );

        $url = esc_attr( sprintf( "https://wa.me/%s?text=%s", $phone_number, $post_title ) ); 
    } else {
        $url = "";
    }

    $options["my-contact-whatsapp"] = [
        "text" => "WhatsApp", 
        "icon" => "fas fa-phone-alt", 
        "class" => "my-contact-whatsapp",
        "type" => "secondary",
        "order" => 1,
        "options" => array(
            "mobile" => "text-and-icon",
            "desktop" => "text-and-icon"
        ),
        "label" => "WhatsApp",
        "is_active" => true,
        "attr" => [
            "onclick" => "window.location.href='$url'"
        ]
    ];

    return $options;
},5, 3);

1) you can style the button using my-contact-whatsapp class like this

.my-contact-whatsapp {
  font-size: 24px !important;
}

the above code you can add in the wp-admin -> Appearance -> Customize -> Additional CSS panel

2) indeed this code snippet is for the blocks only, the deprecated shortcode mode does not have wpadverts/block/details/contact-options filter.

I didn’t use shortcode at all.

I found the fix. you should add your custom button to this “wpadverts/block/details/atts” filter if you use “Block (recommended)” as your rendering type.

But the weird thing is, you dont need to do this if you set the rendering type to “Default”

Now ignore the whatsapp button. My question is, Both “Default” and “Block (recommended)” rendering is using “block”. Why you need to separate the template for both as both is using block? its make everything complicated. and as you can see from the screenshot it will make the overall look a little different if you forget to make the css styling exactly identical.

“Default” is using this:
Adverts_Block_Single_Contact Class
/wpadverts/blocks/single-data-table/templates/list.php

“Block (recommended)” is using this:
Adverts_Block_Details class
/wpadverts/blocks/details/templates/single.php

Hi,

if you install a fresh version of WPAdverts the “Default” will be the same as “Block”, but in older versions (older than 2.0 when we introduced blocks) the “Default” is “Shortcode”, so to answer your question the “Default” option is the for backwards compatibility.

That is if someone updates from 1.X to 2.0 his rendering would automatically switch to blocks which most likely isn’t something they want as most of the time switching from shortcodes to blocks requires some work.