Replacing Woocommerce product description with variation product description - Digital Park - Newmarket Web Design
17142
post-template-default,single,single-post,postid-17142,single-format-standard,cookies-not-set,ajax_fade,page_not_loaded,,qode_grid_1300,qode-theme-ver-9.4.2,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

Replacing Woocommerce product description with variation product description

Replacing Woocommerce product description with variation product description

I came across an annoying little feature when using Woocommerce, Woocommerce variation products and the Woocommerce Swatches and Photos plugin. The problem I found was that when you have a Product you add in a description and a short description. But when adding a variation of say Colours you add in another ‘Variation description’.

3 Descriptions?!!

Now annoyingly this variation description only appears when you click on a swatch and is triggered on the dom change. I didn’t really want to mess around to much if at all with Woocommerce or its plugin.

In Woocommerce there is no simple setting that I found to tell the variation description to replace the short description text. Now this maybe due to the version or naming from another plugin could have changed the default class name but I have:

<div itemprop=”description” class=”rd_woo_short_description”></div>

Which is the Woocommerce short description you see in the red area in the image above. When I click on a swatch (the green highlighted box) for a colour varation another description box appears under the swatches.

Now our page is double the size and we have 3 total descriptions on the page.

I spent about 10 – 15 minutes writing a short script to take the variation product description and replace the short description. I admit its still a little buggy in that you have to let the variation description load in as this is updated from the plugin when the swatch changes.

My code does not affect Woocommerce or its plugin ‘Swatches and photos’. 

first a disclaimer, this worked for my theme, but you may need to look at your Woocommerce short description class to see if its the same. secondly, this is not the best solution, but its the only solution I could find at short notice, no real clear plugins solve this issue and around the web does not have many if any related solutions to this problem. I bet with some more time and better search queries you will find a better solution.

First lets write our script:

jQuery.noConflict(); // lets not conflict with other jQuery scripts
jQuery(document).ready(function($){ //I tried (function($){ but it had issues with my theme
"use strict";
var ogd = $('.rd_woo_short_description').html();
$('.swatch-anchor').on('click',function(){
setTimeout(
function()
{
var desc = $('.woocommerce-variation-description').html();
$('.rd_woo_short_description').html(desc);
$('.woocommerce-variation-description').hide();
$('.woocommerce-variation-description').addClass('hideText');
},0);
});
$('.reset_variations').on('click',function(){
$('.rd_woo_short_description').html(ogd);
});
});

Okay so what are we doing here? We need to get the original description from the short description box so that we don’t lose it totally and end up with an empty white space. To do this we use:

var ogd = $('.rd_woo_short_description').html();

Next we want to ‘hijack’ the click of the swatch item so that we know the element has changed colour or product. We do that with the .on(‘click’,function){ code.

$('.swatch-anchor').on('click',function(){

Next was the part I had issues with. I tried to get the data instantly from the woocommerce-variation-description, but it had not loaded as instantly as the click. So I set a timeOut function, with a 0 second execution. Strange I know it works…there could be a better way to do this.

setTimeout(
function()
{},0);

So next we need to look at getting the variation description and set it to a variable so we can use it to replace the current short description. To do that we use the following code:

var desc = $('.woocommerce-variation-description').html();
$('.rd_woo_short_description').html(desc);

We use html to replace the description text. Notice we use .html(); which will return all the data inside the element. The element being .woocommerce-variation-description div.

The next part tells jQuery to replace short description with the new description by telling the div that the new html value is .html(desc); this will replace the current text. We could use .text(); but I’m lazy and .html() just works.

$('.woocommerce-variation-description').hide();
$('.woocommerce-variation-description').addClass('hideText');

The next to call can be the same if you wish to remove one. I added a class in the css called .hideText{display:none !important;} then apply that using the addClass.

.hide(); is the exact same and adds a display:none; to the element. We then close off all our functions.

The next step is to ‘hijack’ the clear button which will reset the all the values on the page. Since we removed the original description from the short description div it no longer exists, we would have to reload the page to see it again. But wait! We thought of this before we removed it. We set this:

var ogd = $('.rd_woo_short_description').html();

ogd is the original gangster description. We have it stored in a variable so we haven’t lost it totally. We could just replace it with the WordPress description version but that may be different again.

So to finish off we replace the original short description with what it had before we started click on the swatches:

$('.reset_variations').on('click',function(){
$('.rd_woo_short_description').html(ogd);
});

Last thing to do now is to add our script to the theme function queue. To do that we use this code in the functions.php file. (remember to add the js file called my-script.js in your theme js folder).

function my_theme_scripts() {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

I know its not the best and has some small issues with the millisecond load of the content before it hides. But its a quick solution and looks much better.

Could I develop this in to a full blow plugin? Probably, but i’m lazy and don’t really have that much free time to do it. But watch this space I might if it becomes a popular issue to solve.