How reliable is the CSS test?

Resolved cutu234
(@cutu234)

1 year, 4 months ago

We would use Nelio much more often. Unfortunately, the predefined tests rarely meet our needs. What we really miss is some kind of universal test for changing smaller elements, no matter where on the website. On top of that, most stores that have enough revenue for AB testing are probably highly customized. Our store has about six plugins installed that change the rendering of the product page in one way or another. It is very likely that the predefined product test is simply not working properly.

To make a long story short: We would need a test that can show or hide elements. We could use the CSS test for this:

<div class="nab0">some content</div>
<div class="nab1">some content</div>

We could then show or hide something in the test variant. However, this seems like a dirty workaround and I’m not sure how reliable this method is. Of course, we want to avoid problems that could have a negative impact on conversions at all costs. This could be flickering or, in the worst case, both blocks being displayed.

What would be the best approach? Would you consider the CSS test reliable enough? Do you have a better idea on how to perform such a test?

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Author David Aguilera
(@davilera)

1 year, 4 months ago
As far as I can tell, the CSS test you’re describing would work perfectly fine. However, there’s a few things you should keep in mind:
- You need a default CSS rule that hides all variants but the first one. Something like this:
```
.nab1, .nab2, .nab3 {
  display: none;
}
```
- The CSS snippet in each variant is now responsible of hiding the control version and show the appropriate one:
```
.nab0 { display: none; }
.nabX { display: block; }
```
- CSS tests run on all pages. This means that every time a visitor accesses a page on your website, it’ll trigger a page view. It doesn’t matter if that page contains .nabX blocks; a page view will be triggered. You can (and should) fix this using test scopes, where you manually specify the pages where a CSS test is supposed to be active.
Also, depending on the type of test you have in mind, you could also run template tests as an alternative. For example, you could define an alternative product description using the Advanced Custom Fields plugin and create an alternative template that uses that new description field. Then, you can create a test that tests the regular product template against that new template.

What if you want to limit the test to only those products that have an alternative description set in that custom field? Easy: duplicate your default product template and name it something like “tested product template.” Then use that template on products that have an alternative description and tweak your template test to test that new control template against the template B you created before to load the alternative description.

I hope this gives some insights and ideas on how to use our plugin more effectively. If you have any further questions or ideas, please let us know.
Thread Starter cutu234
(@cutu234)

1 year, 4 months ago

This sounds very promising. And thanks a lot for pointing out the issue with page views. I will give it a try and post my lessons learned as soon as possible. Using custom templates and custom fields is an elegant idea.

Will keep you posted.

Thread Starter cutu234
(@cutu234)

1 year, 4 months ago

The CSS test seems to work just fine. So far so good. The template test was a bit more work, since Woocommerce does not have a built-in feature for product templates. I had to add this manually. The product template is working, but I can’t choose products in the template test setting. The only value in the dropdown is pages (= “Seiten” in the screenshot):

Is “pages” ok for this test?

Thread Starter cutu234
(@cutu234)

1 year, 4 months ago

I’ve just tested it but the test seems not to work with a custom product template. No query args are added to the URL. The content from the template is loaded properly:

https://demo.my-blog-shop.de/produkt/neu/
Plugin Author David Aguilera
(@davilera)

1 year, 4 months ago
The template test was a bit more work, since Woocommerce does not have a built-in feature for product templates. I had to add this manually.

Are you sure about that? I think WooCommerce (like any other custom post type in WordPress) supports templates natively. Here’s what you gotta do:
- First of all, you need a template designed specifically for WooCommerce products. That template should be named single-product.php. If, for example, you’re testing this on Storefront, you simply need to copy single.php into single-product.php.
- Now let’s create two more templates by duplicating, once again, single.php and name them nab-product-a.php and nab-product-b.php.
- In both templates, you have to add a comment at the very top of its source code to (a) name the template and (b) specify the post types it applies to. Something like this:
```
<?php
/**
 * Template Name: Tested Product Template A
 * Template Post Type: product
 */
```
- Finally, you can create the test. If you only want to test some products, assign them the “Tested Product Template A” and test that template against “Tested Product Template B.” If you want to test all products (and assuming no product was set to use “Tested Product Template A”), test the “Default Template” against, again, “Tested Product Template B.”
As far as I know, the most important bit here is your having the single-product.php template. If you don’t, I think you won’t be able to select other templates…

The product template is working, but I can’t choose products in the template test setting. The only value in the dropdown is pages (= “Seiten” in the screenshot)

Once you have two or more product templates (as I just described), you should be able to.

Please give it a shot and let us know if/how it worked!
Thread Starter cutu234
(@cutu234)

1 year, 4 months ago
It won’t work like this. The single.php is the template for the standard post. We can use it for CPTs, but it will not contain the functionality for Woocommerce products. I’ve just tested it using the storefront theme.

I can choose between templates, but the frontend will show just the editor content, but not elements like add-to-cart button etc. See the screenshots, please:

No custom templates:

With custom template:

https://demo.my-blog-shop.de/produkt/neu/

The product is now shown like a standard post and not like a product.
- This reply was modified 1 year, 4 months ago by cutu234.
Plugin Author David Aguilera
(@davilera)

1 year, 4 months ago

The single.php is the template for the standard post. We can use it for CPTs, but it will not contain the functionality for Woocommerce products. […] I can choose between templates, but the frontend will show just the editor content, but not elements like add-to-cart button etc

You’re absolutely right. When I tested this locally, I missed that teeny tiny detail… But, luckily for us, it has an easy fix.

Instead of using your theme’s single.php to create the three templates I mentioned in my previous response, you need to use the template included in WooCommerce: plugins/woocommerce/templates/single-product.php. Just keep in mind you’ll have to tweak the opening comments in nab-product-a.php and nab-product-b.php to add their Template Names and the Template Post Type they apply to (i.e. product).

Also, please notice I used different names for your A and B templates. IIRC, naming your template single-{type}-{x}.php means that the template will be automatically applied to posts whose type is type, and whose ID is x if x is a number or whose post name is x if x is a string (like yours is).

Please try this and let us know if/how it went.
Thread Starter cutu234
(@cutu234)

1 year, 4 months ago
Thank you very much. That’s a good starting point, but we are not out of the woods yet. I am fully aware that my question is way beyond the scope of this forum. I appreciate your help. Having said this, I’m sure that this will be a very useful addition to your documentation. It will make the template test super versatile.

Now, I copied the content of the single product template to the new master template and created two additional template files:

child-theme/single-product.php
child-theme/nab-product-a.php
child-theme/nab-product-b.php

I added two lines to each template header:
```
* Template Name: Nab-0
 * Template Post Type: product
```
```
* Template Name: Nab-1
 * Template Post Type: product
```
This makes the templates available on the product edit page. So far so good. This does not give us full access to the content that is called like so:

<?php wc_get_template_part( 'content', 'single-product' ); ?>

I changed this is template b child-theme/nab-product-b.php to:

<?php wc_get_template_part( 'content', 'single-product-nab1' ); ?>

and created an additional template:

child-theme/woocommerce/content-single-product-nab1.php

I can now change the template. This totally works. The main content, however, is called via this action hook:

do_action( 'woocommerce_after_single_product_summary' );

For test purposes, I added some dummy content like this:
```
add_action( 'woocommerce_after_single_product_summary', 'some_custom_stuff', 30 );
function some_custom_stuff()
{
echo '<p>Adding some custom content</p>';
}
do_action( 'woocommerce_after_single_product_summary' )
```
This works, but how would I address, for example, just the content of the editor?

Thank you!

Mike
Plugin Author David Aguilera
(@davilera)

1 year, 4 months ago
That’s awesome! I’m happy to see you were finally able to set it up.

This works, but how would I address, for example, just the content of the editor?

This, indeed, is a little bit more complicated than I had first anticipated. I assumed WooCommerce templates would print a product’s content using some helper functions called directly from the template itself (something similar, for example, to WordPress’ the_content function). Had that been the case, then you could simply replace one function call with another function call and, thus, replace the original content with the content defined in an ACF or something similar.

But, as I said, it looks like I was wrong. WooCommerce outputs product pages using a combination of filters and actions… so that’s what you need to target first.

For example, if you want to replace the product’s summary, you need to remove WooCommerce’s default action to print it:
```
remove_action(
  'woocommerce_single_product_summary',
  'woocommerce_template_single_excerpt', 
  20 
);
```
and replace it with something else:
```
add_action(
  'woocommerce_single_product_summary',
  function() {
    echo '<p>Something else</p>';
  }, 
  20 
);
```
or load yet another template part (as WC does with single-product/short-description.php).

You can remove that hook and add the new one in your template B, just make sure you do it before the line where WordPress runs:
```
do_action( 'woocommerce_single_product_summary' );
```
Now, I know this is not ideal. Perhaps it’d be better if you could just create a PHP test where you remove one hook and add the new one as part of the variant… and that’s precisely what we’re working on right now. So, if you’re interested in that, just let me know via email and I’ll be happy to share a beta version with you (you can use the support thread you opened a few days ago).
Thread Starter cutu234
(@cutu234)

1 year, 4 months ago
Thanks, David!

It’s even a little bit more complicated. We actually have to remove the description tab first and create a custom one. This totally works. Code goes into child-theme/woocommerce/content-single-product-nab1.php (in this case) right after do_action( 'woocommerce_single_product_summary' );
```
add_filter('woocommerce_product_tabs', 'replace_description_tab');
function replace_description_tab($tabs)
{
unset($tabs['description']);
$tabs['custom_tab'] = array(
'title'    => 'Custom Tab',
'priority' => 10,
'callback' => 'custom_tab_content'
);
return $tabs;
}
function custom_tab_content()
{
echo '<h2>Some Text</h2>';
echo '<p>This is custom tab content.</p>';
}
?>
```
However, I totally agree that this method is quite cumbersome. A PHP test might be a much better option. Will gladly test beta versions.
Plugin Author David Aguilera
(@davilera)

1 year, 4 months ago

It’s even a little bit more complicated. We actually have to remove the description tab first and create a custom one. […]

Yup, once again, you’re totally right. I used the short description example because it was a little bit easier to explain the gist of such a test. In the end, it’s all about finding the appropriate WC hooks and tweaking them as needed. But thanks for sharing how you applied the test on the products full description! It’s a nice addition.

[…] this method is quite cumbersome. A PHP test might be a much better option. Will gladly test beta versions.

Agree. It’s almost ready. I’ll let you know when it is.