Home › Forums › WoodMart support forum › How can I have variations label above the “Select” field instead of the left

How can I have variations label above the “Select” field instead of the left

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 4, 2022 at 3:44 pm #373030

    malcolmff
    Participant

    My site has the label for the variation on the left and the select on the right (as in the screenshot attached) for desktop. How can I have the label on top and the Select underneath like it looks for mobile.

    Attachments:
    You must be logged in to view attached files.
    May 5, 2022 at 12:05 pm #373272

    Luke Nielsen
    Keymaster

    Hello,

    I have prepared a custom CSS code for moving labels above the variation fields. Please, paste it to the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

    .single-product table.extra-options tr,
.single-product table.variations tr {
    display: grid;
}

    https://gyazo.com/191f65d6ce2627ef2d87f6b844e2a520

    If you want to add the “Cabinet Size” label additional indentation, please use this one custom also.

    .single-product table.variations .cell label {
    padding-bottom: 12px;
}

    https://gyazo.com/6b23e348468b7705a2d06deeb3f72988

    Please feel welcome to reach out to me with any questions you may have and I would be more than happy to help.

    Kind Regards

    • This reply was modified 2 years, 10 months ago by Luke Nielsen.
    • This reply was modified 2 years, 10 months ago by Luke Nielsen.
    • This reply was modified 2 years, 10 months ago by Luke Nielsen.
    May 5, 2022 at 1:39 pm #373313

    malcolmff
    Participant

    that’s great, thanks! Can you help us with showing it another way.

    How can we make the Cabinet Select the same format as the other Select’s?

    Attachments:
    You must be logged in to view attached files.
    May 5, 2022 at 1:53 pm #373320

    malcolmff
    Participant

    Also, I there anyway it could look like this Select? (with the label in the same select as the select values?)

    Attachments:
    You must be logged in to view attached files.
    May 5, 2022 at 4:26 pm #373401

    Luke Nielsen
    Keymaster

    Hello,

    1. The below code will align the select with others, you should enter it to the “Custom CSS for desktop” area.

    .single-product table.variations .label {
    width: 32%;
}

    2. Unfortunately, there is currently no way to do that. We appreciate you taking the time to let us know what you’re looking for.

    Have a wonderful day!

    Kind Regards

    May 6, 2022 at 2:51 am #373516

    malcolmff
    Participant

    works! thank you

    May 6, 2022 at 9:12 am #373543

    Luke Nielsen
    Keymaster

    Hello,

    Please feel welcome to reach out to me with any questions you may have and I would be more than happy to help.

    Have a good day!

    Kind Regards

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘How can I have variations label above the “Select” field instead of the left’ is closed to new replies.