How to Remove + Sign from Customizable Option Titles in Magento 2 Programmatically?

1
461
Product Options Customization in Magento 2 | Mageworx Magento Blog
Reading Time: 5 minutes

Product options customization is vital to meet business needs.

In this article, we will focus on how to change the titles of the selected options and consider two examples.

In the first example,

We will focus on how to change titles of the selected option values of the “selectable” type with the help of the Mageworx Advanced Product Options extension and “js”.

In the second example,

We will focus on how to change titles of “non-selectable” options with the help of “php”.

New Module Creation

New module creation was described in detail in this blog post.

Thus, let’s not focus on it today and move straight to the code. Here’s the code we’ll need:

1.composer.json

2.etc/module.xml

3. registration.php

Example #1. Changing Titles of Selected Option Values

Here, we will cover such input types as drop-down, radio button, checkbox, and multiple select.

Let’s delete the + sign from the titles of selected option values. We will achieve this with the help of our Advanced Product Options extension. 

Out of the box, Advanced Product Options has the functionality to handle titles of the selected option values on the front-end of product pages. It gets achieved with the help of “js” in

app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js.

Before we begin, create a test product that has all the types of selectable options. It is done to see how these option values look on the front-end by default.

Product Options Customization in Magento 2 | Mageworx Magento Blog

How about changing these titles?

To do that, we will need to rewrite a couple of functions from app/code/MageWorx/OptionBase/view/base/web/js/catalog/product/base.js.

Let’s use the known JavaScript mixins mechanism to achieve that. 

Create the following file and define our mixin there:

app/code/VendorName/OptionRemovePlus/view/base/requirejs-config.js

Now, create the following file with the redefined functions that we need:

app/code/VendorName/OptionRemovePlus/view/base/web/js/catalog/product/base-mixin.js

Here’s the result:

Product Options Customization in Magento 2 | Mageworx Magento Blog

Example #2. Changing Titles of Selected Option Values 

Here, we will cover such input types as field, area, file, date, time, and date & time.

Let’s delete the + sign from the titles of selected option values. We will achieve this with the help of PHP, rewrite the classes that implement this method of the needed option type.

Before we begin, create a test product that has all the types of selectable options. It is done to see how these option values look on the front-end by default.

Product Options Customization in Magento 2 | Mageworx Magento Blog

Now, create the following file:

It’s time to create our classes and to rewrite the method:

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/Date.php

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/File.php

app/code/VendorName/OptionRemovePlus/Block/Product/View/Options/Type/Text.php

Here’s the result:

Product Options Customization in Magento 2 | Mageworx Magento Blog

What’s the bottom line?

This article provides all the information required to change the titles of product options and option values completely.

Should you have any questions or difficulties, feel free to leave a comment below. We will be happy to assist!

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here