Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #479297

    Hello,

    I was wondering if there is a way to change the size of the input fields on the single product pages of variable products. As you can see in the attached image, the size of these boxes (marked yellow) are very large. This causes that the text before it drops on two lines, which I want to prevent from happening. Do you know a way to do so, because I tried some things that did not work.

    Image2

    In addition, is it possible to show the at to cart button before a customer field out the fields?
    Now the customer has to fill out all the fields before the add to cart button and quantity field shows.
    Is there a default way of showing the add to cart button immediately?

    Kind regards,

    Rick Lodder

    #479368

    Hi RickLodder!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top .variations td.label {
        width: 25%;
    }

    Best regards,
    Yigit

    #479938

    Yigit,

    Thank you very much, it worked perfectly!

    Do you also have a solution for my second question regarding the add to cart button that only shows when all the fields are filled out. Is there a way to show this button when the page is loaded and the customer did not fill out anything?

    Kind regards,

    Rick Lodder

    #480254

    Hey Rick!

    You are going to need to find a plugin or hire a freelance developer for such customization.

    Cheers!
    Yigit

    #619465

    Can we have the Select variations fields set next to each other as well? like instead of one field for every line, make it 2 fields… I have tried tweaking its css but I’m having hard time because it is a table.

    Appreciate your help in advance

    #619994

    Hey!


    @latif
    Please start a new thread and attach a link to your page and a screenshot showing the changes you would like to make.

    Best regards,
    Yigit

    #788855

    Hello,

    I would like to bring the same topic up. I have added the above custom CSS to Quick CSS in Enfold -> General Styling -> Quick CSS but it has no effect on the input field for the variable products: the width of the td is still 100%.

    Is there any update on the topic?

    Thank you!

    #788858

    Hello, trial&error is back.

    Actually what I wanted I solved with following quick CSS:

    #top .variations  {
        width: 25%;
    }

    in my case I will use variation only with one attribute and I found the full width table too big and not so good looking. right now the width of the table for selecting the variable product is only 25%, similar in size with the number of items and the add to cart which are below… a bit better looking from my perspective.

    cheers!

    • This reply was modified 7 years, 7 months ago by vladbejenaru.
    #789035

    Hi @vladbejenaru,

    Great, glad you found a solution and thanks for sharing, much appreciated :-)

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.