WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
WooCommerce social buttons? (12 posts)

  1. Baumr
    Member
    Posted 1 year ago #

    I am running a WooCommerce store with a WooTheme and would like to add a few sharing buttons because with the short-code, it is hard to put them side-by-side (height of 20 pixels) without any of the counters or special features. (I was unable to hide the Twitter counter, for example.)

    Potential solution:

    I found that JetPack allows for these sharing functions all-in-one, but it needs to be connected to a WordPress.com account — what is the downside of doing so? Is it overkill for just this one function? Doesn't every added plug-in slow down website loading for visitors?

    I essentially want a simple row of share buttons on every product page:

    | Like | Tweet | +1 | Pin It |

    Without any added bells and whistles.

    If not JetPack, do you know any simple solutions?

    Thank you in advance.

    http://wordpress.org/extend/plugins/woocommerce/

  2. bheadrick
    Member
    Posted 1 year ago #

    I've seen a couple sharing plugin specifically for Woocommerce, but not one that has support for all the networks.
    Pinterest for woocommerce

    Facebook for Woocommerce

    There's also facebook/twitter share buttons which isn't specifically for woocommerce

    Jetpack seems to have support for all the networks, and it seems to work pretty well with custom post types. I haven't tried using it with woocommerce,but it seems like a good option.

    Might want to do a speed test on pingdom to see if jetpack adversely affects your load time - I haven't tested it with woocommerce personally, but I've used it on other sites.

  3. Baumr
    Member
    Posted 1 year ago #

    Thanks, good call on speed!

    I saw those two plugins, but the thing is — they're not consolidated and the buttons appear in two different places (one near price, the other below category, for example). Then adding the Twitter and Google+ manually will add even more disparity as they'll have to go in the Description or Short Description section.

    It's all very messy.

    I'm really sad that the shortcode doens't work and align well. Also, there's no Like button without trailing text or counters. Plus, it's about 5 pixels higher than all the other ones, so looks very odd.

    There's potential... that's why I'm interested in the short-code. If I throw something good together, I will report back, but also interested to hear what other people have used :)

  4. bheadrick
    Member
    Posted 1 year ago #

    probably best bet is to hard code something and hook it the sharing section
    so you'd write a function in your functions.php something like

    add_action('woocommerce_share','wooshare');
    function wooshare(){
    echo'
    <div class="fb-like" data-href="'.get_permalink().'" data-layout="box_count" data-send="false" data-width="100" data-show-faces="true" style="display:inline"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="bryanheadrick">Tweet</a>
    <g:plusone size="tall"></g:plusone>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <a href="http://pinterest.com/pin/create/button/?url='. urlencode(get_permalink()).'&media='.urlencode(wp_get_attachment_url( get_post_thumbnail_id() )).'&description='.apply_filters( 'woocommerce_short_description', $post->post_excerpt ).'" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>';?>
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=281787978603249";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <?php
    }
  5. Baumr
    Member
    Posted 1 year ago #

    Oh wow, thanks!

    Do you mean for those two plugins, or for the WooCom short-code? And where's the "sharing section" you speak of?

  6. rawdolphe
    Member
    Posted 1 year ago #

    I am interested.

    There is also http://sharrre.com/ would be neat to have these working in WC.

  7. terrytsang
    Member
    Posted 1 year ago #

    Hi all, i have just launched the woocommerce social buttons extension that currently supported 6 social media (facebook, twitter, google+, pinterest, linkedin and stumbleupon)

    WooCommerce Social Buttons PRO

    Cheers!

  8. billbob69
    Member
    Posted 1 year ago #

    All you have to do is use Jetpack social share and choose to use it on Products, in settings. Much cheaper than @terrytsang's $19. See it working here http://bestblender.co.uk/product/yoga-instructor-certification-program-by-anmol-mehta/

  9. finkdb
    Member
    Posted 1 year ago #

    In order to accomplish this I used the plugin Social Sharing Toolkit. I modified the Shortcode tab to show the buttons I wanted. Then to display the social buttons on the individual product, I inserted the following code inside of the plugins/woocommerce/templates/content-single-product.php file.

    echo do_shortcode('[social_share/]');

    I inserted the code on Line 50, immediately under the do_action( 'woocommerce_single_product_summary' ); line.

    This solution is only good as long as it isn't overwritten during a plugin update. To avoid this, use a child Theme. Create a woocommerce folder under your child theme's main directory and copy the edited content-single-product.php file there.

  10. akalorik
    Member
    Posted 1 year ago #

    thanks to finkdb - your solution works great.

  11. clk87
    Member
    Posted 1 year ago #

    Many thanks finkdb!

  12. TobyMaritni
    Member
    Posted 1 year ago #

    finkdb had the answer that worked for me, too!
    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.