Product Sharing on the product detail page with WhatsApp

Hello,

Do you mean, you want to add the Whatsapp option to the product sharing buttons?

If yes, following the docs will help you with it.

https://docs.oceanwp.org/article/306-add-remove-edit-the-social-product-sharing-links

https://docs.oceanwp.org/article/744-ocean-product-sharing-getting-started

Yes, But I am unable to do so. can you please share the code? I copy the Pinterest code and change it to WhatsApp.but the icon i was unable to change please help. Share the code if you have it.

Hello,

Try to add the below section of code:

// Whatsapp
if ( 'whatsapp' == $site ) {
	?>

	<li class="whatsapp">
		<a href="https://wa.me/15551234567?url=<?php echo rawurlencode( esc_url( $product_url ) ); ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo rawurlencode( wp_strip_all_tags( $product_title ) ); ?>" target="_blank" aria-label="<?php esc_attr_e( 'Share on whatsapp', 'ocean-product-sharing' ); ?>" onclick="ops_onClick( this.href );return false;">
			<span class="screen-reader-text"><?php echo esc_attr__( 'Opens in a new window', 'ocean-product-sharing' ); ?></span>
			<span class="ops-icon-wrap">
			<svg viewBox="0 0 16 16" xmlns="https://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M11.665 9.588c-.2-.1-1.177-.578-1.36-.644-.182-.067-.315-.1-.448.1-.132.197-.514.643-.63.775-.116.13-.232.14-.43.05-.2-.1-.842-.31-1.602-.99-.592-.53-.99-1.18-1.107-1.38-.116-.2-.013-.31.087-.41.09-.09.2-.23.3-.35.098-.12.13-.2.198-.33.066-.14.033-.25-.017-.35-.05-.1-.448-1.08-.614-1.47-.16-.39-.325-.34-.448-.34-.115-.01-.248-.01-.38-.01-.134 0-.35.05-.532.24-.182.2-.696.68-.696 1.65s.713 1.91.812 2.05c.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/></svg>
			</span>
			<div class="product-share-text" aria-hidden="true"><?php esc_html_e( 'Share This Product', 'ocean-product-sharing' ); ?></div>
		</a>
	</li>

	<?php
}

If you are facing issues I would really recommend using a different social plugin, than risking manual coding.

if i want to share it in my group.what message i write in place of whatsaap number(15551234567).Kindly help . it will be helpful for me to share a code for it.Thaks in advace.@abhikr781

@abhikr781 Thank you for that!
However, I’ve done exactly what you wrote in my child theme, but it won’t show WhatsApp at the product sharing.
Any other suggestions?

Thanks

• This reply was modified 2 years, 5 months ago by liorgefen.

Hello,

Can you please share a complete snapshot of the code where you have added this?

ANd you have edited the template by following the path in the doc? right?
https://docs.oceanwp.org/article/306-add-remove-edit-the-social-product-sharing-links

Hi.
Thanks, again.

Yes, I have done everything in the OceanWP article before hand.
The path of the php file is:
/wp-content/themes/oceanwp-child/templates/extra/product-share.php

And the code was added between the Twitter and the Facebook line (lines 49-64), and it looks like this:

// Whatsapp
            if ( 'whatsapp' == $site ) { ?>

                <li class="whatsapp">
                    <a href="https://wa.me/?url=<?php echo rawurlencode( esc_url( $product_url ) ); ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo rawurlencode( wp_strip_all_tags( $product_title ) ); ?>" target="_blank" aria-label="<?php esc_attr_e( 'Share on whatsapp', 'ocean-product-sharing' ); ?>" onclick="ops_onClick( this.href );return false;">
                        <span class="screen-reader-text"><?php echo esc_attr__( 'Opens in a new window', 'ocean-product-sharing' ); ?></span>
                        <span class="ops-icon-wrap">
                        	<svg viewBox="0 0 16 16" xmlns="https://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon">
                              	<path class="svg-icon-path" d="M11.665 9.588c-.2-.1-1.177-.578-1.36-.644-.182-.067-.315-.1-.448.1-.132.197-.514.643-.63.775-.116.13-.232.14-.43.05-.2-.1-.842-.31-1.602-.99-.592-.53-.99-1.18-1.107-1.38-.116-.2-.013-.31.087-.41.09-.09.2-.23.3-.35.098-.12.13-.2.198-.33.066-.14.033-.25-.017-.35-.05-.1-.448-1.08-.614-1.47-.16-.39-.325-.34-.448-.34-.115-.01-.248-.01-.38-.01-.134 0-.35.05-.532.24-.182.2-.696.68-.696 1.65s.713 1.91.812 2.05c.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/>
                          	</svg>
                        </span>
                        <div class="product-share-text" aria-hidden="true"><?php esc_html_e( 'Share on WhatsApp', 'ocean-product-sharing' ); ?></div>
                    </a>
                </li>

                <?php }

Any thoughts?