woocommerce product tab ‘Size Chart’ HTML problem

Hello @brettkan it appears you added the table markup into the visual editor and not the text editor. You need to do that. Also, your second markup has a display none added to it.

Thanks @serafinnyc but it’s not so simple. I just edited this product (also with a size chart) in the visual editor and it stripped out all the HTML when i saved it.
https://west-indigo.com/shop/mens-clothing/mens-all-over-shirts/mustique-palm-hawaiian-shirt/
Something is removing HTML markup – it didnt behave like this before. When I made the pages with size charts, they worked fine. Its a recent update to woo or WP perhaps.
BTW:
WooCommerce Version 9.1.2
WooCommerce Shipping & Tax Version 2.7.0
WooPayments Version 7.9.2
WordPress 6.6.1
Custom sub-theme of Ollie

Thanks!

@serafinnyc Yes I am hiding the H2 Description with a display:none in my custom style sheet

Hello again @brettkan it is that simple, believe me. If the markup was stripped then there’s a theme or app conflict. You can see here I’m adding a table to the description no problem.

As for you hiding the description H2, that’s not what I meant, I said you are hiding the other table.

Hey there, @brettkan! Thanks for contacting us. I’m happy to help you.

Can you share the code you added on the size chart here in a code block so we can take a look and test it on our end?

If you can also share a screenshot of it on your end, that would be great ??
I recommend using https://snipboard.io. You can share the direct link to the image as a response to this topic.

Looking forward to your reply.

Have a wonderful day!

Hi @carolm29 It was just a simple table: but when i edit in the WYSIWYG the HTML gets stripped out leaving just text. I switched to WP 2024 theme and the problem persisted (on my local server). My next step is to rollback woocommerce, or compare new and old templates- thanks!

<table class="size-guide">
<thead>
<tr>
<th>Metric</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>2XL</th>
<th>3XL</th>
<th>4XL</th>
<th>5XL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Length, cm</td>
<td>72.00</td>
<td>74.50</td>
<td>77.00</td>
<td>79.50</td>
<td>82.00</td>
<td>84.50</td>
<td>87.00</td>
<td>89.50</td>
</tr>
<tr>
<td>Width, cm</td>
<td>52.00</td>
<td>57.00</td>
<td>62.00</td>
<td>67.00</td>
<td>72.00</td>
<td>77.00</td>
<td>82.00</td>
<td>87.00</td>
</tr>
<tr>
<td>Pocket length, cm</td>
<td>14.48</td>
<td>14.99</td>
<td>15.49</td>
<td>16.00</td>
<td>16.51</td>
<td>17.02</td>
<td>17.27</td>
<td>17.27</td>
</tr>
<tr>
<td>Pocket width, cm</td>
<td>12.45</td>
<td>12.95</td>
<td>13.46</td>
<td>14.00</td>
<td>14.48</td>
<td>14.99</td>
<td>15.49</td>
<td>15.49</td>
</tr>
</tbody>
</table>
&nbsp;
<table class="size-guide">
<thead>
<tr>
<th>Inches</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>2XL</th>
<th>3XL</th>
<th>4XL</th>
<th>5XL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Length, in</td>
<td>28.35</td>
<td>29.33</td>
<td>30.31</td>
<td>31.30</td>
<td>32.28</td>
<td>33.27</td>
<td>34.25</td>
<td>35.24</td>
</tr>
<tr>
<td>Width, in</td>
<td>20.47</td>
<td>22.44</td>
<td>24.41</td>
<td>26.38</td>
<td>28.35</td>
<td>30.31</td>
<td>32.28</td>
<td>34.25</td>
</tr>
<tr>
<td>Pocket length, in</td>
<td>5.70</td>
<td>5.90</td>
<td>6.10</td>
<td>6.30</td>
<td>6.50</td>
<td>6.70</td>
<td>6.80</td>
<td>6.80</td>
</tr>
<tr>
<td>Pocket width, in</td>
<td>4.90</td>
<td>5.10</td>
<td>5.30</td>
<td>5.51</td>
<td>5.70</td>
<td>5.90</td>
<td>6.10</td>
<td>6.10</td>
</tr>
</tbody>
</table>

I should add that all product pages with Size Chart tab are affected and not displaying HTML they are either showing HTML as text or if i have tried to edit them, then the HTML has been stripped out. Not all products use this Tab.

cheers

Hey, @brettkan!

Thanks for sharing the code!

I tried the code on a product on my website and it worked correctly even after switching to visual mode. I even changed it on visual mode and still looked like it should.

One thing I noticed is that your website has a custom size chart tab.

How did you add this? Did you use a plugin or custom code?

Looking forward to your reply.

Have a wonderful day!

The problem is the ‘Printful Integration for WooCommerce’ plugin. I rolled back to 2.7 and the problem is gone. I think it is Printify who introduced the ‘size chart’ tab to my site and Printful thats giving me the problem – I will have to investigate how these tabs are added in the first place and contact Printful for a resolution.
Thanks for your help!

Hello @brettkan,

Glad to know that you’ve found the conflicting plugin and I hope a solution is found soon.

Should you have further inquiries, kindly create a new topic here.

Thanks!