Coupons: Input=Text not available & "chzn" vs "chosen"?

  • Resolved popgirl23

    (@popgirl23)


    10 years, 11 months 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="https://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="https://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="https://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="https://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://www.ads-software.com/plugins/woocommerce/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter popgirl23

    (@popgirl23)

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

    Thread Starter popgirl23

    (@popgirl23)

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

    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!

    Thread Starter popgirl23

    (@popgirl23)

    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!

    Thread Starter popgirl23

    (@popgirl23)

    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; }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Coupons: Input=Text not available & "chzn" vs "chosen"?’ is closed to new replies.