Added to Cart – Image & Title/Variable Issue

Here is another example.

Bad

Good

In order to inspect the elements, you need to add the product to the cart (Download + Color + Commercial works the quickest to add product). After it is added to the cart, you will need to look at the widget and the Cart Menu Drop Down, you should notice that everything looks fine as it does in the “Good” image examples I provided. After the product is successfully added to the cart, the user might navigate to another page or to another product where you/they will then most likely see the issue (as described above through the images “Bad”). Like you said, it doesn’t always show up right away, but it certainly happening, and when it does, it looks terrible.

After adding to the cart I typically go to another product (where I might or might not see the issue), add that product to the cart, go to the cart page (might or might not see the issue), then go to the checkout page. You can always see this behavior in the Checkout Page Order Review Form, but this is not as much of a concern since it isn’t as dramatic as the Cart Menu Drop Down and the Product Widget.

As for caching, unless Hostgator added this, I do not have a caching plugin or caching turned on.

• This reply was modified 8 years ago by Tflores87.

Hi Andy, it’s definitely happening, not sure why it’s not for you. Please be sure that after you add the product to the cart, you at some point also check out another product (as a user/customer might do) and look to the cart widget as well, this way you will have a better chance of seeing this issue. When the issue happens, it is apparent in the Cart Drop Menu, The Cart Widget, and on the order review form.

As for the odd behavior, I have confirmed that it is theme related with WooCommerce and Extra Product Options, because I thought they might be involved, but are not. It is happening on Firefox, Chrome, and on Safari- both on a Mac, and on a PC. I have also had 4 different colleagues double check this for me on their devices/browsers and it is happening to them as well. Could you please kindly check on a different device/browser and/or have someone else double check? Do note, that this doesn’t happen on mobile devices.

So strange! Were you also able to view a different product while you had a separate/unrelated product already in the cart and still not see the issue?

I found a place where you will always see this behavior. Here is a screenshot of the “Order Review Form” form on the checkout page.

https://kingsdesigns.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-28-at-4.52.19-PM.png

Hi Andy!

The issue is what we’ve been discussing :) You can see and read about the issue in my above posts. For example from the above post #715484:

Bad
Good

You’ll notice in this most recent screenshot I just sent you (https://kingsdesigns.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-28-at-4.52.19-PM.png), there is white space between the word “Edit” and the word “Format” where there shouldn’t be. Since you were having difficulty finding this, I supplied you with a place where you can always see the issue on the Order Review Form on the Checkout Page.

Hi Andy, we are on the right track now! That being said, the code only works for the Order Review Form on the Checkout Page since it is a set amount of pixels, but creates an issue for the following pages as you can see with the following images the text might overlap so it may not be a “margin-top: -21px !important;” kind of issue.

Cart Page
Before Code
After Code

Cart Drop Down Menu
Before Code
After Code

Product Page
Before Code
After Code

Andy, I greatly appreciate your efforts and time with this, but I am not sure you are able to help me with this issue. Would you mind tagging Ismael or Josue? As you can see, there is more of an issue than just the Checkout Page.

Thanks, Andy. I will look at Codeable for any customizations! However, with this particular behavior, it is a compatibility issue between Enfold and WooCommerce.

WooCommerce mentioned that Enfold overrides a few templates, which in this case is causing the issue in question. Here is a file that’s being overridden by Enfold that they believe could be the cause for this behavior:

enfold-child-theme/woocommerce/single-product.php