First off, check with your plugin provider. You should never duplicate a child theme for A/B testing purposes – it will not work – and you shouldn’t have to go to this drastic length for such a simple change. If this is the only way they offer to A/B test, find a different plugin/testing provider.
Instead, for this type of change, you would typically do one of two things:
- Override the CSS class for the button whose color you’re changing
You can have the A/B testing software add a snippet of CSS to the head of the page where your button is. You write the CSS, something to the effect of
.my-button-class { background:red; }
so that just on that one page, the button’s color changes. You may also need to set the text color, etc. (i.e. if you start with a black button with white text, and you switch to a light gray button, you probably want black text instead of white text, so it’s still easy to read). This just requires that you use your Inspector to figure out what CSS class is already on the button, and then write the CSS to change its color.
- Change the CSS class of the button whose color you’re changing
If your theme already has multiple button color classes built in – and if it lets you customize colors, it most probably does – you can instead have the A/B testing software change the HTML
<button class="red">Button text</button>
to
<button class="green">Button text</button>
just on the page where you want to test the change.
In this case, you need to be familiar with your theme and what classes it offers – or, be comfortable creating your own child theme, in which you place all of your possible CSS classes, and then the A/B testing software updates the HTML in each variant.