Moving Social Network sharing icons on product pages

[consciouscrafties]

Hi Harry,

Hope you’re well.

Is is possible to move the social sharing buttons on product pages to be in a more prominent position, for example under the Add To Basket section?

Customers have mentioned they don’t see the sharing buttons as you have to scroll below the page fold before they appear.

Also is it possible to add the words ‘Sharing is caring:’ above the buttons?

See attached screenshot.

Many thanks for your help,

Karen 🙂

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.jas-wc-single .social-share .jas-social {
	position: relative;
	margin-top: 10px;
}
.jas-wc-single .social-share .jas-social::before {
	position: absolute;
	content: 'Sharing is caring:';
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 600;
	color: #222;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thanks Harry, that added the ‘Sharing is caring’ wording 🙂 however it’s still in the same place as before – rather than under the Add to Basket section (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please add below code to claue-child > functions.php

remove_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 50 );
add_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 30 );

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thanks Harry,

It’s decided it wants to display in both places lol (see screenshot)

Also how can I align both the ‘sharing is caring’ and the social sharing buttons to the left to align with the other items on the page eg ‘Ships From”

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Actually would it be possible to have ‘Sharing is caring’ and the social media icons next to it on the same line?

I think they would still fit nicely on mobiles.

Many thanks for your help 🙂

[Harry]

Hi Karen,

Please edit code to

.jas-wc-single .social-share .jas-social {
	position: relative;
	margin-top: 30px;
	padding-left: 160px;
}
.jas-wc-single .social-share .jas-social::before {
	position: absolute;
	content: 'Sharing is caring:';
	top: -3px;
	left: 0;
	transform: 0;
	font-size: 16px;
	font-weight: 600;
	color: #222;
}
.jas-social a {
	margin: 0 12px 0 0;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thank you so much thats loads better 🙂

Could I ask for some final things to make it perfect?

1. Is it possible to remove white space between ‘Sharing is caring’ and social sharing icons
2. Is it possible to reduce white vertical space between sharing is caring and ‘Ships to’
3. Is it possible to move the duplicate sharing to beneath the product description if possible

(see screenshot)

Many thanks for all your help it really is appreciated 🙂

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please add below code

.jas-wc-single .social-share .jas-social {
	text-align: left;
}
.btn-atc.atc-slide {
	margin-bottom: 0 !important;
}

Sorry it can’t show sharing to product description.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thanks Harry that looks beautiful now 🙂

If we can’t move the duplicate ‘sharing is caring’ to under the product description or bottom of page, is it possible to remove the duplicate and just keep the sharing is caring under the Add to Basket section? not sure why it’s appearing twice, that happened after adding the code to functions.php if I remember rightly.

Many thanks,

Karen

[Harry]

Hi Karen,

Please check the code you add in functions.php in claue-child and change to

remove_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 50 );
add_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 30 );

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Hi isn’t that exactly the same piece of code as before?

I copied and pasted again and have attached a screenshot of functions.php so you can see I’ve done it correctly

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please change code to

add_action( 'wp_head', 'change_socials_position' );
function change_socials_position(){
    remove_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 50 );
    add_action( 'woocommerce_single_product_summary', 'jas_claue_wc_single_social_share', 30 );
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Yay it that worked perfectly thanks ever so much Harry! 🙂

[Author]

Posts