Product Settings Name & HTML

  • Profile Image
    btwebgroup
    Asked on March 04, 2017 at 05:59 PM

    We were at one time able to use HTML within product name fields to style textual content. I noticed today that one of our forms shows support for this to have been removed.

    Can you confirm the issue and advise of a way to style our product setting name fields?

  • Profile Image
    Mike_G
    Answered on March 05, 2017 at 03:21 AM

    We would like to apologize for any inconvenience, due to security reasons

    However, you can try to do the following as a workaround that might meet your requirements:

    First, change the Product Item Name as shown in the image below.

    Then, add the following CSS codes below to your form.

    How-to-Inject-Custom-CSS-Codes

    span#product-name-input_14_1017 {

        font-size: 1.5em !important;

        font-weight: bold !important;

    }

    span#product-name-input_14_1017:after {

        content: "A uniform professional choral look.";

        display: block !important;

        padding-left: 20px !important;

        font-style: italic !important;

        font-size: 14px !important;

        font-weight: normal !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(2) .form-product-details:before {

        content: "Especially designed to fit most music folders and ring binders that hold sheet music. The Original ChoroGrip Strap creates a secure grip for music folders and binders. The hook and loop strap adjusts to your hand to reduce arm and wrist fatigue. Be confident, no fumbling with folders.";

        display: block !important;

        padding-left: 20px !important;

    }

     

    span#product-name-input_14_1016 {

        font-size: 1.5em !important;;

        font-weight: bold !important;;

    }

    span#product-name-input_14_1016:after {

        content: "A uniform professional choral look.";

        display: block !important;

        padding-left: 20px !important;

        font-style: italic !important;

        font-size: 14px !important;

        font-weight: normal !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(12) .form-product-details:before {

        content: "This innovative product will hold unpunched scores, booklets, folded sheets, etc. in the same ring binder with punched materials. Each ChoroGrip Ring Adapter holds up to six scores or booklets, octavo or letter size.";

        display: block !important;

        padding-left: 20px !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(12) .form-product-details:after {

        display: block !important;

        content: "Price below is per package of three (3)";

        padding-left: 20px !important;

        font-weight: bold !important;

    }

    It should look like this after:

    I hope this helps. However, if this is not what you're aiming to achieve, please provide us more details or a description of what you would like to happen, then, we will try to find the best solution for you.

    Thank you.

  • Profile Image
    btwebgroup
    Answered on March 06, 2017 at 10:52 AM

    Awesome. Thank you very much for this information. It worked beautifully. :)