Manage Variations and Customer input label and field width

[GWslade]

I would like to make the list of variations and customer input a nice justified table. This would require setting the width of both the label and the field, for both the variations and the customer input.

I found the change to the Custom CSS to manage the variation field width.

.eStore_variation {

width: 140px !important;

}

Works perfect.

I also found the following instructions to change the customer input to a text area.

Search for the following line in the “eStore_button_display_helper.php” file:

<input type="text" name="custom_input" value="" class="eStore_text_input" />

Once you find it replace it with the following (there will be 2 occurrences so change them both):

<textarea name="custom_input" cols="20" rows="3" /></textarea>

I tried to add style=”width: 200px;” to the input, but it did not set the width, i presume it is being over ridden by something else.

I cannot find anything that shows how to set the width for the labels.

I guess because the custom CSS solution works so well for the variation field, could a similar change be made for the other three items?

[admin]

The customer input label and field also has CSS classes attached to them. So you can use them to control the width.

Use the class name “eStore_custom_input_name” for the label

Use the class name “eStore_collect_input” for the custom field

Please post a link to the page where you have it so I can view the HTML in my browser.

[GWslade]

The URL is [http://travelersmobile.com/store/#tabs-1-5]

Maybe I did this wrong

I put the following in my custom CSS file (wp-cart-for-digital-products/wp_eStore_custom_style.css)

.eStore_variation {

width: 140px !important;

}

.eStore_custom_input_name {

width: 140px !important;

}

.eStore_collect_input {

width: 140px !important;

}

the custom input fields did not change.

Also what is the class name for the variation label?

[Peter]

Hi,

In addition to your existing css changes – if you also add a float “left” to your code for the variation name it will at least line things up for the labels:

eg:

.eStore_variation_name {

width: 140px;

float: left;

}

[GWslade]

The Variation Name, custom input name and custom input all show width:auto when I inspect the elements, eve though the width has been set to 140px. Is there something overriding the set width, for these classes?

[admin]

Use the !important property on the width like the following:

.eStore_variation_name {

width: 140px !important;

float: left;

}

However that is not the issue in your case. I think you are applying the CSS tweak in the wrong file. Your eStore custom CSS file is empty?

Here is the file where you should be adding those CSS tweaks but it is empty (that explains why it is not working):

http://travelersmobile.com/wp-content/plugins/wp-cart-for-digital-products/wp_eStore_custom_style.css

[GWslade]

I had reloaded the Wp-eStore plugin and blew away my edits in the CSS. Thanks for spotting that. It is working now.

[Author]

Posts