Variations
Hello
Question about variations, I remember that previously variations had a distinctive design depending on the status (in stock or not)
Now I see that there is no difference, how can I fix it?
Hello
Question about variations, I remember that previously variations had a distinctive design depending on the status (in stock or not)
Now I see that there is no difference, how can I fix it?
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
Thanks
I sent you your login information and a link to this topic through your contact form (although you already have access to my site with this link)
Sorry, but I receive dozens of accesses every day, and I do not remember all of them.
That is why you should always attach a link to your website.
I have checked that, and graying out works when you have multiple attributes and a particular value does match with another from another attribute. Like on the following example:
https://themes.muffingroup.com/be/lingerie/product/black-luxury-underwear/
Black color has three sizes.
If the product is out of stock, it will not gray it out, but will show a message about it.
Best regards
I understand you, thank you for your work
So I need to make a proposal so that this function works the same way for one attribute? It’s good when opening the card, the buyer sees what’s available right away.
You know, I checked for several attributes, the same thing, it doesn’t work here is an example of a link to a product (but you need to use the login link that I sent you)
https://babyki.by/shop/outerwear/jeans/%d0%b4%d0%b6%d0%b8%d0%bd%d1%81%d0%be%d0%b2%d0%ba%d0%b0-4/
I think you misunderstood me.
I will explain that further. Let's say that the product has 3 colors and 5 sizes. Red color has variations created with 3 sizes, and when you choose red color, two sizes that do not have variations will be grayed out. However, if one of these 3 sizes is out of stock, it will not be grayed out but will display "out of stock" text.
We base on the WooCommerce variations and it works in similarly on other themes like Twenty Twenty-Four.
Best regards
I understand you, I saw how it works before, here are screenshots where there are several attributes, and when you select one, it does not change the appearance for those out of stock.
And that is how it worked and should work.
Best regards
in the first screenshot the color is white, but all sizes are below the same type, in the second screenshot I show that size 68 is not available, it should have been like in your example, light gray, different from the others.
Maybe these screenshots will explain me better.
Six variations were created, three for three number or burners and three for Four number of burners:
"Three" has three warm up times without "9 min", and "Four" has three warm up times without "11 min".
Because I did not create these variations they are grayed out:
However, despite this variation is out of stock:
It will still be displayed but an appropriate message will appear:
And that is how it works.
Best regards
we have a misunderstanding)
when a product has several variations, and we select the first attribute, then in your screenshots, you can see that the second attribute changes its appearance to a more inconspicuous one (if it is not in stock), and if you click on it there will be an inscription (out of stock), but In the screenshots you can see that all attributes have the same appearance, and those that are not in stock.
You yourself show with an arrow that the attribute is less pronounced compared to those that are in stock. For me they don’t change the appearance like that, I’m writing this to you and showed it in my screenshots)
I found that this function works on some products, not all, but here's what happened there. I opened a product, and its additional photos did not load, I clicked on the attributes and they actually changed their appearance (if they are not in stock), but if I refresh the page or exit it, an error occurs, and clearing records from this site helps. I'm confused.
Here is a clear example (screenshots 1 and 2 - it works, screenshots 3 and 4 - it doesn’t work)
changes its appearance depending on availability
does not change its appearance
Error 403 is not related to you, it just happened, I will solve this separately
I probably understand you, it becomes inactive if such a variation was not initially provided, and if it was, then its availability in the warehouse is not visually displayed in any way, I will write to you to implement this very important function for stores
Thanks for understanding.
Also, thanks for adding your suggestion on the topic with suggestions. We will take your idea into account.
Best regards
.mfn-vr-options.attribute_pa_size li.attr_m a[data-id="m"],
.mfn-vr-options.attribute_pa_size li.attr_l a[data-id="l"],
.mfn-vr-options.attribute_pa_size li.attr_xl a[data-id="xl"],
.mfn-vr-options.attribute_pa_size li.attr_xxl a[data-id="xxl"] {
opacity: 0.3 !important;
}
You can do this with css code for your theme.
I think I managed to do something similar but only in the products page. Now I'm thinking about a single page, how to do it - the css code I put above doesn't work exactly as I wanted. Can it be done for a single page as it is in my picture and the link.
https://bemorebg.com/product-category/drehi/teniski/
1.I put This code in function.php
To show quantity of every variation in 'woocommerce_short_description .
add_filter( 'woocommerce_short_description', 'display_in_stock_variations_to_short_description' );
function display_in_stock_variations_to_short_description( $excerpt ) {
global $product;
if ( ! is_product() || empty( $product ) || ! is_a( $product, 'WC_Product' ) )
return $excerpt;
if( $product->is_type('variable') ) {
$term_quantities = []; // Създаваме масив, в който ще съхраняваме вариациите и техните налични бройки
// Loop през всички вариации
foreach( $product->get_children() as $variation_id ) {
$variation = wc_get_product( $variation_id );
// Проверяваме дали вариацията съществува
if ( ! $variation || ! $variation->exists() ) {
continue;
}
$max_qty = 0 < $variation->get_max_purchase_quantity() ? $variation->get_max_purchase_quantity() : $variation->get_stock_quantity();
$term_names = []; // Инициализираме
// Loop през атрибутите на вариацията за текущата вариация
foreach ( $variation->get_variation_attributes() as $attribute => $term_slug ) {
// Задаваме името на термина в масив, преобразувайки го в главни букви
$term_names[] = ucfirst( str_replace( ['-', '_'], ['/', '/'], strtoupper($term_slug) ) );
}
// Добавяме към масива със съхранени вариации и техните бройки
foreach ($term_names as $term_name) {
if (!isset($term_quantities[$term_name])) {
$term_quantities[$term_name] = $max_qty;
} else {
$term_quantities[$term_name] += $max_qty;
}
}
}
// Създаваме текста със списъка на наличните вариации и техните бройки
$available_variations_text = 'Наличност';
$variations_list = [];
foreach ($term_quantities as $term_name => $quantity) {
$variations_list[] = "$term_name - $quantity бр";
}
$available_variations_text .= implode(', ', $variations_list);
// Добавяме създадения текст в началото на краткото описание
$excerpt = $available_variations_text . '<br>' . $excerpt;
return $excerpt;
}
return $excerpt;
}
2.Second i put this Java in Theme and its make a magic putting X on the text of variation out of stock
document.addEventListener('DOMContentLoaded', function() {
// Вземаме текста от елемента с клас 'woocommerce-product-details__short-description'
var availabilityText = document.querySelector('.woocommerce-product-details__short-description').innerText;
// Разделяме текста на вариации
var variations = availabilityText.split(',');
// За всяка вариация, проверяваме наличността
var variationLinks = document.querySelectorAll('.mfn-vr-options a');
variationLinks.forEach(function(link) {
// Вземаме буквата на вариацията от текста на връзката
var variationLetter = link.innerText.trim();
// Търсим буквата в текста на наличностите
var regex = new RegExp(variationLetter + ' - (\\d) бр');
var match = regex.exec(availabilityText);
if (match && match[1] === '0') {
// Ако вариацията не е налична, задраскай буквата и приложи същия стил като в CSS
link.style.textDecoration = 'none'; // Премахваме задраскването
link.style.position = 'relative'; // Приложи position: relative;
var xElement = document.createElement('span'); // Създаваме елемент span за "X"
xElement.innerText = 'X'; // Задаваме текста на елемента
xElement.style.position = 'absolute'; // Приложи position: absolute;
xElement.style.top = '50%'; // Позиционирай вертикално в средата на елемента
xElement.style.left = '50%'; // Позиционирай хоризонтално в средата на елемента
xElement.style.transform = 'translate(-50%, -50%)'; // Центрирай по хоризонтала и вертикалата
xElement.style.fontSize = '20px'; // Задай големина на шрифта
link.appendChild(xElement); // Добави "X" към връзката
}
});
});