Woocommerce product thumbnails

Support
#1

Hey, I got your customization to product page via email couple months ago but now after woocommerce has been updated, the changes need to revised.

The thumbnails should be below the main image, not on top of it.

Summary

https://www.nutrolin.fi/tuote/nutrolin-iho-turkki/

#2

Hi,

To make it appear below the main image, you can add this in X > Launch > Options > Css

.single-product .flex-control-nav {
    position: static;
}

.single-product .flex-control-nav li {
    float: left;
}

Hope that helps

#3

Thanks, that helped.

Another thing, how can I add share buttons below the product thumbnails? something to functions.php and some CSS? we had that too over a year ago, but since X has been updated, we lost them.

#4

Hello There,

Thanks for writing in! To add share buttons below the product thumbnails, please add the following code in your child theme’s functions.php file

// Add entry share below the product thumbnails
// =============================================================================
add_action('woocommerce_single_product_summary', 'add_entryshare', 100);
function add_entryshare(){
	echo '<div class="mtm" style="clear: both;">';
	echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]');
	echo '</div>';
}
// =============================================================================

Hope this helps. Please let us know how it goes.

#5

Thank you for the code, it brought back the icons, but not below the product images, its under the product description. Please see the url again.

Also, can I get some code to remove all Hover effects, so that icons are just static.

#6

Hi There,

Please update the code to this:

// Add entry share below the product thumbnails
// =============================================================================
add_action('woocommerce_product_thumbnails', 'add_entryshare', 100);
function add_entryshare(){
	echo '<div class="mtm" style="clear: both;">';
	echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]');
	echo '</div>';
}
// =============================================================================

Hope it helps :slight_smile:

#7

No they are invisible or hidden somewhere.

  • The icons should be on the left, below thumbnails as they were before updates
  • The icons should not have any hover or other animation

Thanks!

#8

I have the same problem, only I don’t understand where you mean to put that code. I don’t even see a folder structure like that. Furthermore, if I am using a child theme, where would I put it? Create a folder structure like that above (X > Launch > Options > Css)? Thanks for clarifying.

#9

That goes CSS code to Custom CCS section in Customizer.

#10

Hi There,

You can Hover X on your Top Wordpress Admin Bar > Launch > Options > CSS

or Appereance > Customizer > Custom > CSS

Hope it helps

#11

My problem is still open. The social share icons are not visible at all after latest suggestions from your staff. See the url from the first post.

#12

Oh, so it just goes in your child css. I get it. Thank you very much. I do know how to edit that. It threw me when I saw x>launch>options>css :grinning: I thought they were describing some strange folder structure, but now I see it was instructions to get to your css file. Duh. Sorry for the bother.

#13

Hello @SirRahikkala,

Thanks for updating in! I’ve inspected your page: https://www.nutrolin.fi/tuote/nutrolin-iho-turkki/
I am not seeing any code or any indication that you added the code and that the share icons are just invisible. Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue?
To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

#14

Below are the details:

So to summarize, social icons were in line, below the product thumbnails, without any hover effects.

#15

Hello There,

Thanks for providing the information. Do you want something like this http://prntscr.com/fvkmdv?
If that is the case, please enable the suggested code in my previous reply and you also need this custom css to eliminate the hover effect.

body .x-entry-share .x-share,
body .x-entry-share .x-share:hover {
    background-color: transparent !important;
    color: #a0a0a0;
    width: 28px;
}

Hope this helps. Kindly let us know.

#16

Ok, I see you added that already to custom CSS and I added the code to functions.php from your reply here https://theme.co/apex/forum/t/woocommerce-product-thumbnails/1546/4?u=sirrahikkala

BUT that puts the icons below the description, not below the thumbnails. I want them exactly like your screenshot was =)

#17

Hello There,

I have made some adjustments and now the sharing icons are right below the product thumbnails. I used this code:

// Add entry share below the product thumbnails
// =============================================================================
add_action('woocommerce_before_single_product_summary', 'add_entryshare', 100);
function add_entryshare(){
	echo '<div class="mtm" style="clear: both;">';
	echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="false" email="true"]');
	echo '</div>';
}
// =============================================================================

Please check your site now:


Hope this helps.

#18

URGENT! As you see from your own screenshots, the icons are now where they belong but the product content is pushed down.

#19

Hi again,

Firstly replace the previous code to this:

// Add entry share below the product thumbnails
// =============================================================================
add_action('woocommerce_before_single_product_summary', 'add_entryshare', 100);
function add_entryshare(){
	echo '<div class="sharing-buttons mtm" style="clear: both;">';
	echo do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="false" email="true"]');
	echo '</div>';
}
// =============================================================================

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.sharing-buttons').appendTo(".woocommerce-page div.product .images");
});

And finally add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.woocommerce-page div.product .images .x-share-options {
    width: 100% !important;
}

This should fix everything. Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#20

Thank you Nable, we are almost there. The icons hover text is cut off, see attachment.