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

Now that I can see your site, any way you slice this thing there are going to be issues.

If you try to replicate the product page form behaviour that will be complex and require JavaScript.

If you go CSS only and hide stuff then you lose the ability for the customer to upload an image from the cart page. Although if that feature is maintained it has its own issue in that you could get more than one image for an order item. Which one is the one the customer wants? The last one? How do you determine that? Plus there are several other issues matching up pics with customer's order items. SS and Dropbox are not aware of what each other is doing.

If you go with CSS you should be able to hide the edit form or some of its elements. The downside here is if the customer didn't upload on product page then you don't get an image. Contact customer and spend time getting image.

If you go the CSS only route it might be easier to hide the Edit Details link.

Using a service like DropBox I don't see an easier way to upload files. They'd all have a similar experience. I don't know of a more elegant solution interface wise.

No easy answers on this one.

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.