Output Woocommerce product variations as a table within a tab on the single product page

  • Download Gist
Woocommerce - output product variations in tab
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
// Add to functions.php
 
/*===================================================
Created by sk from Renegade Empire with help
from these sources:
http://docs.woothemes.com/document/editing-product-data-tabs/
http://www.sean-barton.co.uk/2013/03/remove-woocommerce-20-reviews-tab/#.UYnWe7XfB6N
http://www.sean-barton.co.uk/2013/03/sb-add-woocommerce-tabs-wordpress-plugin/#.UYrYL7XfB6M
 
====================================================*/
 
 
 
/*===================================================
Options
====================================================*/
 
$re_wcvt_options = array(
'tab_title' => 'Product Variations', // change the tile of the tab
'sku_title' => 'REF #', // change the sku column heading
'show_price' => 'yes', // show price column: yes or no
'show_description' => 'yes', // show description column: yes or no
'tab_priority' => '5', // 5 is good to make the tab appear first
);
 
 
/*===================================================
Add the tab
====================================================*/
 
 
add_filter( 'woocommerce_product_tabs', 're_woo_product_variations_tab' );
function re_woo_product_variations_tab() {
 
global $woocommerce, $product, $post, $re_wcvt_options;
// $available_variations = $product->get_available_variations();
// $attributes = $product->get_attributes();
if (is_product() and $product->product_type == 'variable') {
// Adds the new tab
$tabs['variations_table'] = array(
'title' => __( $re_wcvt_options['tab_title'], 'woocommerce' ),
'priority' => 50,
'callback' => 're_woo_product_variations_tab_content'
);
return $tabs;
}
}
 
/*===================================================
Build the tab content
====================================================*/
 
function re_woo_product_variations_tab_content() {
 
global $woocommerce, $product, $post, $re_wcvt_options;
$available_variations = $product->get_available_variations();
$attributes = $product->get_attributes();
// The new tab content
//echo '<h2>Product Variations</h2>';
//echo '<p>Here\'s your new product tab.</p>';
?>
<table class="table table-striped table-hover table-bordered varations-table tablesorter">
<thead>
<tr>
<th><?php echo $re_wcvt_options['sku_title']; ?></th>
<?php
// Show description if option is set to yes
if ($re_wcvt_options['show_description'] == 'yes') : ?>
<th>Description</th>
<?php endif; ?>
<?php foreach ( $attributes as $name => $options) :?>
<th>
<?php
//echo $woocommerce->attribute_label($name);
$attr_name = $options['name'];
if (0 === strpos($attr_name, 'pa_')){
$attr_name = $woocommerce->attribute_label($attr_name);
}
echo $attr_name;
?>
</th>
<?php endforeach;?>
<?php
// Show price if option is set to yes
if ($re_wcvt_options['show_price'] == 'yes') : ?>
<th>Price</th>
<?php endif; ?>
<th class="var-qty">&nbsp;</th>
<th class="var-add-to-cart">&nbsp;</th>
</tr>
</thead>
<tbody>
<?php
/*
echo '<pre>';
print_r($re_wcvt_options);
echo '</pre>';
*/
?>
<?php foreach ($available_variations as $prod_variation) : ?>
<?php
// get some vars to work with
$post_id = $prod_variation['variation_id'];
$post_object = get_post($post_id);
//echo '<pre>';
//print_r($prod_variation);
//echo '</pre>';
?>
<tr>
<td>
<?php
// echo substr($prod_variation['sku'], 5, 100) ; // output SKU but trim the first part that is added
echo $prod_variation['sku'];
?>
</td>
<?php
// Show description if option is set to yes
if ($re_wcvt_options['show_description'] == 'yes') : ?>
<td>
<?php
$variation_desc = get_post_meta( $post_object->ID, '_description', true);
if ( !empty($post_object->post_content)){
$variation_desc = $post_object->post_content; // post content
} elseif (!empty($variation_desc)) {
$variation_desc = get_post_meta( $post_object->ID, '_description', true); // get meta description
} else {
$variation_desc = get_the_title($product->id); // parent title
}
echo $variation_desc;
?>
</td>
<?php endif; ?>
<?php foreach ($prod_variation['attributes'] as $attr_name => $attr_value) : ?>
<td>
<?php
// Get the correct variation values
if (strpos($attr_name, '_pa_')){ // variation is a pre-definted attribute
$attr_name = substr($attr_name, 10);
$attr = get_term_by('slug', $attr_value, $attr_name);
$attr_value = $attr->name;
} else { // variation is a custom attribute
//$attr = maybe_unserialize( get_post_meta( $post->ID, '_product_attributes' ) );
//$attr_value = var_dump($attr);
//$attr = get_term_by('slug', $attr_value, $attr_name);
//$attr_value = $attr->name;
}
echo $attr_value;
?>
</td>
<?php endforeach;?>
<?php
// Show price if option is set to yes
if ($re_wcvt_options['show_price'] == 'yes') : ?>
<td><?php echo get_woocommerce_currency_symbol() . get_post_meta( $post_object->ID, '_price', true); ?></td>
<?php endif; ?>
<form action="<?php echo do_shortcode('[add_to_cart_url id="'.$product->id.'"]'); ?>" class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="<?php echo $product->id; ?>">
<td>
<?php woocommerce_quantity_input(); ?>
</td>
<td>
<input type="hidden" name="variation_id" value="<?php echo $post_id; ?>">
<?php foreach ($prod_variation['attributes'] as $attr_name => $attr_value) : ?>
<input type="hidden" name="<?php echo sanitize_title($attr_name); ?>" value="<?php echo $attr_value ;?>">
<?php endforeach;?>
<button type="submit" class="btn btn-small button add-to" type="button">Add to cart</button>
</td>
</form>
</tr>
<?php endforeach;?>
</tbody>
</table>
 
<?php
//echo '<pre>';
//print_r($prod_variation['attributes']);
//echo '</pre>';
?>
<?php
}
 
/*===================================================
Tab Position
====================================================*/
 
 
add_filter( 'woocommerce_product_tabs', 're_woo_move_variation_table_tab', 98);
function re_woo_move_variation_table_tab($tabs) {
global $re_wcvt_options;
if ($tabs['variations_table']) {
$tabs['variations_table']['priority'] = $re_wcvt_options['tab_priority'];
}
return $tabs;
}

Hey,

I was just wondering if you had managed to sort out the quantity add to cart issue with this, as I am still playing around with getting this working for our site?

Cheers.

Not yet unfortunately, should be able to have it fixed in about 1 month

Hi renegadesk, thanks for this, where do I place this code though?

Hi Manmademan,

I have put this code into my child themes function.php file. This allows it to be edited without affecting the main child themes code.

Also, a quick note that with Woocommerce 2.0 the way to add new tabs has changed. So instead of using the function woocommerce_product_custom_tab I now use the following:

function product_variations_tab($tabs) {
$tabs['product_variations'] = array(
'title' => __( 'Product Variations', 'woocommerce' ),
'priority' => 1,
'callback' => 'woocommerce_product_custom_panel'
);

return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'product_variations_tab');

Working on some updates now to bring this up to WC 2.0. Cheers @Jbezza for the code too! Have you got it working for different quantities? It was just due to the quantity input fields being outside the form (duh!). Updating gist now for this small change, further changes coming soon.

Great work! I have just added this onto my site now, unfortunately I did not see that it was outside of the form either d'oh! Code blindness is a terrible affliction lol. Great news that your also updating this for 2.0! Thanks once again.

This works with WC 2.0 now! Only issue is that it doesn't show non-alphanumerical chars within attribute values. Working on it now. Probably good idea to turn this into a full repository on github instead of just a gist so I can have some more useful instructions

hi i am rookie i want to ask you How i put the price in the table for all individual output variations thank you

hello,

Am also wanna ask same thing that how can we put sale price in table along with each variation in row.

Like e.g:

Ref # Description Sale Price Quantity ADD To CART

Thanks

Got the answer .

echo get_post_meta( $post_object->ID, '_price', true);

where to put that on the Line 1-131

put this line anywhere you wanna show sales price

may i ask about arrangement of the attributes i notice that if i have only 2 attributes it's work perfectly but when i have more than 3 attributes some of the line it missing their position like they swapped like color attribute normally it in the 2nd column but it jump to 3rd column something like that. how i can fix that. thank you for you generosity.

heads up there is a stray closing </div> on line 123. very neat code, btw.

Thanks for the feedback and comments everyone! It's getting to the point where I'm working it into a plugin now so I can add features that can be switched on/off from backend.

Nice one @Rajbir4all i'll have to add that as an option when this turns into a plugin!

@hiphones it works fine with any number of attributes from my tests. You have to make sure that on each of your variations have a value selected for each attribute.

Thanks @helgatheviking and I've removed the stray!

Added some basic options now you can just edit the options part of the code to change.

suppose it want "empty price" to show as "call for price" any code i need to add on sir. thank you for your generosity

Hi,

I've added this to my functions file, but it removes the other tabs that would be shown instead of adding it alongside the description and additional information tabs.

I'm using mystile as a theme, and have the option to display attribute tabs selected.

Is this supposed to replace or add an additional tab?

Cheers

Hi,
You have done good work.II' ve also used it on my website.But the issue is it removes other tabs which are required for product details.
Any solutions? Actually I am searching for the solution which let a single add to cart button for all selected variations and quantity.

sorry i try all the ways to make all the variations not misplace i have 4 attributes here http://www.hi-phones.com/?product=ipad-mini

Hi there,
Nice code!
Although I've got the same problem it replaces existing tabs. Is there any solution to it?
Many thanks in advance.
PS: How to make it show qty in stock?

Hey, I figured it out.. you create the new tab but it overrides the existing ones. The solution is to pass the $tabs variable (that contains all existing tabs) through the function, and then append the variables of the current tab to it.
I did it this way:
declare function like this 're_woo_product_variations_tab($tabs)'
then add an 'else { return $tabs; }' /for non-variable products/ in the end of the function.
That's it! now it works perfectly.

This is looking promising, thanks for adding. I think a few of us are looking for the functionality that you can get when you have grouped products but by using variations. This would display each variation with it's own quantity and then a single add to cart button. More here: http://wordpress.stackexchange.com/questions/82949/woocommerce-multiple-input-field-for-multiple-product-variations

Hello,

Is it possible that same product variations table can display above the Tabs, actually i don't wanna display it in tabs, just wanna show directly above the tabs .

Please suggest ?

Thanks

Fantastic! Very handy stuff!

The new created tab is working fine but there is no data in other tabs

Hi, This was working well until the new version of Woocommerce. The items will now no longer add to cart as the information sent to the cart regarding variables is now in a new format. I think it needs to send 3 hidden variables - "add-to-cart", "product_id" and "variation_id". Currently it is sending "variation_id" and "attribute_pa_format".

Also the tab is created, but it removes all other tabs. Any ideas?

Just wondering if there is an update for this since the latest Woocommerce update? The add to cart button no longer works

This worked for me replace line 169 to 181 above with the following:


<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $product->id; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">

    <td>
    <?php woocommerce_quantity_input(); ?>
    </td>
    <td>

    <input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
    <input type="hidden" name="product_id" value="<?php echo $product->id; ?>" />
    <input type="hidden" name="variation_id" value="<?php echo $post_id; ?>" />
    <div class="variations_button">
        <?php foreach ($prod_variation['attributes'] as $attr_name => $attr_value) : ?>
            <input type="hidden" name="<?php echo sanitize_title($attr_name); ?>" value="<?php echo $attr_value ;?>">
            <?php endforeach;?>
        <button type="submit" class="btn btn-small button add-to"><?php echo $product->single_add_to_cart_text(); ?></button>
    </div>  
    </td>
</form>

emilysnothere, thanks, now it works. Woocommerce 2.1.6

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.