How to find PHP or CSS source from product table (Woocommerce)

[craigdegouveia]

I am styling a Woocommerce product page using PHP and CSS.

I am using images for product variations, which take up two rows.

Currently there are two options, and it looks like this:

Select a Chef | Chef 1 | Chef 2 | Chef 3 | Chef 4

Select a size | Size 1 | Size 2

I want to change the product table to look like this:

Select a Chef
Chef 1 | Chef 2 | Chef 3 | Chef 4

Select a size
Size 1 | Size 2

With Select a Chef and Select a Size on separate rows.

I have used Inspect Element to find the code on an individual page. It’s as simple as adding an extra

next to the 2 product labels. When I do this in my browser and preview it, it looks exactly how I want it to look.

I am having trouble identifying the source of this table. I’m not sure if it’s coming from Woocommerce, the button variation images plugin I am using, or from the WordPress theme itself.

I have looked in all three places and have not been able to pinpoint the source of this table.

Can anyone point me in the right direction?

Craig

[Atelierbram]

There is this WordPress plugin called “What The File” which can give handy info on used templates.
Alternatively paste this snippet gist.github.com/atelierbram/569089431e2072a8b7997eb99b6411b3 somewhere in footer.php to let PHP barf out all the used data-base queries.

[webinuse]

OR when you use inspect element in chrome you can hover on style.css?v…… It is placed where your element.style are placed, top right corner of every block of element.style.

[Craig de Gouveia]

Thank you both for the advice. I managed to find the file where I needed to change the table. It’s working the way it should now.

[Author]

Posts