I have a custom variations view at product page. It is a simple colorboxes. I hide default woocommerce variations selects and than change it after click on box:
jQuery('.colors-list li').on('click', function(event){
if(!jQuery(this).hasClass('active')){
//change active square
jQuery('.colors-list .active').removeClass('active');
jQuery(this).addClass('active');
//change active color label
var colorName = jQuery(this).attr('colorname');
jQuery('.checked-color').html(colorName);
//change value of hided woocommerce variable switcher
var colorSlug = jQuery(this).attr('colorval');
jQuery('#pa_color').val(colorSlug).change();
jQuery('.variations_form').trigger('woocommerce_variation_select_change');
}
});
But once I change only one select(color), for this reason I have an error in js(add_to_cart variation.js):
Uncaught TypeError: Cannot read property 'length' of null
Error at this:
if ( $( this ).val().length === 0 ) .
If I have only one variations - error does not occur. I tried to change second select with color to default value, but nothing changed.
Find a plugin Woocommerce Radio Buttons and make similar
Related
I need to Blur ( remove functionality ) of the Add to Cart button globally for product variations which are Out of stock so assume the jQuery contains() function is the best bet but can't get this code to work.
I've tried checking using the outOfStock but can't get it to work.
If the product contains the text Out of stock when the variation option is toggled, i need to prevent the add to cart button from working.
add_action('wp_footer', 'outofstock_product_variation_js');
function outofstock_product_variation_js() {
?>
<script type="text/javascript">
jQuery(function($) {
var addToCartButtonObj = $('.add-to-cart-button');
var outOfStock = $("p.stock.in-stock:contains('Out of stock')");
$('form.variations_form').on('show_variation', function(event, data) {
if ( ! data.is_in_stock ) {
addToCartButtonObj.hide();
} else if ( data.is_in_stock ) {
addToCartButtonObj.show();
}
})
});
</script>
<?php
}
Here's the HTML when the out of stock variation is selected
<div class="woocommerce-variation-availability"><p class="stock in-stock">Out of stock</p>
</div>
The behavior you explained is strange because WooCommerce by default assigns the disabled attribute to a add to cart button of a product that is out of stock.
It is also a bad practice to add <script> tags directly in a function passed to a hook in WordPress, as it can lead to various issues such as conflicts with other scripts, syntax errors, and security vulnerabilities.
That said, my advice is to add something like this vanilla JavaScript code using this plugin https://wordpress.org/plugins/insert-headers-and-footers/
<script>
window.onpageshow => {
const addToCart = document.querySelector('.outofstock button')
if (addToCart) {
addToCart.setAttribute('disabled', '')
}
}
</script>
WooCommerce provides the outofstock class which you can use to select the add to cart button. After that, you can simply use the setAttribute function to disable the button.
I have this gravity forms code in my functions php file.
I would like to replace the word "BOOM" with the currently selected product variation name on my woocommerce product page.
This should then populate the Gravity form field with the current product variation name .
add_filter( 'gform_field_value_your_parameter', 'my_custom_population_function' );
function my_custom_population_function($value) {
return 'BOOM';
}
For those who are interested I used the following....
https://www.businessbloomer.com/woocommerce-get-currently-selected-variation-id/
together with this JS
Trigger a form update in Gravity Forms after jQuery change to hidden field
The result...
$(function() {
$('input.variation_id').change(function() {
var var_per = $('input.variation_id').val();
$('#input_12_27').val(var_per).change();
});
});
I have a hidden input field, which I want to fetch in my functions.php, but I keep getting NULL as a return value.
Here is my code:
add_filter('woocommerce_add_cart_item_data', 'add_custom_field_data_to_cart', 10, 2 );
function add_custom_field_data_to_cart($cart_item_data, $product_id, $variation_id) {
$cart_item_data['myHiddenInput'] = $_POST['myHiddenInput'];
return $cart_item_data;
}
Can someone maybe tell me why I get NULL ?
EDIT
The hidden input field is on my archive-products.php of my woocommerce-shop
<input type="hidden" name="myHiddenInput" value="">
The value gets set by using javascript
UPDATE
What I want to achive is, that I have an archive-products page where all my products are listed. Now, above my products I have a tab-menu with the next 5 days of the week. So I click the tab "Wednesday 19." the value of the hidden input gets the date of the active menu-tab:
<input type="hidden" name="chosenDate" value="2018-09-19">
Now I add a product to my cart. Then I click the menu-tab "Friday 21." - the value of the hidden filed gets updated -> I add a product to the cart.
Now when I go to my cart page - I want the products to have the dates listed when they will get delivered (the dates from the menu-tab when they were added)
as #LoicTheAztec Said
You can't pass anything custom from any archive page via ajax add to cart button as if you look to the source code of Ajax add to cart… There is no possible additional arguments or hooks. So you will need to build your own Ajax add to cart functionality, which is something huge and complicated. So your hooked function woocommerce_add_cart_item_data will have no effect
so the best logic is to use Javascript to achieve your goal and you can do it like the below solution:
First Lets add those value inside the add to cart button as an attribute instead of input tag.
for that we are going to us woocommerce_loop_add_to_cart_args hook as follow:
add_filter( 'woocommerce_loop_add_to_cart_args', 'change_item_price', 10, 2 );
function change_item_price( $args, $product ) {
$args['attributes'] = $args['attributes'] + [ 'data-chosen-date' => '2018-09-19' ];
return $args;
}
you can add as many attribute as you want and modify the value through your script and then store those value when the user click add to cart intro session storage and then in the cart page you can get those values and append them to cart table so for example:
add_action( 'wp_footer', 'script' );
function script() {
if ( is_shop() ) {?>
<script>
document.body.addEventListener('click', add_to_cart);
function add_to_cart(e) {
if (e.target.classList.contains('add_to_cart_button')) {
let val = e.target.getAttribute('data-chosen-date');
let product_id = e.target.getAttribute('data-product_id');
sessionStorage.setItem(product_id, val);
}
}
</script>
<?php
}
if ( is_cart() ) {
?>
<script>
var items = document.querySelectorAll("td");
items.forEach(function (item, index) {
if (item.classList.contains('product-remove')) {
var id = item.childNodes[1].getAttribute('data-product_id');
if (sessionStorage.getItem(id)) {
var textnode = document.createElement('p');
textnode.innerHTML = sessionStorage.getItem(id);
item.nextElementSibling.nextElementSibling.appendChild(textnode)
}
}
}); </script>
<?php
}
}
output :
The Date after the item link in the cart table has been retrieved from our storage session and each value we stored is maped with the product id as key in our storage session so we can have different value for each product.
I am new to woocommerce and I do not have much knowledge about that. In a project I want to hide shipping calculation button from cart page.but want to show the same configuration with button on checkout page.
I want help regarding how to add shipping button on checkout.
you can fire an event after calc_shipping buton is clicked, but you need to wait native calc_shipping method to end. I used jQuery(document).ajaxComplete to wait that execution:
jQuery('[name="calc_shipping"]').click(function () {
jQuery(document).ajaxComplete(function () {
your_pretty_code;
});
Go to
WooCommerce->Settings->Shipping->Shipping Options
and make sure you have unchecked 'Enable the shipping calculator on the cart page'.
All the woocommerce files needs to be overridden by copying that file into your child theme.
Also, In woocommerce backend the option must be checked which tells to Show Shipping Calculator on cart page (As this will show calculator)
Add below code into woocommerce/cart/cart-shipping.php file before first tr (You will found in file)
if(is_checkout() && !$show_shipping_calculator && 'yes' === get_option( 'woocommerce_enable_shipping_calc' ) ) {
$show_shipping_calculator = true;
}
Add below code into your child theme's fuctions.php
add_action( 'wp_enqueue_scripts', 'test_test' );
function test_test() {
if( is_checkout() ) {
if( wp_script_is( 'wc-cart', 'registered' ) && !wp_script_is( 'wc-cart', 'enqueued' ) ) {
wp_enqueue_script( 'wc-cart' );
}
}
}
Now we need to add id tag in shipping calculator's update totals button,
For that in woocommerce/cart/shipping-calculator.php page find button which has name="calc_shipping" and add id tag in that button ====> id="calc_shipping"
Note ==> This is done by us to bind the button click event in jQuery, You can use your any other alternative way ( If you want )
Now last step,
Add below jquery code in your child theme's js file
jQuery(document).on('click','#calc_shipping',function(e){
e.preventDefault();
var shipping_country_val = jQuery("#calc_shipping_country").val();
var shipping_state_val = jQuery("#calc_shipping_state").val();
var shipping_city_name = jQuery("#calc_shipping_city").val();
var shipping_postcode = jQuery("#calc_shipping_postcode").val();
jQuery("#billing_country").val(shipping_country_val);
jQuery("#billing_state").val(shipping_state_val);
jQuery('#billing_city').val(shipping_city_name);
jQuery('#billing_postcode').val(shipping_postcode);
jQuery("#shipping_country").val(shipping_country_val);
jQuery("#shipping_state").val(shipping_state_val);
jQuery('#shipping_city').val(shipping_city_name);
jQuery('#shipping_postcode').val(shipping_postcode);
$('#billing_country , #shipping_country').trigger('change');
$('#billing_state, #shipping_state').trigger('change');
});
Inside an html page I wrote this code:
<script type="text/javascript">
function Prezzo( arg1 )
{
var prezzoclasse = parent.document.getElementById("product-price-28");
prezzoclasse.getElementsByClassName("price")[0].innerHTML = arg1;
}
</script>
This html page is opened as an iframe inside a parent page ( http://test.arredodesignonline.com/it/materasso-francese-dresden.html ) , on which I pass the price value.
For now, it passes the price but without the currency, and once I add the product to the cart the price becomes 0.
How can I correctly pass the price value so it goes inside cart? We are using Magento 1.9.1
Thanks