Ecommerce Shopify WordPress Discussion

Woocmmerce Problem with updating attributes

I'm trying to make it so that by clicking on an attribute's photo, I also update the selection in the attribute's dropdown In content-single-product.php I added // get the product variations $product_variations = $product->get_available_variations(); if ( !empty( $product_variations ) ) { ?> <div class="product-variation-images"> <?php foreach($product_variations as $product_variation) { // get the slug of the variation $product_attribute_name = $product_variation['attributes']; ?> <div class="product-variation-image product-variation-<?php echo $product_attribute_name ?>" id="product-variation-<?php echo $product_variation['variation_id']; ?>" data-attribute="<?php echo $product_attribute_name ?>"> <img src="<?php echo $product_variation['image']['src']; ?>" alt=""> </div><!-- #product-variation-image --> <?php } ?> </div> <?php } ?> Then I added to functions.php add_action('wp_enqueue_scripts', 'custom_enqueue_scripts'); function custom_enqueue_scripts() { if (is_product()) { global $product; $product = wc_get_product(); wp_enqueue_script('custom-variation-script', get_template_directory_uri() . '/js/custom-variation-script.js', array('jquery'), '1.0', true); wp_localize_script('custom-variation-script', 'wc_single_product_params', array( 'variations' => $product->get_available_variations() )); } } then in custom-variation-script.js jQuery(document).ready(function ($) { // Klik na sliku atributa $('.product-variation-image').on('click', function () { var attributeValue = $(this).data('attribute'); // Pronađi odgovarajuću opciju u dropdownu var select = $('select[name^="attribute_' + attributeValue + '"]'); if (select.length) { // Postavi vrijednost dropdowna select.val(attributeValue); // Pokreni događaj za ažuriranje WooCommerce varijacija select.trigger('change'); } }); }); But it doesn't work.. Can someone help me? I tried several ways but none work's... jQuery(document).ready(function ($) { // Klik na sliku atributa $('.product-variation-image').on('click', function () { // Pronađi id varijacije iz data atributa var variationId = $(this).attr('id').replace('product-variation-', ''); // Pronađi odgovarajući dropdown za varijaciju var select = $('select.variation_id'); // Postavi vrijednost dropdowna if (select.length) { select.val(variationId); // Pokreni događaj za ažuriranje WooCommerce varijacija select.trigger('change'); } }); });
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.