woocommerce product tab ‘Size Chart’ HTML problem

[ad_1]

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!

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer