I am having a problem trying to figure out why on my mobile version. The table for color and size variations watches is above my title. On the website and the desktop version It looks perfectly fine exactly how I would expect it. However, on mobile the color and size of the table that is being used by this plug-in is being added before the title and before the price.

Screenshot of WooCommerce product variation swatches:

Is there a way I can get this table color and size from Variation Swatches for WooCommerce by cartflows to have this table displayed below the title or below the price.

Preferably, I would like to disable this just on the mobile version until you actually click on the product to take you to the product page.

This is my website. Could anyone help me on this? I am extremely stuck, even after inspecting the page. I don’t know where I should go to fix this.

https://chainlinkink.com/product-category/new-arrivals-women/

So far, I have tried to inspect the page.

class=”cfvsw-shop-variations variations cfvsw-variation-disable-logic”

==================

<table class="cfvsw-shop-variations variations" cellspacing="0">
<tbody>
<tr>
<td class="label woocommerce-loop-product__title">
<label for="pa_color">Color                                     </label>
</td>
</tr>
<tr>
<td class="value">
<div class="cfvsw-hidden-select">
<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="black">Black</option>
<option value="purple">Purple</option>
</select>
</div>
<div class='cfvsw-swatches-container cfvsw-shop-container' swatches-attr='attribute_pa_color'>
<div class='cfvsw-swatches-option' data-slug='black' data-title='Black' data-tooltip='Black' style=min-width:24px;min-height:24px;border-radius:24px;>
<div class="cfvsw-swatch-inner" style="background-color:#000000;"></div>
</div>
<div class='cfvsw-swatches-option' data-slug='purple' data-title='Purple' data-tooltip='Purple' style=min-width:24px;min-height:24px;border-radius:24px;>
<div class="cfvsw-swatch-inner" style="background-color:#8224e3;"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="label woocommerce-loop-product__title">
<label for="pa_size">Size                                       </label>
</td>
</tr>
<tr>
<td class="value">
<div class="cfvsw-hidden-select">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="2xl">2XL</option>
<option value="3xl">3XL</option>
<option value="4xl">4XL</option>
<option value="5xl">5XL</option>
</select>
</div>
<div class='cfvsw-swatches-container cfvsw-shop-container' swatches-attr='attribute_pa_size'>
<div class='cfvsw-swatches-option cfvsw-label-option' data-slug='xs' data-title='XS' style=min-width:24px;min-height:24px;border-radius:24px;>
<div class="cfvsw-swatch-inner">XS</div>
</div>
<div class='cfvsw-swatches-option cfvsw-label-option' data-slug='s' data-title='S' style=min-width:24px;min-height:24px;border-radius:24px;>
<div class="cfvsw-swatch-inner">S</div>
</div>
<div class='cfvsw-swatches-option cfvsw-label-option' data-slug='m' data-title='M' style=min-width:24px;min-height:24px;border-radius:24px;>
<div class="cfvsw-swatch-inner">M</div>
</div>
<span class="cfvsw-more-link" style="line-height:24px">
<a href="https://chainlinkink.com/product/product-category-women-galaxy-hoodie/">6 More </a>
</span </div><a class="reset_variations"href="#">Clear</a></td></tr></tbody></table></div>

I can find the table, but I can not figure out how to edit this.