Whenever we create a custom product attribute, we might need to show it on the product page. It can be shown in two forms:
In existing product tab (in More Information tab)
In new tab (by adding a new one
1. In Existing Product Tab
To show an attribute in More Information tab, you need to set Visible on Catalog Pages on Storefront to yes for the attribute.
After this, you will be able to see the attribute as shown here:
2. In new tab
Sometime we might need to add a new tab and show the attribute value in that (mainly for the attributes of type Text Area or if any customization is required in how the value is getting shown). In this case, we need a custom module or theme. Just follow these basic steps:
Note: We will be using an attribute with name Test Attribute and code test_attribute for reference. You may do the modification based on your attribute
Create app/code/Vendor/ModuleName/view/frontend/layout/catalog_product_view.xml or app/design/frontend/Vendor/ThemeName/Magento_Catalog/layout/catalog_product_view.xml as per your requirement
Then add this code to the file:
It should be noted that we are using method call getTestAttribute as the attribute code is test_attribute. Modify it as per the requirement
Save the file and that’s it. The attribute will be shown on Product page in new tab as shown here:
It is important to remember that your _theme.less override the parent _theme.less.
Copy all variables you need from the parent _theme.less, including those which will not be changed. For example, if your theme inherits from Blank, the _theme.less you should copy from is located at <Magento_Blank_theme_dir>/web/css/source/_theme.less
Make the necessary changes.
It might be possible that the parent theme doesn’t have _theme.less file. It’s just for a reference. If there is a file with name _module.less in <Magento_Blank_theme_dir>/Magento_Theme/web/css/source then you need to copy the same file in your theme at similar location <theme_dir>/Magento_Theme/web/css/source and then make required changes into this file
The drawback of this approach is that you need to monitor and manually update your files whenever the parent’s _theme.less is updated.
Note: To see the changes that you had made in the less file, you need to perform setup:upgrade and setup:static-content:deploy.
Less Compilation with Grunt
Make sure that you set your Magento application to the developer or default mode.
Installing and configuring Grunt
Magento has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:
<theme>: your theme code, conventionally should correspond to the theme directory name.
<language>: specified in the ‘code_subtag’ format, for example en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language
<path_to_file>: path to the root source file, relative to the app/design/frontend/<Vendor>/<theme/>web directory. You need to specify all root source files of the theme. If your theme inherits from a certain theme, and does not contain its own root source files, specify the root source files of the parent theme.
(Optional) If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.
It removes the theme related static files in the pub/static and var directories.
It republishes symlinks to the source files to the pub/static/frontend/<Vendor>/<theme>/<locale> directory.
Compiles .css files using the symlinks published in the pub/static/frontend/<Vendor>/<theme>/<locale> directory
Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser pages (you need to have LiveReload installed for you browser)
Basically, you need to use grunt less:<theme> which would compile less.