fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Variation Title Position & Aligning

Ben Paveley

I am in the process of re-building and updating my site. I used the variation swatches plugin on my old site and would like to use it on my new one as I really like the plugin but I have found an issue with the titles on the variation swatches. On my old site the titles were positioned above the swatches and aligned left. (Screenshot attached below.)

Screenshot 2022-03-03 at 00.22.45.png

 

On my new site the titles are positioned to the left of the swatches and won’t align fully to the left. This is an issue as the titles that are longer than two words take up too much room and run onto the next line. I can’t tell any settings that I’ve done differently but can’t work out how to fix this? I’ve attached a screenshot below this of the new site with the layout I don’t want.

Screenshot 2022-03-03 at 00.26.41.png

Hakik Zaman

Hi Ben,

Thanks for reaching out to us. Recently, WooCommerce changed its markup <td> to <th>and style is coming from your theme.

So, you need to write some additional CSS to fix this. Can you please give us the exact link to your new site?

Hope to hear from you soon!

Thank You

Hakik Zaman

Hi Ben,

Thanks for giving us the exact link. Please place the below CSS at Appearance > Customize > Additional CSS

.single table.variations tbody tr {
   display: flex;
   flex-direction: column;
   text-align: left;
}

.single table.variations tbody tr th {
  padding-left: 0;
}

 

After placing the CSS, hit the publish button. Then clear your cache (browser cache + caching plugin cache + server-side cache).

Please let me know if it resolves your issue or not.

Thank You

Ben Paveley

Yes that’s solved it! Thank you so much for the quick responses, it’s much appreciated!