WordPress.org

Forums

WooCommerce - excelling eCommerce
[resolved] Coupons: Input=Text not available & "chzn" vs "chosen"? (6 posts)

  1. popgirl23
    Member
    Posted 1 year ago #

    Been trying to fix this issue for a week.

    I am unable to use the Coupon function. Four of the fields under Woocommerce > Coupon > Usage Restrictions are not available to me: Products, Exclude Products, Product Categories, and Exclude Categories. Only these fields are not working.

    In Chrome Developer I see two clues when switching between my theme and the twentyfourteen default theme. In my theme those INPUT tags show an inline style of width:0px, while using a default theme they show width:40px; . Second clue is in my theme there are class names using "chzn" etc, while in the default I see "chosen". With both themes pointing to different stylesheets as a result. (see below). I also disabled the 3 included woo stylesheets to see if that helped and it did not. Ive cleared all custom styles, and disabled all plugins except Woo. Frustrating.

    My theme:

    <div class="options_group">				<p class="form-field"><label for="product_ids">Products</label>
    				<select id="product_ids" name="product_ids[]" class="ajax_chosen_select_products_and_variations chzn-done" multiple="multiple" data-placeholder="Search for a product…" style="display: none;">
    									</select><div id="product_ids_chzn" class="chzn-container chzn-container-multi" style="width: 0px;"><ul class="chzn-choices"><li class="search-field"><input type="text" value="Search for a product…" class="default" autocomplete="off" style="width: 0px;"></li></ul><div class="chzn-drop" style="left: -9000px; width: 0px; top: 0px;"><ul class="chzn-results"></ul></div></div> <img class="help_tip" src="http://holondesign.com/inProgress/NTL_dev/wp-content/plugins/woocommerce/assets/images/help.png" height="16" width="16"></p>
    								<p class="form-field"><label for="exclude_product_ids">Exclude products</label>
    				<select id="exclude_product_ids" name="exclude_product_ids[]" class="ajax_chosen_select_products_and_variations chzn-done" multiple="multiple" data-placeholder="Search for a product…" style="display: none;">
    									</select><div id="exclude_product_ids_chzn" class="chzn-container chzn-container-multi" style="width: 0px;"><ul class="chzn-choices"><li class="search-field"><input type="text" value="Search for a product…" class="default" autocomplete="off" style="width: 0px;"></li></ul><div class="chzn-drop" style="left: -9000px; width: 0px; top: 0px;"><ul class="chzn-results"></ul></div></div> <img class="help_tip" src="http://holondesign.com/inProgress/NTL_dev/wp-content/plugins/woocommerce/assets/images/help.png" height="16" width="16"></p>
    				</div>

    Twentyfourteen theme:

    <div class="options_group">				<p class="form-field"><label for="product_ids">Products</label>
    				<select id="product_ids" name="product_ids[]" class="ajax_chosen_select_products_and_variations" multiple="multiple" data-placeholder="Search for a product…" style="display: none;">
    									</select><div class="chosen-container chosen-container-multi" style="width: 0px;" title="" id="product_ids_chosen"><ul class="chosen-choices"><li class="search-field"><input type="text" value="Search for a product…" class="default" autocomplete="off" style="width: 40px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div> <img class="help_tip" src="http://holondesign.com/inProgress/NTL_dev/wp-content/plugins/woocommerce/assets/images/help.png" height="16" width="16"></p>
    								<p class="form-field"><label for="exclude_product_ids">Exclude products</label>
    				<select id="exclude_product_ids" name="exclude_product_ids[]" class="ajax_chosen_select_products_and_variations" multiple="multiple" data-placeholder="Search for a product…" style="display: none;">
    									</select><div class="chosen-container chosen-container-multi" style="width: 0px;" title="" id="exclude_product_ids_chosen"><ul class="chosen-choices"><li class="search-field"><input type="text" value="Search for a product…" class="default" autocomplete="off" style="width: 40px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div> <img class="help_tip" src="http://holondesign.com/inProgress/NTL_dev/wp-content/plugins/woocommerce/assets/images/help.png" height="16" width="16"></p>
    				</div>

    Please help. The site is close to launch and this is dragging things.

    https://wordpress.org/plugins/woocommerce/

  2. popgirl23
    Member
    Posted 1 year ago #

    Let me add, simply trying to override the inline style does nothing as well.

  3. popgirl23
    Member
    Posted 1 year ago #

    The theme developer provided me with updated files for jQuery Chosen which he had bundled with the theme. This fixed the issue.

  4. John McAlester
    Member
    Posted 1 year ago #

    I am having this exact same issue. Can you describe the solution a little more or point me towards the jQuery file that I could download?

    Thanks!

  5. popgirl23
    Member
    Posted 1 year ago #

    Im not a js developer so my description is rudimentary at best here. Also where these files go in your theme may not be the same location in my theme.

    I replaced two files. I got them straight from the theme developer so I don't know where to grab them off the web. Im sure a Google search will find them. Look for the latest version. Probably a GitHub link will do.
    chosen.css
    chosen.jquery.js

    In my particular theme they were replaced inside:
    mythemename/framework/admin/css
    mythemename/framework/admin/js

    But that's probably different in yours. You'll have to do a search for the files to replace.

    Basically there's a jquery plugin called "Chosen" that replaces bulky & ugly dropdown menu's with a search field type replacement. Theme developers began adding it to some of the more popular and advanced themes. But its either not 100% compatible with the latest version of WP or its still a bit buggy.

    Hope that helps!

  6. popgirl23
    Member
    Posted 1 year ago #

    one more thing. You will need to add the following to your stylesheet as the fix causes a few of the theme shortcode boxes to appear incorrect:

    .chosen-container {
    width: 200px!important; }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic