Position Genesis Simple Share Icons in WooCommerce Products and Shop Page

By default when using Genesis Simple Share icons in WooCommerce products, the placement of these icons are not great.

genesis-simple-share-position

If you where to position the icons above or below the content in the Settings of Genesis Simple Share for WooCommerce Products, this is where they would end up…

woocommerce-product-simple-share

In a regular WordPress post the placement is fine it’s the product where it’s not so hot.

To get these icons closer and in the actual product summary you need to use some WooCommerce hooks – when using hooks to position them you need to change a setting in the plugin to avoid having duplicate icons – select the setting “Select display position to enable icons”.

genesis-simple-share-enable-display-via-hooks

Hook in Genesis Simple Share with WooCommerce Actions

Now we can hook in the simple sharing icons with WooCommerce hooks, which there are many. In your functions.php you can add…

<?php //<~ don't add me in
//* Reposition the Genesis Simple Share buttons in WooCommerce Producrs
add_action( 'woocommerce_single_product_summary', 'wpb_reposition_simple_share_product', 30 );//adjust priority number for output order
function wpb_reposition_simple_share_product() {
global $Genesis_Simple_Share;
echo genesis_share_icon_output( 'product', $Genesis_Simple_Share->icons ); //output the default icons as set in the plugin settings - and the first parameter 'product' forms the CSS name
}
view raw simple-woohooks.php hosted with ❤ by GitHub
custom-place-social-media-icons

Place the icons just below the add to cart button

The woocommerce_single_product_summary hook is a decent one to use as you can adjust the priority number to change the position of the output, for example changing the number to ‘1’ will output the icons above the title.

custom-place-social-media-icons-top

Place icons higher than title with a priority of 1

Position the Simple Share Icons for Regular Posts

By doing this process, we now also have to hook in the Simple Share Icons for generic posts too, this time using the Genesis hooks.

<?php //<~ don't add me in
//* Reposition the Genesis Simple Share buttons
add_action( 'genesis_entry_footer', 'wpb_reposition_simple_share_post', 5 );
function wpb_reposition_simple_share_post() {
global $Genesis_Simple_Share;
echo genesis_share_icon_output( 'post', $Genesis_Simple_Share->icons );
}

This is similar code for the products, apart from now we are targetting posts with a Genesis hook

simple-share-posts

Adds the Simple Share icons just above the post meta

Adding the Simple Share Icons to WooCommerce Archive/Shop Pages

Finally you may also want to add the simple share icons to the shop or archive pages in WooCommerce

<?php //<~ don't add me in
add_action( 'woocommerce_after_shop_loop_item', 'wpb_reposition_simple_share_archive');
function wpb_reposition_simple_share_archive() {
global $Genesis_Simple_Share;
echo genesis_share_icon_output( 'product', $Genesis_Simple_Share->icons );
}
simple-share-shop-archive

Adding Simple Share Icons to Shop Archive Page

So here the woocommerce_after_shop_loop_item hook is used to position and displays the icons below the add to cart button, you just need to add some CSS for the spacing.

Some more info on Genesis Simple Shares and how you can selectively output certain share icons other than the default set.

3 Comments

  1. Tayshiro on September 23, 2016 at 8:36 pm

    Thanks! =)

  2. Amber @ Au Coeur Design on November 1, 2015 at 3:38 pm

    This is great, thanks!

  3. Patrick Fortino on October 31, 2015 at 9:34 pm

    Thanks a LOT for this detailed explanation. There have been a few times when I wondered about moving the simple social icons in a product page. Now I can.

Leave a Comment