WooCommerce Variation Attributes Script
Budget: $10 – $30 AUD
Wondering if you can help me with something quick. We have a function that displays attributes table in description.
Goal: We have single products i.e. SKUXXX and the same products grouped as a Variation. SKUXXX_var. We would like to display the attribute information for SKUXXX when SKUXXX_var is selected from the variation dropdown.
What we want to do is on variation page:
When variation is changed to SKUXXX_var, we pull in additionalInformation from SKUXXX
1. We get variationSKU trim _var from end of SKU
2. Use wc_get_product_id_by_sku( $sku ); withour fixed SKU above and get this SKUs additional information.
3. JS to refresh this table based on variation selected.
Can you help us with this?
Below is the current function changing the price based on selected variation and displaying parent variation attributes.
// Tab content (two columns)
function other_details_tab_content() {
global $product;
$heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
$heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );
?>
<!-- Temporary styles (to be removed and inserted in the theme styles.css file) -->
<style>
.single-product .half-col{float:left; width:48%;}
.single-product .half-col.first{margin-right:4%;}
.single-product .half-col > h3{font-size:1.3em;}
</style>
<!-- 1. Product description -->
<div class="half-col first">
<h4><?php _e("Product details", "woocommerce"); ?></h4>
<?php if ( $heading ) : ?>
<h3><?php echo $heading; ?></h3>
<?php endif; ?>
<?php the_content(); ?>
</div>
<!-- 2. Product Additional information -->
<div class="half-col last">
<div class="propertiesheader"><a class="propertiesheading" id="propertieslink"><?php _e("Properties", "woocommerce"); ?></a></div>
<?php if ( $heading2 ) : ?>
<h3><?php echo $heading2; ?></h3>
<?php endif; ?>
<?php do_action( 'woocommerce_product_additional_information', $product ); ?>
</div>
<?php
}
================================
add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
global $product, $post;
if ( $product->is_type( 'variable' ) ) {
add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
}
}
function replace_variation_single_price() {
?>
<style>
.woocommerce-variation-price {
display: none !important;
}
.woocommerce-variation-availability {
display: none !important;
}
</style>
<script>
jQuery(document).ready(function($) {
var priceselector = '.product p.price';
var originalprice = $(priceselector).html();
$( document ).on('show_variation', function() {
//$(priceselector).html($('.single_variation .woocommerce-variation-price').html());
$(priceselector).html($('.single_variation .woocommerce-variation-price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
});
$( document ).on('hide_variation', function() {
$(priceselector).html(originalprice);
});
});
</script>
<?php
}
Goal: We have single products i.e. SKUXXX and the same products grouped as a Variation. SKUXXX_var. We would like to display the attribute information for SKUXXX when SKUXXX_var is selected from the variation dropdown.
What we want to do is on variation page:
When variation is changed to SKUXXX_var, we pull in additionalInformation from SKUXXX
1. We get variationSKU trim _var from end of SKU
2. Use wc_get_product_id_by_sku( $sku ); withour fixed SKU above and get this SKUs additional information.
3. JS to refresh this table based on variation selected.
Can you help us with this?
Below is the current function changing the price based on selected variation and displaying parent variation attributes.
// Tab content (two columns)
function other_details_tab_content() {
global $product;
$heading = esc_html( apply_filters( 'woocommerce_product_description_heading', __( 'Description', 'woocommerce' ) ) );
$heading2 = esc_html( apply_filters( 'woocommerce_product_additional_information_heading', __( 'Additional information', 'woocommerce' ) ) );
?>
<!-- Temporary styles (to be removed and inserted in the theme styles.css file) -->
<style>
.single-product .half-col{float:left; width:48%;}
.single-product .half-col.first{margin-right:4%;}
.single-product .half-col > h3{font-size:1.3em;}
</style>
<!-- 1. Product description -->
<div class="half-col first">
<h4><?php _e("Product details", "woocommerce"); ?></h4>
<?php if ( $heading ) : ?>
<h3><?php echo $heading; ?></h3>
<?php endif; ?>
<?php the_content(); ?>
</div>
<!-- 2. Product Additional information -->
<div class="half-col last">
<div class="propertiesheader"><a class="propertiesheading" id="propertieslink"><?php _e("Properties", "woocommerce"); ?></a></div>
<?php if ( $heading2 ) : ?>
<h3><?php echo $heading2; ?></h3>
<?php endif; ?>
<?php do_action( 'woocommerce_product_additional_information', $product ); ?>
</div>
<?php
}
================================
add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
global $product, $post;
if ( $product->is_type( 'variable' ) ) {
add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
}
}
function replace_variation_single_price() {
?>
<style>
.woocommerce-variation-price {
display: none !important;
}
.woocommerce-variation-availability {
display: none !important;
}
</style>
<script>
jQuery(document).ready(function($) {
var priceselector = '.product p.price';
var originalprice = $(priceselector).html();
$( document ).on('show_variation', function() {
//$(priceselector).html($('.single_variation .woocommerce-variation-price').html());
$(priceselector).html($('.single_variation .woocommerce-variation-price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
});
$( document ).on('hide_variation', function() {
$(priceselector).html(originalprice);
});
});
</script>
<?php
}