Support » Plugin: Ocean Product Sharing » Product Sharing on the product detail page with WhatsApp

  • Resolved vkk2055

    (@vkk2055)


    I want to show product details on WhatsApp in the ocean wp theme. but unable to do so. Kindly give me code to implement or solution to this problem.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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

    Thread Starter vkk2055

    (@vkk2055)

    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="http://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.

    Thread Starter vkk2055

    (@vkk2055)

    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

    liorgefen

    (@liorgefen)

    @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 4 months ago by liorgefen.
    Abhishek

    (@abhikr781)

    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

    liorgefen

    (@liorgefen)

    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="http://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?

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.