How to display attribute descriptions after variation selection on WooCommerce product pages
Published:12 February 2023/inWooCommerce, WordPress
In this tutorial we’ll go through a basic example of how to dynamically display attribute descriptions, which change depending on variation selection, on product pages. We’ll do this by overriding WooCommerce template files and adding custom jQuery and CSS.
Tools required for this tutorial
To follow the steps in this tutorial you’ll need the following:
- WordPress (tested with v6.1.1)
- WooCommerce (tested with v7.1.0)
- jQuery (tested with 3.6.1) referenced within your theme
- Basic knowledge of WooCommerce template overrides
Adding a new product attribute and configuring its terms
We first want to create a new product attribute. For this example, we have added an attribute named ‘Fragrances’. Once the attribute is created, its terms need to be configured. Each term should be created with a name, a slug, and a short description.
After a term has been created, we will need to make note of its tag ID, as we will be using it later. To find the tag ID, hover over the term name, then look for the tag_ID value in the status bar. This can also be done by editing the term and looking at the URL (the URL should look something like this – https://website.com/wp-admin/term.php?taxonomy=pa_fragrance&tag_ID=140&post_type=product&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dpa_fragrance%26post_type%3Dproduct). In this example, our tag ID is 140.
Copying WooCommerce template files to theme directory
Next, we need to make a copy of two specific templates – ‘variable.php’ (which can be found in the woocommerce/single-product/add-to-cart directory) and ‘single-product.php’ (which can be found in the woocommerce/single-product.php directory), and add these to our theme.
WooCommerce template files can be found within the wp-content/plugins/woocommerce/templates/ directory. The templates should be copied into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.
Adding custom code to the copied template files
Now, we need to edit the overriden template files that we just added. For ‘variable.php’, we will be adding our custom code within the div class ‘single_variation_wrap’.
Firstly, we need to create a new variable for our term description, telling it to get the term ID we created earlier. Then, we print its contents inside of a new div:
<?php
// Get term description
$botanic = get_term(140)->description;
?>
<div class="select-default-hidden select-botanic-shown"><?php print_R($botanic); ?></div>Now we need to use jQuery to show/hide the new div that we created on change, and add some CSS to hide the default WooCommerce description box:
<style>
.select-default-shown, .select-default-hidden {margin-bottom: 30px;}
.woocommerce-variation-description {
opacity: 0 !important;
display: none !important;
}
</style>
<script>
jQuery(function($) {
$('#pa_fragrance').change(function() {
$('.select-default-hidden').hide();
$('.select-default-shown').show();
$('.select-' + $(this).val() + '-shown').show();
$('.select-' + $(this).val() + '-hidden').hide();
}).change();
});
</script>Finally, we just need to add the same jQuery and CSS that we added above into the single-product.php file (these should be added before the end of the file).
Recap
To conclude, this tutorial should have helped you to dynamically display changing attribute descriptions after variation selection on product pages.