Home › Forums › WoodMart support forum › Style custom input form

Style custom input form

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 14, 2020 at 8:20 am #194864

    horny_fungus
    Participant

    Hi, I’ve just added custom input form via woocommerce_before_add_to_cart_button hook. Can you please help my to style it like regular variation attribute selection drop-down form.
    Here’s a pic to show what I want – https://prnt.sc/sgio10

    May 14, 2020 at 8:43 am #194879

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached. If we try and style it using Custom CSS then it would also affect the other drop downs as well because they are wrapper in the table element.

    If you still want the CSS then you can use the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

    To Remove the line bellow:

    table td {
border: none;
}

    To make the element wider:

    .label {
width: 100px;
}

    Best Regards.

    May 14, 2020 at 8:53 am #194884

    horny_fungus
    Participant

    Thanks. But can I assign a dedicated class to this form and style only it via this class? I tried this but the class was overwritten with some higher priority class.
    Also can you please explain how the row width is determined and why it is different in this cases?
    I don’t want to hardcode it like this width: 100px;, maybe it is possible to achieve the desired width styling this form the same way as variable product variations form?

    May 14, 2020 at 12:00 pm #194954

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry You cannot assign different classes to the table element used in the variation form.

    Unfortunately, We could not help you with this. Because the variations are coming from WooCommerce and our theme doesn’t influence it.

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

    Best Regards.

    May 14, 2020 at 12:19 pm #194958

    horny_fungus
    Participant

    As far as I understand those style elements I want to get rid off are coming not from variations style but from some parent element. When the same code is added via another hook it looks different.

    May 14, 2020 at 6:40 pm #195065

    horny_fungus
    Participant

    By the way WooCommerce default Storefront theme offers other style of drop-down where label and select fields are separate rows. So the element is affected by Woodmart at least to some degree.

    May 15, 2020 at 12:18 pm #195324

    Artem Temos
    Keymaster

    You can check the source code of that element with developers tools and take any classes you need. Note that you will need to have a similar HTML structure as well.
    Unfortunately, we don’t have a working solution for you since such additional customizations are out of our theme support scope.

    Kind Regards

    May 16, 2020 at 9:46 am #195485

    horny_fungus
    Participant

    OK, I was able to find proper styling myself.
    But is there any way to avoid width hardcoding using width: 100px; and instead give first TD element priority over second, so it is given width according to text length and second element is given remaining width.

    May 16, 2020 at 1:39 pm #195519

    Artem Temos
    Keymaster

    Try to replace width: 100px; with this rule white-space: nowrap;. It should fix the issue.

    May 16, 2020 at 1:52 pm #195521

    horny_fungus
    Participant

    Thanks a lot!!! That worked.

    May 16, 2020 at 8:23 pm #195579

    Artem Temos
    Keymaster

    You are welcome!

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

The topic ‘Style custom input form’ is closed to new replies.