Veteran Owned & Operated
I recently worked on a project where the client wanted to display the active WooCommerce Variation Description in the default Product Description Tab.
The variation description is usually output in the product summary area of the single product page. This variation description is not visible by default. It displays once a customer chooses the appropriate product options (called attributes). This includes things like size, color, etc.
One these options are chosen, the variation description usually appears in the product summary area right below the product options selections.
So as I mentioned, the client did not want this to display in that location. They wanted it to be moved down to the product description tab which outputs below the product image / gallery and product summary area.
So what I ended up doing was copying the active variation description and appending it to the description tab area dynamically with jQuery.
Below is the code you can add to your themes functions.php file to Move the WooCommerce Single Product Variation Description to the Product Description Tab.
If you want to modify where you append the variation description to, simply change ‘#tab-description’ on line 11 in the snippet to a different element on the Single Product page.
Let me know if this helps you! A like, a share, anything at all to promote my content would is appreciated! 🙂
| <?php | |
| // Move Variation Description to Product Description Tab | |
| add_action( 'wp_footer', 'ec_child_modify_wc_variation_desc_position' ); | |
| function ec_child_modify_wc_variation_desc_position() { ?> | |
| <script> | |
| (function($) { | |
| $(document).on( 'found_variation', function() { | |
| var desc = $( '.woocommerce-variation.single_variation' ).find( '.woocommerce-variation-description' ).html(); | |
| var $entry_summary = $( '#tab-description' ), $wc_var_desc = $entry_summary.find( '.woocommerce-variation-description' ); | |
| if ( $wc_var_desc.length == 0 ) { | |
| $entry_summary.append( '<div class="woocommerce-variation-description"></div>' ); | |
| } | |
| $entry_summary.find( '.woocommerce-variation-description' ).html( desc ); | |
| }); | |
| })( jQuery ); | |
| </script> | |
| <style> | |
| form.variations_form .woocommerce-variation-description { | |
| display: none; | |
| } | |
| </style> | |
| <?php } |
This is great, just working out how to add it to a new tab!
Hi Adrian,
Do you mean creating a new custom product tab and adding it to that new custom product tab?