Develop Reference

Get selected variation price and sku and display it to single product in woocommerce

I want to display current selected variation price and sku # woocommerce_before_single_product_summary
How do I get the values and display them on top of the page inline with styling?
I'm working with these resources:
Get and display the selected variation SKU in WooCommerce
Get currently selected variation and data from Woocommerce variable product
WooCommerce: show current SKU and GTIN in variable product page
This is what I have:
// Display product variations SKU and price
add_filter( 'woocommerce_available_variation', 'display_variation_sku_and_price', 20, 3 );
function display_variation_sku_and_price( $variation_data, $product, $variation ) {
$html = ''; // Initializing
// Inserting SKU
if( ! empty( $variation_data['sku'] ) ){
$html .= '</div><div class="woocommerce-variation-sku">' . __('SKU:') . ' ' . $variation_data['sku'];
}
// Inserting price
if( ! empty( $variation_data['price'] ) ){
$html .= '</div><div class="woocommerce-variation-price">' . __('price:') . ' ' . $variation_data['price'];
}
// Using the variation description to add dynamically the SKU and the price
$variation_data['variation_description'] .= $html;
return $variation_data;
}
add_action('woocommerce_before_single_product_summary', 'display_product_sku_and_price', );
function display_product_sku_and_price() {
global $product;
echo '<p>' . __("SKU:") . ' ' . $product->get_sku() . '</p>';
echo '<p>' . __("Price:") . ' ' . $product->get_price() . '</p>';
}
I can make it work inside variations form but not move it outside/up.

PHP function output only updates after click on page

So I was looking for a way to update Pricing for a variable Product (Woocommerce + WP), without showing the Price Range + Final Price (including Variables).
I stumbled upon this script, which seems to work perfectly for my use case. Source - Stackoverflow
It works fine on mobile.
However, in Desktop Browser, it requires me to click on a random place of the page to update the pricing. This is very inconvenient.
Any idea how to fix this?
My coding skills are limited to HTML/CSS and very basic js.
Any help is appreciated.
This is the code:
add_action( 'woocommerce_before_single_product', 'check_if_variable_first' );
function check_if_variable_first(){
if ( is_product() ) {
global $post;
$product = wc_get_product( $post->ID );
if ( $product->is_type( 'variable' ) ) {
// removing the price of variable products
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
global $product;
// Variable product only
if($product->is_type('variable')):
// Main Price
$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
$price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
// Sale Price
$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
sort( $prices );
$saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
if ( $price !== $saleprice && $product->is_on_sale() ) {
$price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
}
?>
<style>
div.woocommerce-variation-price,
div.woocommerce-variation-availability,
div.hidden-variable-price {
height: 0px !important;
overflow:hidden;
position:relative;
line-height: 0px !important;
font-size: 0% !important;
}
</style>
<script>
jQuery(document).ready(function($) {
$('select').blur( function(){
if( '' != $('input.variation_id').val() ){
$('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
console.log($('input.variation_id').val());
} else {
$('p.price').html($('div.hidden-variable-price').html());
if($('p.availability'))
$('p.availability').remove();
console.log('NULL');
}
});
});
</script>
<?php
echo '<p class="price">'.$price.'</p>
<div class="hidden-variable-price" >'.$price.'</div>';
endif;
}
}
}
}
LINK to Image for Usecase explanation - See also Stackoverflow Link where I took the code from

The problem which you are facing seems to be the $('select').blur().
As you want this to change automatically, I suggest changing this to change()..
<script>
jQuery(document).ready(function($) {
$('select').change( function(){
if( '' != $('input.variation_id').val() ){
$('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
console.log($('input.variation_id').val());
} else {
$('p.price').html($('div.hidden-variable-price').html());
if($('p.availability'))
$('p.availability').remove();
console.log('NULL');
}
});
});
</script>
The blur() event occurs when an object loses focus.. In your case, when you click off the screen.
the change() event occurs when the object changes.. In your case, whenever the select option changes

The code above was flawed.
I found a better solution for my use case in this post: Update Woo Variable Price

Including thumbnail captions in RSS feed

Do you know the best way to incorporate the function the_post_thumbnail_caption into a function that gets thumbnail posts for the RSS feed? I am working on a project that requires having captions of thumbnail images populating on an RSS feed and appreciate your time shared on this inquiry.
In other words, I would like to include get_the_post_thumbnail_caption function in this:
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<div>' . get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content;
}
return $content;
}
Would is be best to use the && operator?

I was able to solve what I was trying to do, if anyone is trying to add captions from thumbnails to their RSS feed all you need to do is add get_the_post_thumbnail_caption like this:
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<div>' . get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content;
$content = '<div>' . get_the_post_thumbnail_caption( $post->ID ) . '</div>' . $content;
}
return $content;
}
Please chime in if there is a more effective way to do this, I am always looking for better practices!

Why ajax request isn't sending all the data?

I'm working in a ecommerce with wordpresss and woocommerce, im adding to the shop page and category pages buttons that display the sizes for each product. with this code inside the theme function:
function woocommerce_variable_add_to_carts() {
global $product, $post;
$variations = $product->get_available_variations();
$product_sku = $product->get_sku();
$out = '<ul class="iconic-was-swatches iconic-was-swatches--loop iconic-was-swatches--text-swatch iconic-was-swatches--square">';
foreach ($variations as $key => $value) {
if (!empty($value['attributes'])) {
foreach ($value['attributes'] as $attr_key => $attr_value) {
$out .= '<li><a id="'.esc_attr($post->ID).'" data-quantity="1" data-product_id="'.esc_attr($post->ID).'" data-product_sku="'.$product_sku.'" class="iconic-was-swatch iconic-was-swatch--follow iconic-was-swatch--text-swatch add_to_cart_button">';
$out .= $attr_value . '</a></li>';
}
}
}
$out .= '</ul>';
echo $out;
}
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_variable_add_to_carts');
The idea is that when the users click in one of those sizes buttons the product is added to the cart directly in that page (shop page, category page). I made a custom endpoint to solve that from the answer provided here. I call the ajax function in the js file that Contains this:
$('.add_to_cart_button').on('click',function(){
jQuery.ajax({
url: WC_VARIATION_ADD_TO_CART.ajax_url,
type: "POST",
data: {
action : "customAdd_to_cart",
product_id : "697",
variation_id : "707",
quantity : 1,
variation : {
size : "s",
color: "pink"
}
},
success: function(){
alert('Ajax Success ');
}
});
});
(i'm using a specific product_id and variation_id for testing) then i add the callback function in the themes function page to add the products to the cart :
function customAddToCart() {
ob_start();
try {
$product_id = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $data['product_id'] ) );
$quantity = empty( $data['quantity'] ) ? 1 : wc_stock_amount( $data['quantity'] );
$variation_id = isset( $data['variation_id'] ) ? absint( $data['variation_id'] ) : '';
$variations = $variation_id ? (array) get_variation_data_from_variation_id( $variation_id ) : null;
$product_status = get_post_status( $product_id );
$passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations, $cart_item_data );
if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variations ) && 'publish' === $product_status ) {
do_action( 'woocommerce_ajax_added_to_cart', $product_id );
$res = getCartFragments();
} else {
$res = array(
'error' => true
);
}
return $res;
} catch (Exception $e) {
return new WP_Error('add_to_cart_error', $e->getMessage(), array('status' => 500));
}
}
add_action( 'wp_ajax_nopriv_woocommerce_add_variation_to_cart', 'customAddToCart' );
all this seems to work fine because doesn't give any error in console but the problems is that the variation Size in not added with the product that is selected just add the product. I dont know why this is happening, i even add an alert in the ajax success function
alert('Ajax Success ');
and that alert is displayed but the data it seems is not been sending like it should.
i want to know what i'm missing in any of this codes or it could be the js file and his location or i need to send another value in the a> builded in the first function above. i have try a lot things but the behavior still the same.

A quick scan over your code and I've noticed that the action you are calling with ajax is not correct. It should be woocommerce_add_variation_to_cart not customAdd_to_cart. Also it is common practice to use wp_send_json (or the more specific wp_send_json_success and wp_send_json_error functions) at the end of your ajax callback function so that you get a readable and sensible response in jQuery. Check out the following link if you have not used it before:
https://codex.wordpress.org/Function_Reference/wp_send_json
Hope this helps.

Populating second dropdown list depending on first one in a Wordpress page

Hello and have a nice day everyone.
I, being not an actual coder, managed to overcome dropdown list issue in basic html, then in php using javascript in Dreamweaver. I even made it using Ajax without reloading the page. Thanks to those people who created it in plus2net. Here is the link i benefited from. http://www.plus2net.com/php_tutorial/php_drop_down_list.php
My problem is with a Wordpress page. Wordpress has a buit-in function for generating dropdown lists for pages, posts etc. I used wp_dropdown_pages function, whose reference can be found here: http://codex.wordpress.org/Function_Reference/wp_dropdown_pages
and in post-template.php file function is like this:
function wp_dropdown_pages( $args = '' ) {
$defaults = array(
'depth' => 0, 'child_of' => 0,
'selected' => 0, 'echo' => 1,
'name' => 'page_id', 'id' => '',
'show_option_none' => '', 'show_option_no_change' => '',
'option_none_value' => ''
);
$r = wp_parse_args( $args, $defaults );
$pages = get_pages( $r );
$output = '';
// Back-compat with old system where both id and name were based on $name argument
if ( empty( $r['id'] ) ) {
$r['id'] = $r['name'];
}
if ( ! empty( $pages ) ) {
$output = "<select name='" . esc_attr( $r['name'] ) . "' id='" . esc_attr( $r['id'] ) . "'>\n";
if ( $r['show_option_no_change'] ) {
$output .= "\t<option value=\"-1\">" . $r['show_option_no_change'] . "</option>\n";
}
if ( $r['show_option_none'] ) {
$output .= "\t<option value=\"" . esc_attr( $r['option_none_value'] ) . '">' . $r['show_option_none'] . "</option>\n";
}
$output .= walk_page_dropdown_tree( $pages, $r['depth'], $r );
$output .= "</select>\n";
}
/**
* Filter the HTML output of a list of pages as a drop down.
*
* #since 2.1.0
*
* #param string $output HTML output for drop down list of pages.
*/
$html = apply_filters( 'wp_dropdown_pages', $output );
if ( $r['echo'] ) {
echo $html;
}
return $html;
}
With this function and its arguments, it is very easy to populate a dropdown list, and get what you want. However my goal is to generate a second drop down with the selected value of the first one. Like the first one is car brands, and the second one is models.
To do this how can i use wp_dropdown_pages() function? If I must, how can i do this using AJax or just Javascript?
Thank you all in advance.

You can't use PHP once the page is on screen, without reloading or AJAX.
You could create the second dropdown menu(s) right away and hide them at first. Then make the correct one visible when the first dropdown menu is clicked/changed using jQuery.
Or use an AJAX call to a function that will return the correct dropdown menu HTML.
In more detail:
look into how you can grab the information of a changed
dropdown menu (an option is selected) using jQuery.
look into how to use AJAX in WordPress environment. Create the jQuery to call
the PHP function that will return your HTML.
In your AJAX call send along the grabbed information of the dropdown menu.
On successful AJAX function you need to tell jQuery to echo the output.