Moving the position of swatch title

Hi, there’s a title for variation option which is very useful however it can not be seen when the color is too dark. Can you send us a code or any other trick so we can move it above the swatch so it can be viewed? Please check the attached . Thanks

Attachments:

You must be logged in to view attached files.

Hello,

I am checking your site and swatches have the title above https://gyazo.com/7eadfb061b1fd930dd7c9dd7e0b5ee6f

Please clarify or provide product URL and your site admin access to the private area.

Best Regards

ok, a quick video explaining the request + access and Product URL in the Private content. Thanks

Hello,

All the attributes have the title in the tooltip. This only just on the color. Please deactivate the plugins not related to the theme and check. It is not possible to correct with CSS.

Best Regards

We can actually see those hover tooltips there and we have no plug ins blocking them. The issue is that the hover thing only applies to desktop as you know…On mobile, there’s nothing that visitor can tell what that option is called.
The only way is just label, which woodmart theme has already though on the wrong place.
As explained, when the color is dark and you have the swatch turned on, option title will be covered and not readable…Just to reconfirm we have no plugins there.. Hope it’s more clear now what mean?
In other words, the question is, How can a mobile user know what the option is called if the swatch image/color option is on?

Hello,

Try to add the following code snippet to the Custom JS area in Theme Settings to display tooltips on the mobile devices.

if (jQuery(window).width() <= 1024) {
    jQuery('.single-product-page .woodmart-swatch').each(function () {
        jQuery(this).find('.woodmart-tooltip-label').remove();
        jQuery(this).addClass('woodmart-tltp').prepend('<span class="woodmart-tooltip-label">' + jQuery(this).text() + '</span>');
        jQuery(this).find('.woodmart-tooltip-label').trigger('mouseover');
			
			var $label = jQuery(this).find('.woodmart-tooltip-label'),
            width = $label.outerWidth();
            
            if (jQuery('body').hasClass('rtl')) {
            $label.css({
            	marginRight: - parseInt(width / 2)
            })
        } else {
            $label.css({
            	marginLeft: - parseInt(width / 2)
            })
        }
    });
}

And than add the following code snippet to the Global Custom CSS area in Theme Settings.

@media (max-width: 1024px) {

body .woodmart-swatch .woodmart-tooltip-label {
	display: block !important;
}

body .woodmart-swatch.active-swatch .woodmart-tooltip-label {
 	opacity: 1;
  visibility: visible;
}

body .woodmart-swatch.active-swatch:hover .woodmart-tooltip-label {
	animation: none;
}
	
}

Regards

Thanks but it doesn’t work ( first 6 lines gives error) https://share.getcloudapp.com/04u9ZWP0

Hi,

We have checked your screenshot and found that you have pasted our whole reply with code and text to the code area. Try to correct it and paste only JS code to JS section and CSS code to CSS section as we described before.

Regards

Ye sorry for the confusion but we did it correctly after ( JS and CSS) and the issue is still there…there’s still errors in JS section and nothing happens on the front end please check this : https://share.getcloudapp.com/04u9ZWOx

You need to copy the code from the topic, not from the email.

Still no luck. Might take you a quick moment if you check in the admin yourself. ( you already have access)

Attachments:

You must be logged in to view attached files.

Having another look at it, I guess you have not moved the label but fixed the tooltip…is that what you meant to do? Cause tooltop now covers the Option title.

Hi,

We have checked your site and found that code is working correctly. Please check the video. (https://gyazo.com/04be8fd21a1fe8c91eded6204fd662d8). As we mentioned before (https://xtemos.com/forums/topic/moving-the-position-of-swatch-title/#post-130772) the following code is working on mobile devices (1024px screen width and lower).

Regards

There’s a little issue there… please check : https://www.dropbox.com/s/d1dck188zp8ln2h/2019-07-04_14-48-49.mp4?dl=0

Hi,

The solution that you suggested cannot be done via CSS because of the swatches HTML structure. As an alternative, we can provide you with CSS code that will remove background from current swatches tooltips (https://prnt.sc/oaj7uo).

Try to add the following code snippet to the Custom CSS area in Theme Settings.

@media (max-width: 1024px) {
	
	body .woodmart-swatch .woodmart-tooltip-label {
		height: auto;
		line-height: 1;
		margin-bottom: 5px;
		background-color: transparent;
		color: #000;
		font-size: 10px;
	}
	
	body .woodmart-swatch .woodmart-tooltip-label:before {
		display: none;
	}
}

Regards

That’s actually not a bad solution. How can we make that happen for desktop too?

Unfortunately following CSS can be applied only for mobile swatches tooltips.

Regards

[Author]

Posts