Change WooCommerce Social Share Design

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 8 replies, 3 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 9 posts - 1 through 9 (of 9 total)

Back to forum

Posted in: Cardinal

March 9, 2015 at 9:12 pm #156092

SmallDogCreative

Member

Post count: 55

Team SwiftIdeas:

Thanks for your ongoing contribution and support. Is there a way to change the design/layout of the Social Share feature on WooCommerce Product Pages?

Ideally, I want to use Cardinal’s Social Media Icons shown here: https://www.dropbox.com/s/jdo8nf27n6gla7n/Cardinal-SocialShareIcons.png?dl=0

in place of the Social Share function shown here: https://www.dropbox.com/s/yxi2cro7pnr7enq/WooCommerceProductPageSocialShare-CURRENT.png?dl=0

so that I end up with the Share Options in WooCommerce’s Product Options like this: https://www.dropbox.com/s/sb5cvf78wi8nohd/WooCommerceProductPageSocialShare-DESIRED.png?dl=0

Thank again.

March 10, 2015 at 6:56 am #156157

Mohammad – SUPPORT

Moderator

Post count: 27441

Hi,
Please provide me website url to find any possible solution.
Thanks
Mohammad

March 10, 2015 at 6:40 pm #156304

SmallDogCreative

Member

Post count: 55

This reply has been marked as private.

March 11, 2015 at 2:08 am #156363

Mohammad – SUPPORT

Moderator

Post count: 27441

Hi,
Please paste this code at functions.php of child theme.

<?php
function sf_product_share() {
			global $post;
			$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, '' );
		?>
			<div class="product-share clearfix">
				<span><?php _e("Share", "swiftframework"); ?></span>
				<ul>
				    <li><a href="mailto:?subject=<?php the_title(); ?>&body=<?php echo strip_tags(apply_filters( 'woocommerce_short_description', $post->post_excerpt )); ?> <?php the_permalink(); ?>" class="product_share_email"><i class="fa-envelope"></i></a></li>
				    <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
				      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_facebook"><i class="fa-facebook"></i></a></li>
				    <li><a href="https://twitter.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
				      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_twitter"><i class="fa-twitter"></i></a></li>   
				    <li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
				      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa-google-plus"></i></a></li>
				    <li><a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $src[0]; ?>&description=<?php the_title(); ?>" onclick="javascript:window.open(this.href,
				      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_pinterest"><i class="fa-pinterest"></i></a></li>
				</ul>  
			</div> 
		<?php } ?>

Thanks
Mohammad

March 11, 2015 at 3:38 am #156371

SmallDogCreative

Member

Post count: 55

You are awesome! Unfortunately, it’s not working (yet). The old share went away, but the new share does not yet appear. Did I miss something?

As instructed, I inserted the following snippet into the child-theme functions.php:

<?php
function sf_product_share() {
            global $post;
            $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, '' );
        ?>
            <div class="product-share clearfix">
                <span><?php _e("Share", "swiftframework"); ?></span>
                <ul>
                    <li><a href="mailto:?subject=<?php the_title(); ?>&body=<?php echo strip_tags(apply_filters( 'woocommerce_short_description', $post->post_excerpt )); ?> <?php the_permalink(); ?>" class="product_share_email"><i class="fa-envelope"></i></a></li>
                    <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
                      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_facebook"><i class="fa-facebook"></i></a></li>
                    <li><a href="https://twitter.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
                      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_twitter"><i class="fa-twitter"></i></a></li>   
                    <li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
                      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa-google-plus"></i></a></li>
                    <li><a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $src[0]; ?>&description=<?php the_title(); ?>" onclick="javascript:window.open(this.href,
                      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_pinterest"><i class="fa-pinterest"></i></a></li>
                </ul>  
            </div> 
        <?php } ?>
?>

Now, I either have to remove the leading <?php tag or place the new snippet after the closing ?> tag.

Anything else?

March 11, 2015 at 3:50 am #156372

SmallDogCreative

Member

Post count: 55

Sorry, I added one too many ?> to the snippet above, but that was not in the functions.php – still doesn’t work.

March 11, 2015 at 7:53 am #156406

Mohammad – SUPPORT

Moderator

Post count: 27441

hi,
I have resolved the issue so please check. I have used this custom css code:-

.share-links {
	border-bottom: 1px solid #e4e4e4;	
	border-top: 0px solid #e4e4e4;
	padding: 12px 0;
	margin-top: -10px;width:100% !important;
}
.share-links span {
	float: left;
	font-weight: bold;
font-size: 1.5em;
}
.share-links ul {
	float: right;
	margin-bottom: 0;
	margin-right: -10px;
	list-style: none;
}
.share-links ul li {
	float: left;
	margin-left: 5px;
}
.share-links ul li a {
	padding: 10px;
}

.single-product .article-share{
    display:none !important;
}

PHP CODE at functions.php of child theme:-

<?php
remove_action( 'woocommerce_single_product_summary', 'sf_product_share', 100);
add_action( 'woocommerce_single_product_summary', 'sf_product_share_new', 55);
function sf_product_share_new() {
  global $post;
  $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, '' );
  ?>
  <div class="product-share share-links clearfix">
    <span><?php _e("Share", "swiftframework"); ?></span>
    <ul>
      <li><a href="mailto:?subject=<?php the_title(); ?>&body=<?php echo strip_tags(apply_filters( 'woocommerce_short_description', $post->post_excerpt )); ?> <?php the_permalink(); ?>" class="product_share_email"><i class="fa-envelope"></i></a></li>
      <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
        '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_facebook"><i class="fa-facebook"></i></a></li>
      <li><a href="https://twitter.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
        '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_twitter"><i class="fa-twitter"></i></a></li>   
      <li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
        '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa-google-plus"></i></a></li>
      <li><a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $src[0]; ?>&description=<?php the_title(); ?>" onclick="javascript:window.open(this.href,
        '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="product_share_pinterest"><i class="fa-pinterest"></i></a></li>
    </ul>  
  </div> 
  <?php } ?>

Thanks
Mohammad

March 11, 2015 at 2:18 pm #156558

SmallDogCreative

Member

Post count: 55

Golden! Absolutely golden! You sir, are a master!

Thank you!

March 11, 2015 at 2:23 pm #156560

Kyle – SUPPORT

Moderator

Post count: 35880

Thanks Mohammad

– Kyle

Back to forum

Posted in: Cardinal

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

Support Request

Support Policy

Privacy Policy