Option name to appear in attribute dropdown and not next to it

Hi there,

I am looking to add the attribute option name inside the dropdown box like this example site

As you can see the 'SELECT SIZE' sits inside the dropdown.

Thanks in advance
Matt

Two steps...

ONE

Create an option VALUE that is the same wording as the option NAME, give it a sort order of 0.

In the Attributes Controller for any given product that need this feature, INSERT the new option value you created above, make it the DEFAULT value, and make it DISPLAY ONLY. (Use the little "legend" icons to do this.)

Click the UPDATE SORT ORDER button at the top of the screen.

Now, your Option Name will appear at the TOP of the dropdown list, and as it is a display only option, it cannot be selected as a choice by the customer.

TWO

Put this at the bottom of your stylesheet.css

.optionName {display:none}

You may need to use this one

.optionName label {display:none}

Hi there,

Thanks for that. That works great, the only problem is the site is being handed over to a client and there is no way she will remember to do the neccessary in the attributes controller.

Is there a way to make this the default and display only any other way?

Thanks
Matt

Graphic Content:

Hi there,

Thanks for that. That works great, the only problem is the site is being handed over to a client and there is no way she will remember to do the neccessary in the attributes controller.

Is there a way to make this the default and display only any other way?

Thanks
Matt

No...

Surely your client is "trainable" ? Easier to teach them how to add that option value... Besides, when they decide to add products themselves, and possibly add new attributes, how are they going to do this unless they learn?

Well I'm sure you know what certain clients can be like sometimes? If its the only way then I will have to teach them.

One other thing, how would I go about deleting the attribute name from underneath the swatch image?

Thanks

Yeah :D ... clients are rather "unteachable".

A link to the site would help (PM me if you don't want it public yet).

I'll have to unpick the mechanism you are using for the swatches, and detrmine the attribute ID's as these are then embedded into the style IDs for each displayed attribute.

Again, you use {display:none}... If you have FIREFOX browser with FireBug plugin, you can display that page and using the Firebug "inspect" tool, see what the style ID is for each swatch.

It MIGHT be a challenge if the swatch image AND the label share the same style ID.

In fact... I think I'm right, so you'll need a nifty bit of CSS here, using the VISIBILITY declaration.

Try this:

.attribImg {visibility:hidden}
.attribImg img {visibility:visible}

(NB: This PAIR of declarations MUST be in the order shown, otherwise you will see neither the image NOR the label)

That worked! thanks so much, I was looking through the code for ages trying to suss that one out and that is a neat little trick for future projects so thanks once again.

The site is just on my local at the mo but will fire you a link once it's up, it looks very very different for a Zen!

Thanks again for your help, you might hear from me again while on this project as they are after some non-standard e-comm features.

Cheers
Matt

Graphic Content:

you might hear from me again while on this project as they are after some non-standard e-comm features.

that's fine... my fees are very reasonable ! :D