Variable Product – I can select disabled values with my arrow keys

  • Resolved grimvanhalter

    (@grimvanhalter)


    3 years, 7 months ago

    Hello!

    I want to ask for help with my site.
    Essentially, I want to create a site that sells wooden toys.

    I created some variable products using the woocommerce variable product.
    For the products, the customer can choose different colored discs (there are also 4 different ones in the Gold set).

    The problem started with me somehow managing to choose two of the same colors. I tried to play with the thing a bit and it turned out that the arrow keys made it possible to select the disbled options.

    When I try to select the color of the disc using the arrows, the first time it successfully skips the colors already selected in another selection box, but if we play with the up and down arrows a bit, the second time the option can be selected. Thus giving the customer the opportunity to add the product to the cart with two sets of discs of the same color, which is not ideal.

    I’m using Windows 10 and google chrome.
    WooCommerce version 5.5.1
    WordPress version 5.8

    I’m also using the Divi builder, and I have already spoken to their support, they made me disable the divi builder and every single other plugins but the problem remained.

    Could someone possibly help with this?

    • This topic was modified 3 years, 7 months ago by grimvanhalter. Reason: Added version numbers and OS + Browser

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support abwaita a11n

    (@abwaita)

    Hi @grimvanhalter,

    Are you using a certain plugin to add the variations?

    Just so we can get a better picture of your setup, could you share with us a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

    Thanks.

    Thread Starter grimvanhalter

    (@grimvanhalter)

    Hey @abwaita!
    No, I’m not using any other plugin than woocommerce for the variations.
    But I also disabled every single plugin to see if any of them is the reason of this “bug”, but after i disabled all of them, the problem remains.

    But right now I re-enabled them.

    Here is the report:

    
### WordPress Environment ###

WordPress address (URL): https://crokinole.coolhd.hu
Site address (URL): https://crokinole.coolhd.hu
WC Version: 5.5.1
REST API Version: ? 5.5.1
WC Blocks Version: ? 5.3.2
Action Scheduler Version: ? 3.2.1
WC Admin Version: ? 2.4.1
Log Directory Writable: ?
WP Version: 5.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ?
Language: hu_HU
External object cache: –

### Server Environment ###

Server Info: LiteSpeed
PHP Version: 7.3.23-1+focal
PHP Post Max Size: 20 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.68.0
OpenSSL/1.1.1f

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.3.25-MariaDB-0ubuntu0.20.04.1
Max Upload Size: 20 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 5.5.1
WC Database Prefix: wp_
Teljes adatbázis mérete: 26.05MB
Adatbázis adatok mérete: 23.09MB
Adatbázis index mérete: 2.96MB
wp_woocommerce_sessions: Data: 0.14MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.22MB + Index: 0.44MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.22MB + Index: 0.19MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_crellyslider_elements: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_crellyslider_nonces: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_crellyslider_sliders: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_crellyslider_slides: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mgmlp_folders: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_options: Data: 2.05MB + Index: 0.52MB + Engine InnoDB
wp_pmr_status: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_postmeta: Data: 2.17MB + Index: 0.41MB + Engine InnoDB
wp_posts: Data: 17.36MB + Index: 0.28MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Post Type Counts ###

attachment: 172
custom_css: 1
customize_changeset: 3
et_body_layout: 2
et_footer_layout: 2
et_header_layout: 6
et_pb_layout: 9
et_template: 8
et_theme_builder: 1
mgmlp_media_folder: 49
nav_menu_item: 13
page: 33
post: 2
product: 58
product_variation: 37
revision: 949
wpcf7_contact_form: 1

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (13) ###

Code Snippets: írta Code Snippets Pro – 2.14.1
Contact Form 7: írta Takayuki Miyoshi – 5.4.2
Crelly Slider: írta Fabio Rinaldi – 1.4.4
LoftLoader: írta Loft.Ocean – 2.3.6
Media Library Folders for WordPress: írta Max Foundry – 7.0.2
MouseWheel Smooth Scroll: írta KubiQ – 5.6
Phoenix Media Rename: írta crossi72 – 3.3.1
Popups for Divi: írta divimode.com – 3.0.3
Shortcodes for Divi: írta Divi Space – 1.2.0
WooCommerce Menü Kosár: írta Jeremiah Prummer
Ewout Fernhout – 2.9.8

WooCommerce PayPal Payments: írta WooCommerce – 1.3.2
WooCommerce: írta Automattic – 5.5.1
WordPress importáló: írta wordpressdotorg – 0.7

### Inactive Plugins (1) ###

Media Library Folders for WordPress Reset: írta Max Foundry – 7.0.2

### Settings ###

API Enabled: –
Force SSL: –
Currency: EUR (€)
Currency Position: right_space
Thousand Separator: 
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: composite (composite)
external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Webshop f?oldal: #4790 - /shop/
Kosár: #4159 - /shopping-cart/
Pénztár: ? Az oldal nincs beállítva
A fiókom: ? Az oldal nincs beállítva
általános Szerz?dési Feltételek: ? Az oldal nincs beállítva

### Theme ###

Name: Divi
Version: 4.9.10
Author URL: https://www.elegantthemes.com
Child Theme: ? – Amennyiben a WooCommerce-t egy olyan szül?sablonban módosítunk
amelyet nem saját magunk készítettünk
akkor javasoljuk a származtatott sablon használatát. Hogyan készítsünk származtatott sablonokat

WooCommerce Support: ?

### Templates ###

Overrides: –

### Action Scheduler ###

Teljesítve: 893
Oldest: 2021-07-15 12:33:18 +0000
Newest: 2021-07-21 08:48:45 +0000

### Status report information ###

Generated at: 2021-07-21 10:42:44 +00:00
    Thread Starter grimvanhalter

    (@grimvanhalter)

    Also the problem seems to be affecting only windows PC-s

    Seems to be a Chrome issue – works OK in Firefox, Opera and Edge!

    Thread Starter grimvanhalter

    (@grimvanhalter)

    Hey @seank123
    It’s not browser related, i was able to reproduce the bug in firefox and EDGE as well.
    Try clicking on a select box TWICE to open/close the list. Now without clicking away use the arrow keys to select a color (the list should be closed now), and you’ll see you can select the same color as in the other boxes.

    EDIT: Or more precisely, try using the tab to select the wanted select box, and use the arrow keys to select a color without opening the dropdown list of colors.

    • This reply was modified 3 years, 7 months ago by grimvanhalter.
    • This reply was modified 3 years, 7 months ago by grimvanhalter.
    • This reply was modified 3 years, 7 months ago by grimvanhalter. Reason: Added more info on the bug recreating method
    Plugin Support con

    (@conschneider)

    Engineer

    Hi again,

    EDIT: Or more precisely, try using the tab to select the wanted select box, and use the arrow keys to select a color without opening the dropdown list of colors.

    I think I can reproduce this easily without using the keyboard. All I have to do is to click on no color. I can then choose all colors for each field, no problem: https://a.cl.ly/z8uOzbXp

    Is that what you mean?

    Thus giving the customer the opportunity to add the product to the cart with two sets of discs of the same color, which is not ideal.

    Product Variations might not be the way to go then. What would be ideal?

    Kind regards,

    Thread Starter grimvanhalter

    (@grimvanhalter)

    Thanks for the reply @conschneider!

    Yup this is the problem.
    Strangely on my older site I can’t reproduce this.
    My older site uses an older version of WooCommerce, and it uses the same variable product method/setup as the new one, every product is identically configured just like on my new site.
    Is it possible that this is some sort of bug in the newer version of WooCommerce or this is intentional?

    …Or is there any way to fix this?

    UPDATE:
    I just realized that on my older site there is no “blank select option”. Probably because it was removed via code when the older site was made. And the reason was probably the same.

    Is there any chance that WooCommerce can adapt this feature in a future version?
    This could be a very useful feature.

    So thank you for the help, I will remove the “blank select option” for now and hopefuly
    it will work as a workaround for this problem.

    Best regards!

    Thread Starter grimvanhalter

    (@grimvanhalter)

    Sadly It’s not solving the problem entirely. With the use of arrow keys it is still possible to select an already picked color, because the color option will recieve the attach enabled class.

    Any idea how to solve this?

    Plugin Support Cara

    (@dcka)

    Hi, @grimvanhalter!

    Sorry for the delayed response here.

    Are you still having issues with this? If yes, instead of using variations, you may want to look at a different setup. For example, you may want to consider using a plugin like Composite Products, which will allow you to conditionally hide products or variations based on previous selections. If you’re interested, you can read more about that here: Hiding Component Options.

    Thread Starter grimvanhalter

    (@grimvanhalter)

    Hi @dcka

    Since the writing of this topic, me and my collegues are began to use a product configurator plugin, which solved the issue, since we couldn’t find any other solution for this problem.

    So I don’t know if I must close this topic, or leave it open for someone else who’s having a similiar issue – or if someone finds a solution.

    My final thoughts on this topic is that maybe it can be solved with some clever javascript/jquery, but would love to see some in-built conditional logic feature in the future. It would be a nice touch.

    Best regards to everyone who replied on this topic, and thank you. ??

    Plugin Support Shohan Hossain Nabil – a11n

    (@sohanhossain)

    Hello @grimvanhalter,

    Since the writing of this topic, me and my collegues are began to use a product configurator plugin, which solved the issue

    Great! We are glad that you have found a plugin that solved the challenge you were having.

    My final thoughts on this topic is that maybe it can be solved with some clever javascript/jquery, but would love to see some in-built conditional logic feature in the future. It would be a nice touch.

    It would be great to have you add your ideas to the Ideas Board, which is where developers go to look for future plugin features and improvements.

    So I don’t know if I must close this topic, or leave it open for someone else who’s having a similiar issue – or if someone finds a solution.

    Since you managed to solve the initial problem by using a plugin, I will go ahead and mark the thread as resolved. But don’t worry, anyone will still be able to search, check, and add comment on the thread if they have a better solution.

    Cheers.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Variable Product – I can select disabled values with my arrow keys’ is closed to new replies.