Size Guide Button Position

Hi Support

Please advise if there is a way to change the order of the items highlighted in the attached screenshot.

We would like to have it in the below order:

Size Guide, Compare them Add to Wishlist

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

Sorry, but there is no option in Theme Settings to set the order as you mentioned.

You can try adding the following Custom CSS in the Custom CSS for the Desktop area but it could disturb the layout of the other elements.

.sizeguide-btn-wrapp.wd-action-btn.wd-sizeguide-btn.wd-style-text {
	position: absolute;
	left: 10px;
}

.woodmart-compare-btn.product-compare-button.wd-action-btn.wd-compare-btn.wd-style-text {
	margin-left: 17%;
}

The above CSS will work for the desktop version. But you have to set the CSS for different devices like mobile, mobile landscape, tablet, etc.

You can set the CSS provided above for devices according to your needs and then can add in the Specific Custom CSS areas under Theme Settings >> Custom CSS. Otherwise, it requires Customizations.

Regard’s.
Xtemos Studios.

Hi There

Thank you for the CSS you provided in your last email. It worked as shown below.

https://outletstore.jhnet.co.za/shop/clothing/formal-shirts/mens-long-sleeve-phoenix-shirt/

However, when I check products that do not have a size guide assigned ie:

https://outletstore.jhnet.co.za/shop/headwear/caps-headwear/crosswind-peak/

– there is a space on the left.

Please advise how I can resolve that.

Thank you.

Hello,

You are Most Welcome.

Sorry as we tried to set the position for the button as you mentioned for the product page using CSS.

And the CSS will work for all the products and you cannot restrict the CSS to only the products which have size guides.

It requires customizations and this is beyond our limitations and support policy.

Regard’s.
Xtemos Studios.

[Author]

Posts