Looking to edit a form field size in WooCommerce Product Add-ons…

  • Hi, I am looking to edit a specific form field (a text input area) in the plugin WooCommerce Product Add-ons. I am posting this here because I don’t think that Woocommerce provide’s any customization support (as far as telling you how to customize something, I emailed them just in case).

    The site is willoughbywildcats.com

    An example of what I mean is on the page:

    https://willoughbywildcats.com/product/wildcats-t-shirt/

    Where it says “Add a number”, I’d like to make that text box smaller, big enough for just two characters.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    A CSS rule should do the trick. Try adding this to the theme’s style.css:

    .input-text.addon.addon-custom.addon-custom-pattern[name$="number]"] {
  width: 2em !important;
}

    This should work for the linked page, but be sure it works on other pages where it’s supposed to and doesn’t shorten fields it’s not supposed to. This can be added to the very bottom of the file, just be sure it is outside of any media query blocks, i.e. place it below the very last closing curly brace }

    You can edit your theme’s style.css to be sure the rule works, but it’ll be lost when you update the theme. To protect this and any other customizations, you should create a child theme and place this rule on the child’s style.css.

    Thread Starter jbalazs8178

    (@jbalazs8178)

    Could I add it to my custom CSS file, or does it have to be the child style.css?

    Thread Starter jbalazs8178

    (@jbalazs8178)

    The only issue is that it shrinks both boxes, and I just want the second of the two input boxes shrunk, the one that says “Add a number”…is there any way to do this? Do I have to edit each page where that occurs in the index.html…or .php, whichever file it is, in the child theme (which is a pain as it is since I use a child theme plugin to make child themes, because whenever I tried to make the theme myself it never worked :/ ) ?

    Thread Starter jbalazs8178

    (@jbalazs8178)

    Something is overriding this custom css, and I can’t figure out what it is. Even if i put !important in there, nothing changes…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Looking to edit a form field size in WooCommerce Product Add-ons…’ is closed to new replies.