The Product Add-ons extension for WooCommerce is a simple to use plugin that lets you add extra option fields to your products. The file upload field makes it possible for customers to send a file like a logo that you can use when customizing their order.

The only downside is the default appearance of the file type input is its styling. It often doesn’t really match the rest of the site. Here’s an example of what it looks like by default.

What makes this tricky to work with is how the “Choose File” button is set up in the HTML. Often we can pick out a specific element in the HTML and then target it with CSS. In this case, the input covers that entire section so our normal bag of tricks probably won’t work the way we envision.

The alternative is to actually hide the button and use a “pseudo element” in the CSS to create a new one. Here’s a snippet you can use to do this.

.wc-pao-addon-file-upload::-webkit-file-upload-button {
  visibility: hidden;
  width: 0;
}

.wc-pao-addon-file-upload::before {
  content: 'Select files';
  display: inline-block;
  border: none;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  color: #fff;
  background-color: #1392eb;
}

.wc-pao-addon-file-upload:hover::before {
  background-color: #000;
}

The top style hides the original button and makes it so it doesn’t take up any horizontal space. That way we don’t end up smushing the “No file chosen” text.

The second style sets what our button looks like. For best results, you’ll want to adjust these to match the buttons on your site in terms of color and size. The last style sets the hover color of the button.

Once this has been added to the site, we’ll end up with something that looks like this.

It’s not a radical departure, but it can make the file upload feel like it’s better integrated into the site.