Hiding the description in the Cart's Edit Details Lightbox Popup

Site URL: https://thewestcoastkraeers.com

Hey guys, site password is "css-for-days". Been looking into this for a while now without much luck. I followed this tutorial: https://kerstinmartin.com/blog/file-upload to make a File Upload Custom Form for our "Coffee Mug with Custom Artwork" product page. It all works fine, and links to a dropbox folder:

Except when I click here in the shopping cart:



I see the ugly href link instead of the upload button that was there. Can I just hide that text block entirely in this particular popup window? Thanks in advance for any advice!


 

What you are seeing is one of the downsides of using input fields that don't explicitly say they accept HTML. What may work in one place, may not in another.

SS has been slowly fixing these input fields that accept HTML that don't explicitly say they do.

The site URL you provided doesn't work so I can't provide exact CSS for your issue.

Add the following to Design > Custom CSS as a possible first try.

.cart-product-form-field-container:first-child {

  display : none;
  
  }

I suggest not hiding that field but instead using some JavaScript to make the HTML in the label active again. That would provide a more consistent user experience. I don't have JS at hand to do that and it's actually a bit involved because of how the cart page works.

Let us know how it goes.

Thanks Creedon, sorry the site URL didn't work, it should be fixed now: https://www.thewestcoastkraeers.com/

Tried that code but no luck so far. I'll see what I can dig up by way of Javascript. Would you by chance have ideas for a fallback method? Am I overthinking this problem or overlooking a simpler way to let users upload a custom image?

Thanks so much for this Creedon, that might actually work for us. I'll need to run it by the client - my wife!

While we're here - you may have noticed some css rollover flourishes at the top of the page; stars and lines that scale out from the nav options. 

Because I'm using this CSS:

Quote

@media (pointer:fine), (hover:hover)
{ 
     .ProductItem .ProductItem-details {
           padding-top: 0;
           margin-top: -2em;
    }
}  
section[data-section-id="62a6d615ecc8760408b7d342"]
{
       margin-top:-5em;
}

the flourishes are covered up by the page content (background?) of the shop. 

Is there a way to make the section background on those pages transparent, so we can see the flourishes? Or should we revert this CSS and learn to live with the large empty space at the top of the shop pages? With the default spacing, you can see the rollovers.

Thanks again for taking the time to look at this!

Actually was able to solve the section background issue by implementing some CSS by tuanphan in a thread from last year:

[data-section-id="62a6d615ecc8760408b7d342"] { background-color:transparent !important; }

[data-section-id="62a6d615ecc8760408b7d342"] .section-background { background-color:transparent !important; }

Where the id is the section containing the product gallery and product details content. Thanks again for all your help!

Last post I swear - building on Creedon's post, I hid the "Edit Details" link in the cart, and replaced it with an unclick-able "Custom File Uploaded" notification:

#cart [aria-label="Coffee Mug with Custom Artwork"] ~ .cart-row-edit {
  font-size: 0;
  pointer-events: none;
  text-decoration:none;
}
#cart [aria-label="Coffee Mug with Custom Artwork"] ~ .cart-row-edit:after  {
  font-size: 1rem;
  pointer-events: none;
  decoration:none;
  color:#98b6bb;
  content: 'Custom File Uploaded';
  font-family: 'button' !important;
}

Of course, we don't know that the user ACTUALLY uploaded anything. All they have to do is hit "Add to Cart" on the upload popup. But for our purposes it should work; we'll cross that bridge when we get to it if there are any issues.