Product Attribute Plus is a free WooCommerce plugin that expands product attribute options. It ads Color, Label, and Image Swatches alongside the standard dropdown menu.<\/p>\n
1.Login to Your WordPress Dashboard
\n2.Navigate to the Plugins Section
\n3.Choose \u201cAdd New\u201d
\n4.Search for the Plugin: ( In the \u201cSearch plugins\u201d box, type \u201cProduct Attribute Plus\u201d )
\n5.Select the \u201cProduct Attribute Plus\u201d Plugin & Activate it.<\/p>\n
1.Download the Product Attribute Plus extension for WooCommerce Plugin
\n2.Unzip the downloaded file. You\u2019ll typically get a folder containing all the plugin files.
\n3.Use an FTP client like FileZilla to connect to your server.
\n4.Once connected, navigate to the \/wp-content\/plugins\/ directory in your WordPress installation on the server.
\n5.From your local machine, locate the folder extracted in step 2. Drag this folder into the \/wp-content\/plugins\/ directory on your server.
\n6.Allow FileZilla or your FTP client to complete the upload. This might take a few moments, depending on the plugin\u2019s size and your internet speed.
\n7.Once the upload is complete, go to your WordPress dashboard. Navigate to the \u201cPlugins\u201d section. You should see the plugin you just uploaded listed there. Click \u201cActivate\u201d to activate the plugin.<\/p>\n
1.First, install and activate the WooCommerce Plugin.<\/a> This plugin is necessary to use Product Attribute Plus Plugin. Product Attribute Plus works with any theme, including:<\/p>\n This plugin includes compressed JavaScript and CSS files for optimal performance. The uncompressed source files and build instructions are provided to ensure transparency:<\/p>\n Uncompressed JavaScript Files<\/strong>:<\/p>\n Uncompressed SCSS Files<\/strong>:<\/p>\n Build Instructions<\/strong>: For more details on setting up the build process, please refer to the Product Attribute Plus enhances WooCommerce product attributes with Color, Label, and Image Swatches.<\/p>\n","protected":false},"author":65,"featured_media":270284,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Product Attribute Plus - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Product Attribute Plus enhances WooCommerce product attributes with Color, Label, and Image Swatches."},"footnotes":""},"categories":[1],"tags":[58923,6237,58924,58925,13691],"class_list":["post-415193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-color-image-label-swatches","tag-product-attributes","tag-product-attributes-plus","tag-swatch-shapes","tag-swatches"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/415193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=415193"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/415193\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/270284"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=415193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=415193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=415193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n2.Next, install & activate the Product Attribute Plus<\/a>
\n3.Once both plugins are activated, go to WooCommerce > Settings > Swatches<\/strong> to set the default options and configurations for single variable product page.<\/p>\nWooCommerce Themes<\/h3>\n
\n
Source Files and Compression Details<\/h3>\n
\n
\n
\/product-attribute-plus\/src\/js\/admin<\/code> \u2013 JavaScript files for the admin area.<\/li>\n\/product-attribute-plus\/src\/js\/public<\/code> \u2013 JavaScript files for the public-facing area.<\/li>\n<\/ul>\n<\/li>\n\n
\/product-attribute-plus\/src\/scss\/admin<\/code> \u2013 SCSS files for the admin area.<\/li>\n\/product-attribute-plus\/src\/scss\/public<\/code> \u2013 SCSS files for the public area.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\nAll necessary libraries and steps to build the files are included in the package.json<\/code> file. To compile and compress the source files, run the appropriate build commands outlined in the package.json<\/code>.<\/p>\npackage.json<\/code> file located in the root of the plugin directory. Here are the main commands to use:<\/p>\n\n
npm run scss:admin:min<\/code> \u2013 Builds a production (compressed) version of the CSS file for the admin area.<\/li>\nnpm run scss:public:min<\/code> \u2013 Builds a production (compressed) version of the CSS file for the public-facing area.<\/li>\nnpm run js:dev<\/code> \u2013 Creates both uncompressed and development versions of the JavaScript files.<\/li>\nnpm run js:prod<\/code> \u2013 Builds production (compressed) versions of the JavaScript files.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"