0

I am using Porto on Magento 2.2.5, in the products page there is a text box under the attribute labels, how can I remove it or hide it. link to product page:
link to product page

screenshot:

screenshot

tnx,

1 Answer 1

1

The input field needs to be hidden using the attribute ‘type="hidden"’. This appears to be one of those fields that is supposed to be hidden and holds the 'ID' of the primary key for the attribute's option. (My personal opinion is that this is a work-around to some sort of limitation or difficulty the developer was having with associating IDs to Values for attribute options)

Reference: https://www.w3schools.com/tags/att_input_type_hidden.asp

Since I am unfamiliar with that theme that you are using, I would say to first start by looking in the theme's files <magento_root>/app/design/frontend/<Vendor>/<theme>

Documentation on the theme structure can be found here:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-structure.html

If you could grep the contents of the files in the theme to find this, that would be a good start. Otherwise, try looking in phtml files under the Magento_Catalog module folder in that theme. Look for things relating to product/view, configurable, options, etc..

You could turn on template and block hints, but if you don't have a development environment set up, then do not do this. A production site with template and block hints turned on is a security and performance issue.

Once you find that <input..., update the html element's attribute for type from type="text" to type="hidden", so the result is.. <input type="hidden" ...

I've confirmed that everything still works when the type is changed to hidden and an option is selected. The input field is updated with the option ID of the value selected.


Alternative solution (and probably easiest)

Update CSS stylesheet or add <style> code:

CSS Stylesheet:

.swatch-attribute-options ~ .swatch-input.super-attribute-select { display:none !important; }

html

<style> .swatch-attribute-options ~ .swatch-input.super-attribute-select {display:none !important;} </style>

3
  • Thank You! it works but where in the Magento code I can fix it? Dec 6, 2018 at 3:27
  • <input class="swatch-input super-attribute-select" name="super_attribute[199]" type="text" value="" data-selector="super_attribute[199]" data-validate="{required: true}" aria-required="true" aria-invalid="false"> how to hide it in the Magento code? Dec 6, 2018 at 4:04
  • Updated solution
    – df2k2
    Dec 6, 2018 at 4:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.