Cart broken layout / style after update to WoodMart 7.6

This topic has 22 replies, 2 voices, and was last updated 2 months, 3 weeks ago by Luke Nielsen.

Viewing 23 posts - 1 through 23 (of 23 total)

Author

Posts
August 21, 2024 at 5:19 pm #591573

markus
Participant

Hello,

I am comparing directly WoodMart 7.5.1 .with WoodMart 7.6. The result would not be different with WoodMart 7.5.2 but I don’t have the zip file available for 7.5.2.

Since I updated to 7.6 the cart page is messed up a bit. When I downgrade to 7.5.1 it’s immediately solved. I am using German Market as well which might impact the cart I think, but even when I disable German Market it’s not making any difference.

Attached you see what the problem is. Font size change a bit, and also the table width or width of the row it seems.

In the public attachment you see the issue. In the private content, I am sharing with you a comparison of the full cart page before and after the update to WoodMart 7.6.

Updating WoodMart involves often many hours (days!) of troubleshooting, I try to avoid that this time. Do you have any hint on how to fix this or what could go on here. It’s not the first time that there are issues with the cart or checkout page after an update.

I did not fully go into troubleshooting yet because I can clearly reproduce it from the very beginning, so obviously it has to do with with WoodMart 7.6. I think the shop_table shop_table_responsive is displayed differently in the end after the update.

Thanks for your support

Markus

Attachments:
You must be logged in to view attached files.

August 22, 2024 at 9:54 am #591661

Luke Nielsen
Keymaster

Hello,

Send me access to the admin panel of the updated site and confirm the permission for plugin deactivation, just for testing.

Thank you in advance.

Kind Regards

August 22, 2024 at 11:26 am #591706

markus
Participant

Hi Luke,

I did some more testing myself, and noticed it’s only happening when I am logged in – not sure what caching could be applied here as I purged all caches, however, perhaps that helps when analyzing it. I doubt it’s caching, it’s something else that is perhaps different when logged in vs. logged out.

Digging deeper, I learned it’s only happening to my admin user, and as of now I don’t have an explanation for that. Tested in normal mode and incognito mode of Chrome.

My admin user on Chrome and Chrome incognito shows that layout/style issue of the cart page with WoodMart 6.7 and not with any previous WoodMart version. Another user is not seeing that very same issue.

I prepared the staging site for it, it’s password protected, you’ll find the information in the private content.

I disabled all plugins already except Elementor, Elementor Pro, MainWP Child, Password Protected, WooCommerce, WoodMart Core but it’s not making any difference.

Swichting from WoodMart Child to WoodMart also didn’t make any difference.

edit:
I could narrow it down to the address information in the cart. I am showing you in a private video. It’s related to the address that is used and displayed for the calcuation of the shipping fees. That’s why another user did not see the problem, as the address was not added to another user’s profile.

Now that all should help to sort it out I hope.

best regards
Markus

August 23, 2024 at 4:21 pm #592107
Luke Nielsen
Keymaster
Hello,

Remove these padding then clear the cache and check how it works.

Thank you for your time.

Kind Regards
- This reply was modified 3 months ago by Luke Nielsen.
August 23, 2024 at 4:26 pm #592112

markus
Participant

Can you please remove the screenshot! It’s an absolute no go to publish screenshots from sites that are not public without authorization. I downloaded the screenshot and I’ll test this now. Please in the future only as private content. Thanks for deleting immediately.

best regards
Markus

August 23, 2024 at 4:32 pm #592113

markus
Participant

Also do you have an explanation for this? I should be able to give a padding to my liking, why would it impact in the odd way like it does (related to the address, and the different woodmart version)

I do prefer to have som padding at least here and now it seems I am not able anymore at all

Thanks

August 23, 2024 at 6:49 pm #592150

markus
Participant

I also would like to know if you have experienced changes in styles e.g. font size. I can troubleshoot it, but I wonder where it came from and why the WoodMart update would impact it (looking at the very same /cart page)

I downgraded on the site you have access to again to WoodMart 7.5.x so that I can compare it better. You should be able to also see all of that in the in private provided link with screenshots and videos

August 23, 2024 at 6:54 pm #592151

markus
Participant

I added another link to the private content that clearly shows one single example of the font size

In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.5.1 you’ll see table heading font-size 16px
In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.6.0 you’ll see table heading font-size 110%

This is just one example of many. Only the update triggered this

August 26, 2024 at 10:13 am #592457

Luke Nielsen
Keymaster

Hello,

Sorry for the delay.

Okay, I see. Could you send me access to the site with the latest theme version so I can look closer at it?

https://take.ms/98TwZ1

I await your response.

Kind Regards

August 28, 2024 at 2:06 pm #593225

markus
Participant

Hello,

yes during the troubleshooting process I had to upgrade/downgrade the theme several times. Now it’s back to WoodMart 7.6.

Please note, I have opened another issue about WS Form – so depending on who is looking into it, you might be two different people using the same login to the sites>

best regards
Markus

August 29, 2024 at 2:08 pm #593548

Luke Nielsen
Keymaster

Hello,

Now on my side, it works well – https://take.ms/R1qAP

Please check it and let me know if the same issue appears on your side.

Kind Regards

August 29, 2024 at 3:34 pm #593600

markus
Participant

I’ll check when I am back on the computer. However, I must know if you changed something and if so what you changed

There were fonts suddenly changed on many areas, I only gave one example

All the changes came with the latest update

August 29, 2024 at 3:46 pm #593605

Luke Nielsen
Keymaster

Hello,

Just cleared a cache and defined 30px padding for the cart as it was before. Then rechecked the issue and on my side, it started to work well.

Clarify the issue with the font, send some screenshots, please.

Kind Regards

August 29, 2024 at 3:49 pm #593609

markus
Participant

I did all of that already, but I’ll look at it again and if needed provide more screenshots and videos. It was very obvious though, I think I even showed a class that was impacted no?

In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.5.1 you’ll see table heading font-size 16px
In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.6.0 you’ll see table heading font-size 110%

I’ll check again, just not sure from what I read here if we are talking about the same thing

August 30, 2024 at 9:33 am #593771

markus
Participant

Hello,

I just had a look at and it’s worse now.

Let me be clear – the update changed something, I could show and prove it already and gave all the necessary hints. So what to do about it? Can you please just read what’s already mentioned in the ticket/conversation including the private content where I showed you a video and screenshots

This hint alone should be already enough I think. If you show this to the devloper they should know.
In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.5.1 you’ll see table heading font-size 16px
In /wp-content/themes/woodmart/css/parts/base.min.css?ver=7.6.0 you’ll see table heading font-size 110%

The cart looks different and I can see that different styles are applied with WoodMart 7.6 compared to WoodMart 7.5.1

In total there are two problems
1) suddenly with 7.6 the padding impacts the style when an address is added (it’ll be clear with the screeenshots, videos, and ticket history but I don’t want to repeat myself all the time)
2) the font size changed on several points as suddenly you apply font-size 110% for whatever reason

This clearly goes back to the update and we need a fix and not overwriting styles of perhaps already overwritten styles. I read many conversations in this forum and see it very often. Instead of fixing it styles will be overwritten and the next update will mess with it again.

I recorded another video for you now to show you once again.

Please have a look. Please also understand we don’t want public screenshots of the site in development.

Do you have any questions? Is there anything not clear yet I could explain better?

best regards
Markus

August 30, 2024 at 9:43 am #593777

markus
Participant

I am sharing another video with a direct comparison 7.5.1 vs. 7.6 in the private content again

August 30, 2024 at 10:56 am #593796
Luke Nielsen
Keymaster
Hello,

1. Here is a video of how the cart looks on my side – , could you please clear the browser cache? As I do not see that issue, it could be a cache issue.

2. As for the font, yes, in the latest update that value was changed to 110% and the reason is to make the font on the site relative to the similar proportions. If you do not like that, you can use the below code to disable it:
```
.woocommerce-cart table th {
    font-size: 16px !important;
}
```
Thank you for your time.

Kind Regards
- This reply was modified 2 months, 3 weeks ago by Luke Nielsen.
August 30, 2024 at 1:23 pm #593885

markus
Participant

Unfortunately, you didn’t understand it – should we jump into a Google Meet? What can I do? I explaind many times now.

I explained already, I needed to troubleshoot this myself to understand and I showed you all the results. The result of this was that the address makes a difference on the cart page. I will record again (but I am not going to show you any different result, I am just repeating what I said and showed many times already)

Form my message from 22nd of August
> I could narrow it down to the address information in the cart. I am showing you in a private video. It’s related to the address that is used and displayed for the calcuation of the shipping fees. That’s why another user did not see the problem, as the address was not added to another user’s profile.

As I said few times please delete those public inks showing videos and images of our site. Can you share private links like I can? We don’t want those troubleshooting videos and screenshots of the site in development online!

You’ll find another video in private showing the very same problem, and I am pointing again at the difference when adding the address between 7.5.1. and 7.6.

About the font-sizes – that of course it not fully solving it. I now must manually check and overwrite the other fonts (perhaps until the next update).

August 30, 2024 at 3:59 pm #593973
Luke Nielsen
Keymaster
Hello,

The below code will help you to remove our added 110% font size and fix the issue with the cart totals, also remove the previous custom code provided by me above:
```
body table th,
body td.product-subtotal span {
	font-size: 16px;
}

body tr.order-total th {
		font-size: 18px;
}
	
body tr.order-total strong .amount {
		font-size: 22px;
}

td.product-name a {
	font-size: 14px;
}

td.product-price :is(.amount, .wd-price-unit) {
	font-size: 14px;
}

td.product-subtotal span {
	font-size: 16px;
}

@media (max-width: 768px) {
	
		td.product-subtotal .table-responsive-label {
		font-size: 11px
	}
	
	td.product-subtotal span {
		font-size: 14px;
	}
	
	.shop_table_responsive td:before {
		font-size: 12px;
	}
	
	:is(.woocommerce-cart-form__contents,.wd-fg-table, .group_table) td:before {
		font-size: 11px;
	}
	
	.cart-totals-inner tr.order-total strong .amount {
		font-size: 18px;
	}
	
	.cart-totals-inner .shop_table_responsive td:before {
		font-size: 14px;
	}
}
```
Clear the cache and check how it works.

Kind Regards
- This reply was modified 2 months, 3 weeks ago by Luke Nielsen.
August 30, 2024 at 5:41 pm #594019

markus
Participant

Thanks for providing this code – I assume it would be better like you did before and add .woocommerce-cart to every statement right?

I’ll try it.

It’s normally exactly what I try to avoid. I see this all the time in here (WoodMart Support) that the solution to many things is overwriting styles, and I doubt this is always a good approach. After some time, and with the next update it’s becoming impossible to tell which styles are defined and overwritten on which end within WordPress, Theme, Elementor.

For me this all looked like a visual bug as I could clearly reproduce it before/after the WoodMart update – but obviously that’s the only solution in that case now.

I hope the same is not happening with the next update, because the time invest with each update these days is intense.

September 2, 2024 at 9:50 am #594342

Luke Nielsen
Keymaster

Hello,

The above code works for the Cart and Checkout pages so if you add the woocommerce-cart selector, it will work only for the Cart page.

Sorry for that inconvenience, I hope it will not happen again.

Kind Regards

September 2, 2024 at 10:02 am #594347

markus
Participant

Alright .. I think I’ll keep it as is now and go back to this conversation if needed (or if another update is impacting it again open a new conversation).

I also only tested quickly and didn’t check on different browsers yet or on mobile, so fingers crossed that it’ll be just fine there.

Overall, Elementor and Theme are already sometimes fighting for attention when it comes to styles. Overwriting styles manually feels always like making everything more inconsistent and unreliable (e.g. suddenly theme settings won’t be applied anymore, etc.). Hence I always try to solve things another way first as it simply becomes unmanageable

September 2, 2024 at 4:22 pm #594545

Luke Nielsen
Keymaster

Hello,

Understood. Always remember that you can reach out to us with any questions you may have.

Thank you for your time and patience.

Kind Regards
Author

Posts