variation size not clickable.

https://slashinbrackets.com/product/bond/?attribute_pa_color=adzuki&attribute_pa_size-in-eu=40

In this product the size guide is enabled. So sizes are not clickable. While in every other product, size are clickable. In mobile and in desktop both.

Please help.

Kindly help

Hello,

You have done a lot of customization with custom css in the layout that is why it is not clickable. Try to remove the custom css from Appearance > Customize > Additional CSS and check how it works.

Best Regards,

I’m past, you have helped us identify which one. At least help with same. Only requesting this because I’ve 14 license. Please help. This one, I’m not able to resolve.

You can either tell me line number of the CSS conflicting. Please. This is very very crucial.

I hope you’ll help.

I promise I’ll buy 4 more license next month.

Hello,

I have modified the code on your site on line 756 and it is working fine. Please check back your site and check the issue. If you have any questions feel free to contact us.

Best Regards,

Hi, I just check the same on samsung fold 6, nothing 2, oneplus 12 but it is not working. We have tried on different network and browsers too.

Also the attributes have moved right. How can they be left aligned to short description or price on the page.

The video of the same:
https://drive.google.com/file/d/1LSZ7Rl6888zeo9F1l7RszWXH5BC9kaMs/view?usp=drivesdk

https://drive.google.com/file/d/1VR1wdi_Oe4c0RPo1LlfLl1y0ulIRcadL/view?usp=sharing

this is the laptop recording. Attributes have moved to right. also, not clickable.

We know that you have always helped and this launch is on Monday, so if you could help me fix this, it would really be appreciated.

This is gonna one off the most luxurious brands of shoes in India, taking our theme to countless people. So really looking forward for urgent help.

1) We have attributes left aligned
2) with size guide, we need to be able to click.

Hello,

I have investigated the issue on your site and It seems the custom CSS is causing the variation (size) options to stop being clickable.

Please remove or comment out the following lines from Appearance > Customize > Additional CSS:

.single-product .variations label { display: none !important; }
.wd-attr-selected { display: none !important; }
@media (min-width: 1025px) {
  .text-center table.variations tbody,
  .text-center table.variations tr,
  .text-right table.variations tbody,
  .text-right table.variations tr {
    right: 43px;
    position: relative;
  }
}

After removing them, your size options will become clickable again on both desktop and mobile.

Best Regards,

Hi, big thanks for the quick response.

1. Desktop is now clickable after removing the suggested CSS, however on Android mobile devices the variation swatches are still not clickable.
– We cleared hosting cache, browser cache, and we are not using any cache plugin. Here are two screen recordings for reference:
– https://drive.google.com/file/d/1bZuP8KeksNiNaVypbY-KXCywgnf2aX8F/view?usp=sharing
– https://drive.google.com/file/d/1RjEmxuTEnZxDbLie7UbSu2NpCd2JLt9Q/view?usp=sharing

2. Regarding this CSS:

.single-product .variations label { display: none !important; }

This did not affect the click behaviour in any way (as also visible in the recordings). This is only to hide the text of variation label for a cleaner product layout. If this is problematic, please suggest an alternate way to hide just the text label without affecting functionality.

3. On both mobile and desktop, the variation swatches are not left-aligned to the product info text block. This misalignment breaks the premium layout experience, especially for a luxury brand site. Requesting guidance on how to left-align them properly (screenshot attached for clarity).

Looking forward to your solution. Thanks again for the assistance so far!

Attachments:

You must be logged in to view attached files.

I have worked 16 hours non stop on this. today is the launch. I found the css that was causing issue clicking the attributes.

table.variations .cell {
	padding: 0 0 10px 0;}
table.variations {
	margin: 10px 0px 20px 0px !important;}

I have removed the above CSS. Now can you now help me with my product page?

1) The attributes are not left aligned to text.
2) The size guide is overlapping the attributes
3) The selected attributes, need to be hidden.

Please help. Urgent and Important and today is my website launch.

Best,
Prashant
Co-founder

Attachments:

You must be logged in to view attached files.

Hello,

Try to remove this custom CSS code, then the swatches will be shown in the left.

@media (min-width: 1025px) {
    .text-center .wd-label-side-lg .cell, .text-right .wd-label-side-lg .cell, .wd-label-side-lg.wd-swatches-name .cell {
        display:flex;
left:85px;
position: relative;
    }
}

For the size guide button remove all the custom css code related to the size guide and adjust the margin and padding from the layouts > Navigate to Layouts > Edit single product page.

Best Regards,

– For the size guide button remove all the custom css code related to the size guide and adjust the margin and padding from the layouts > Navigate to Layouts > Edit single product page. – I have done this (screenshot attached)

– The selected attributes, need to be hidden. kindly guide on this as well. I have used the below code but it is not working. Please guide.

.wd-attr-selected {
display:none !important;
}

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share a highlighted screenshot which selected attribute you want to hide?

Best Regards,

I’ve circled The selected attribute. When I select a colour or a size, it shows next to attribute. That selected attribute has to completely hide.

Attachments:

You must be logged in to view attached files.

I was able to remove them from options of theme.

Keeping it under observation.

It is still visible in mobile. How to remove that.

https://ibb.co/pvQnMG66

Hello,

The “Show selected option name on desktop and tablet” option in Theme Settings will hide the name in the desktop and tablet.

For the mobile, You need to add the below code in the mobile css area. Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile only.

.single-product table.variations .label span {
    display: none;
}

Best Regards,

https://drive.google.com/file/d/1p_qyhAS-J7U0vZydJUZs7qI1WpXoOF3T/view?usp=sharing

The variations on mobile load with 20px left padding. on refresh it works file. How to resollve this glitch? (video attached)

Hello,

Please try to update the new version of the theme “WOODMART WordPress NEW: 8.3.3 RELEASED”, update the required plugin, and check the issue: https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, clear your site cache/ server cache, and check if the problem persists.

Best Regards,

I have updated the theme and all plugins. I have disabled all plugins. The issue still persists.

Hello,

Now check back your site and check the issue.

See Video for clarification: https://streamable.com/pqxyiy

Best Regards,

https://drive.google.com/file/d/1EyzI0QZWT_cnAGosihJJlPV4DYJHjfE4/view?usp=sharing

Another video that the problem still exists. on laptop and mobile both.

Hello,

I have again checked your site and it is working fine. Please clear your site cache, browser cache, and check the site in incognito mode / another browser to confirm if the issue persists.

Best Regards,

Works fine in incognito. Allow me to get back. Keeping this in observation.

Hello,

Sure, take your time. Please let us know once you’ve checked further — we’ll keep this issue under observation in the meantime.

Best Regards,

https://drive.google.com/file/d/1lkUnFeTI8EVgBSp7NpDAYc7O3lrhugcO/view?usp=sharing

Still an issue. Please check.

Hello,

I have again checked your site and have not seen the issue.

See this video for clarification: https://streamable.com/ihvepj

Please check the site in another device or browser to confirm if the issue persists.

Best Regards,

Resolved,

Hello,

Glad to know the issue has been resolved!

I’ll go ahead and mark this topic as resolved. If you need any further assistance, feel free to open a new topic anytime.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts