Tagged: Single Product Pages, variable product, width, woocommerce
-
AuthorPosts
-
July 27, 2015 at 9:02 pm #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.
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
July 28, 2015 at 12:19 am #479368Hi RickLodder!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#top .variations td.label { width: 25%; }
Best regards,
YigitJuly 28, 2015 at 10:58 pm #479938Yigit,
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
July 29, 2015 at 2:53 pm #480254Hey Rick!
You are going to need to find a plugin or hire a freelance developer for such customization.
Cheers!
YigitApril 22, 2016 at 3:55 am #619465Can 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
April 22, 2016 at 3:08 pm #619994Hey!
@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,
YigitMay 6, 2017 at 4:33 pm #788855Hello,
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!
May 6, 2017 at 4:45 pm #788858Hello, 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.
May 7, 2017 at 6:40 am #789035Hi @vladbejenaru,
Great, glad you found a solution and thanks for sharing, much appreciated :-)
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.