I want show price * quantity in woocommerce single product page. Codes below is working but until quantity does not change shows NAN for price.
add_action( 'woocommerce_before_add_to_cart_button', 'woocommerce_total_product_variation_price' );
function woocommerce_total_product_variation_price() {
global $woocommerce, $product;
// setup base html... We are going to rewrite this with the standard selected variation
echo sprintf('<div id="product_total_price" style="margin-bottom:20px; display: block;">%s %s</div>',__(' price:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
?>
<script>
jQuery(function($){
var currency = currency = ' <?php echo get_woocommerce_currency_symbol(); ?>';
function priceformat() {
var product_total = parseFloat(jQuery('.woocommerce-variation-price .amount').text().replace(/ /g ,'').replace(/€/g ,'').replace(/,/g ,'.')) * parseFloat(jQuery('.qty').val());
var product_total2 = product_total.toFixed(3);
var product_total3 = product_total2.toString().replace(/\./g, ',');
jQuery('#product_total_price .price').html( product_total3 + ' ' + currency );
}
jQuery('[name=quantity]').change(function(){
priceformat();
});
jQuery('body').on('change','.variations select',function(){
priceformat();
});
priceformat();
});
</script>
<?php }
Related
I have a store that has long product descriptions and I want to truncate the description to show 100 words and then a button that says "read more" and "read less".
Actually I am using Reduce product long description in Woocommerce answer code that can limit short description length by specific word number count and it works.
This requires a minor tweak to the existing code that instead of leaving out some of the $content, keeps all of the $content but shows only part of it until the read button is clicked.
Then it uses jQuery which has control over the read more/less button where either all $content or only part of it is shown.
NOTE: CSS (styling) and further jQuery adjustments are theme dependent. This answer contains the basis of a read more / less button. Each theme has different and specific requirements so further adaptation of the display/functionality must be provided by yourself
Explanation via comment tags provided in the code
// Shorten product long descrition with read more button
function filter_the_content( $content ) {
// Only for single product pages
if( ! is_product() ) return $content;
// Set the limit of words
$limit = 14;
// Strip p tags if needed
$content = str_replace( array( '<p>', '</p>' ), '', $content );
// If the content is longer than the predetermined limit
if ( str_word_count( $content, 0 ) > $limit ) {
// Returns an associative array, where the key is the numeric position of the word inside the string and the value is the actual word itself
$arr = str_word_count( $content, 2 );
// Return all the keys or a subset of the keys of an array
$pos = array_keys( $arr );
// First part
$text = '<p>' . substr( $content, 0, $pos[$limit] ) . '<span id="dots">...</span>';
// More part
$text .= '<span id="more">' . substr( $content, $pos[$limit] ) . '</span></p>';
// Read button
$text .= '<button id="read-button"></button>';
$content = force_balance_tags( $text ); // needded
}
?>
<script type="text/javascript">
jQuery(document).ready( function ($) {
// Settings
var read_more_btn_txt = 'Read more';
var read_less_btn_txt = 'Read less';
// Selectors
var more = '#more';
var read_button = '#read-button';
var dots = '#dots';
// On load
$( more ).hide();
$( read_button ).html( read_more_btn_txt );
// On click
$( read_button ).on( 'click', function() {
if ( $( more ).is( ':hidden' ) ) {
$( more ).show();
$( dots ).hide();
$( read_button ).html( read_less_btn_txt );
} else {
$( more ).hide();
$( dots ).show();
$( read_button ).html( read_more_btn_txt );
}
});
});
</script>
<?php
return $content;
}
add_filter( 'the_content', 'filter_the_content', 10, 1 );
I'm looking for some help getting the WooCommerce variable product title to change based on variations. In this specific case I would like the title to change when a color is selected, like "Productname Black".
Is there any easy snippet to get this to work?
UPDATE 04-2021 - Successfully tested on WooCommerce 5.1+ (handle custom product attributes)
The following code, will add to variable product title the value(s) of the chosen variation from specific defined product attribute(s) (or all of them optionally too):
The code:
// Defining product Attributes term names to be displayed on variable product title
add_filter( 'woocommerce_available_variation', 'filter_available_variation_attributes', 10, 3 );
function filter_available_variation_attributes( $data, $product, $variation ){
// Here define the product attribute(s) slug(s) which values will be added to the product title
// Or replace the array with 'all' string to display all attribute values
$attribute_names = array('Custom', 'Color');
foreach( $data['attributes'] as $attribute => $value ) {
$attribute = str_replace('attribute_', '', $attribute);
$attribute_name = wc_attribute_label($attribute, $variation);
if ( ( is_array($attribute_names) && in_array($attribute_name, $attribute_names) ) || $attribute_names === 'all' ) {
$value = taxonomy_exists($attribute) ? get_term_by( 'slug', $value, $attribute )->name : $value;
$data['for_title'][$attribute_name] = $value;
}
}
return $data;
}
// Display to variable product title, defined product Attributes term names
add_action( 'woocommerce_after_variations_form', 'add_variation_attribute_on_product_title' );
function add_variation_attribute_on_product_title(){
// Here define the separator string
$separator = ' - ';
?>
<script type="text/javascript">
(function($){
var name = '<?php global $product; echo $product->get_name(); ?>';
$('form.cart').on('show_variation', function(event, data) {
var text = '';
$.each( data.for_title, function( key, value ) {
text += '<?php echo $separator; ?>' + value;
});
$('.product_title').text( name + text );
}).on('hide_variation', function(event, data) {
$('.product_title').text( name );
});
})(jQuery);
</script>
<?php
}
Displaying all attributes
You can display all variations attributes values for the chosen variation by defining the variable $attribute_names to "all" so like:
$attribute_names = "all";
Code goes in functions.php file of your active child theme (or theme) or also in any plugin file.
Tested and works… you will get something like:
I am having products on backorder in a woocommerce store.
I am trying to create an error message if the value of the quantity input field is a higher/exceeds the products stock - see image below.
I also want this to go away if the customer goes below current stock.
If possible I also want the error to show in the cart page as well.
This is what I got this far:
function woocommerce_stock_now() {
global $woocommerce, $product;
?>
<script>
jQuery(function ($) {
var stocknow = <?php echo $qty = $product->get_stock_quantity()(); ?>;
var qtyinput = $('[name=quantity]').val();
var errormessagestock = '<p class="errormessagestock">'(stocknow.value - qtynow.value) . ' items are on backorder and will have a little longer delivery time.</p>';
$('#qtyinput').html(this.value);
$('[name=quantity]').change(function () {
if (qtyinput.value > $stocknow) {
$('stock').html(errormessagestock);
}
});
console.log("qtynow", this.value);
});
</script>
<?php
}
Tyr this:
add_action( 'woocommerce_single_product_summary', 'woocommerce_stock_now' );
function woocommerce_stock_now() {
global $product;
$stocknow = $product->get_stock_quantity();
?>
<script>
jQuery(document).on('input change','[name=quantity]',function() {
var stocknow = '<?php echo $stocknow; ?>';
var qtyinput = jQuery(this).val();
var overdue = parseInt(qtyinput) - parseInt(stocknow);
if (parseInt(qtyinput) > parseInt(stocknow)) {
var errormessagestock = '<p class="errormessagestock">('+overdue+') items are on backorder and will have a little longer delivery time.</p>';
console.log(errormessagestock);
//$('stock').html(errormessagestock);
}
});
</script>
<?php
}
console.log(errormessagestock) will return your message now you can set/print this message accordingly.
I am using WooCommerce and I'm trying to display product variation SKUs on the product page below the product title. I managed to find this code, which works but displays the SKU in the wrong place:
// Display product variations SKU and GTIN info
add_filter( 'woocommerce_available_variation', 'display_variation_sku_and_gtin', 20, 3 );
function display_variation_sku_and_gtin( $variation_data, $product, $variation ) {
$html = ''; // Initializing
// Inserting SKU
if( ! empty( $variation_data['sku'] ) ){
$html .= '</div><div class="woocommerce-variation-sku">' . __('SKU:') . ' ' . $variation_data['sku'];
}
// Using the variation description to add dynamically the SKU and the GTIN
$variation_data['variation_description'] .= $html;
return $variation_data;
}
Can anyone help with changing the order of this code so the SKU shows below the product title, or help me with some new code?
Many thanks!
WooCommerce does not provide a specific action hook that will let you add anything right after the product title, that also makes use of the variation data like the hook in your current code. You can work around this by adding an element after the product title via JavaScript/jQuery.
You want this element to dynamically change based on the selected variation. Since you do not have access to the variation data directly in the action hook you will have to check the hidden input variation_id that WooCommerce uses to store the selected variation id. Then use AJAX every time that input changes to retrieve the variation SKU belonging to this variation id.
add_action( 'woocommerce_before_single_product', 'show_variation_sku_underneath_product_title' );
function show_variation_sku_underneath_product_title() {
global $product;
if ( $product->is_type('variable') ) {
?>
<script>
jQuery(document).ready(function($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
jQuery.ajax( {
url: '<?php echo admin_url( 'admin-ajax.php'); ?>',
type: 'post',
data: {
action: 'get_variation_sku',
variation_id: $('input.variation_id').val()
},
success: function(data) {
$('h1.product_title').siblings('.variation-sku').remove();
if(data.length > 0) {
$('h1.product_title').after('<p class="variation-sku">' + data + '</p>');
}
}
});
}
});
});
</script>
<?php
}
}
add_action('wp_ajax_get_variation_sku' , 'get_variation_sku');
add_action('wp_ajax_nopriv_get_variation_sku','get_variation_sku');
function get_variation_sku() {
$variation_id = intval( $_POST['variation_id'] );
$sku = '';
if ( $product = wc_get_product( $variation_id ) ) $sku = $product->get_sku();
echo $sku;
wp_die(); // this is required to terminate immediately and return a proper response
}
These code snippets should be added to the functions.php of your child theme or via a plugin like Code Snippets.
I am creating a shortcode that grabs specific content from an url which i passed as a shortcode attribute. The problem happens when this a shortcode is used more than once on a single post. Then the second shortcode overrides the first one. Here is the code. Two values are displayed on the page both both are the same and are pulled from the second shortcode attribute. There should be two separate and different values.
Here is the shortcode code:
<?php
function grabUrl_func( $atts ) {
$url = $atts['url'];
$label = $atts['label'];
$productId = $atts['id'];
?>
<script>
var urlFromSc = <?php echo json_encode($url) ?>;
var buttonLabel = <?php echo json_encode($label) ?>;
jQuery(document).ready(function() {
jQuery.get(urlFromSc, function(response) {
// grab product name
var productName = jQuery(response).find('.product-name');
var productNameContent = productName[1]['innerHTML'];
jQuery('.g-title').append(productNameContent);
// grab image
var productImage = jQuery(response).find('.product-image-gallery');
var productImageContent = productImage[0]['innerHTML'];
jQuery('.g-image').append(productImageContent);
jQuery('.g-image img').slice(1).remove();
// grab price
var productPrice = jQuery(response).find('.price-box');
var productPriceContent = productPrice[0]['innerHTML'];
jQuery('.g-price').append(productPriceContent);
// grab rating
var productRating = jQuery(response).find('.yotpo');
var productRatingContent = productRating[0]['outerHTML'];
var productId = jQuery(productRatingContent).attr('data-product-id');
var link = jQuery('<a class="productLink" href="' + urlFromSc + '">' + buttonLabel + '</a>' );
jQuery('.g-link').append(link);
});
});
</script>
<?php
$output = '<div class="g-wrapper">'
. '<div class="g-image"></div>'
. '<div class="g-title"></div>'
. '<div class="g-price"></div>'
. '<div class="g-rating">'
. '<div class="yotpo yotpo-main-widget" data-product-id="'.$productId.'"></div>'
. '</div>'
.'<div class="g-link"></div>'
.'</div>';
return $output;
}
add_shortcode( 'grabUrl', 'grabUrl_func' );
?>
Thanks in advance for your help!