ECT Version 7.0.1 is packed with goodies and we've put up some examples on our demo store of some css formatting that is now possible with the new classes made available

We'll add tutorials for each over the coming days but they are all css based and really pretty simple to set up. Each product now has its own css class based on the product reference and each of the options has a class you can define yourself. Click on the "Details" links on the page above to see some examples of some css option formatting we have added to show what can be done. We've probably only scratched the surface here of what can be achieved.

Please Note for Product Option Displays

Internet Explorer and Edge don't support background properties for radio buttons

We have set up these example so they degrade nicely in both but please check the results yourself

Check the browser stats here for a guide to browser usage https://www.w3schools.com/browsers/default.asp

Andy

Please feel free to review / rate our software

Image Overlays CSS



The CSS

.pinktop2 div.prodimage{
position:relative;
}

.pinktop2 div.prodimage::after
{content: 'NEW';
position: absolute;
font: 14px Arial,sans-serif;
letter-spacing: 3px;
left: 6px;
top: 10px;
color:#fff;
background:#E06A1E;
padding:18px 8px;
opacity:0.7;
border-radius:50%;
z-index:10;
transform: rotate(330deg);
-webkit-appearance: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.pinktop2 div.detailimage{
position:relative;
}

.pinktop2 div.detailimage::after
{content: 'NEW';
position: absolute;
font: 14px Arial,sans-serif;
letter-spacing: 3px;
left: 6px;
top: 10px;
color:#fff;
background:#E06A1E;
padding:18px 8px;
opacity:0.7;
border-radius:50%;
z-index:10;
transform: rotate(330deg);
-webkit-appearance: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

The CSS explained for the product page

.pinktop2 div.prodimage{
position:relative;
}

pinktop2 is the product id so we are focusing on the product image div for just the product "Ladies Pink Top New". The position is set to relative so the overlay can be absolutely positioned in relation to the div.

content: 'NEW'; <- The text to display
position: absolute; <- Position the text absolutely
font: 14px Arial,sans-serif; <- Font size and family
letter-spacing: 3px; <- Optional space between letters
left: 6px; <- Position from the left of the div
top: 10px; <- Position from the top of the div
color:#fff; <- Color of the text
background:#E06A1E; <- Background of the overlay
padding:18px 8px; <- Padding around the text
opacity:0.7; <- Give it some transparency in case it covers part of the image
border-radius:50%; <- Make it round
z-index:10; <- Make sure it sites on top of the image / div
transform: rotate(330deg); <- Bit of rotation (optional)
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); <- Bit of shadow on the text

For the detail page use .pinktop2 div.detailimage{

If you want to use multiple products, separate them with a comma eg

.pinktop2 div.prodimage::after, .pinktop3 div.prodimage::after{



If your product id starts with a number such as ours here https://www.ecommercetemplates.com/responsive-design-ecommerce.asp you can't normally define a class but there is a workaround.

In this case the product id is 0003rd00grb0090 so we use a kind of "escape"

.\30 003rd00grb0090 div.detailimage

Image overlays using an image



Use the following css for the detail and product pages

.multiples div.detailimage{
position:relative;
}

.multiples div.detailimage::after
{background: url(../colours/onsale.png) no-repeat;
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}

.multiples div.prodimage{
position:relative;
}

.multiples div.prodimage::after
{background: url(../colours/onsale.png) no-repeat;
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left:0;
}

Andy

Please feel free to review / rate our software

Format individual elements per product

As the product and detail pages now have a global class assigned, based on the product id, you can change elements on the individual product page via the css An obvious example is the overlay above but you can do other things.



Change the In Stock label just for this product

.patternswatch .detailinstocklabel::after
{content: ' Patterns:';}

...where .patternswatch is the product id and detailinstocklabel is the css class we are identifying. Use ::before to place the text before the label eg for the price

.patternswatch .detailprice strong::before
{content: 'Sale ';}

Remove the product option label on just this product as it's not required, the swatches are self-explanatory

.patternswatch .detailoptiontext{display:none;}

Andy

Please feel free to review / rate our software

Use button style radio options



Please Note - the display in Internet Explorer and Edge will be different so please remember to check the display in those browsers too.

In your admin product option page select New Option and make it a radio button



Enter the options you want to display



Set two classes for each option as one can be used globally (csssize) and one unique per option (size12 etc)

Add the following css to your css file

div.csssize span{display:none}
div.csssize input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #eee;
color: #666;
top: 0px;
padding:20px 30px;
border-radius: 4px;
cursor: pointer;
margin-right: 7px;
outline: none;
border:1px solid #ccc;
}
div.csssize input::before
{ position: absolute;
font: 13px/1 Arial, sans-serif;
left: 7px;
top: 15px;
color:#000;
}

div.csssize input:hover
{
background-color: #fff;
}
div.csssize input:checked
{
background-color: #ccc;
}

div.size12 input::before
{content: 'Size 12';}
div.size14 input::before
{content: 'Size 14';}
div.size16 input::before
{content: 'Size 16';}

.pinktop2 .detailoptiontext{display:none;}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div.csssize span{display:inline}
}
@supports (-ms-accelerator:true) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
@supports (-ms-ime-align:auto) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
_:-ms-lang(x), _:-webkit-full-screen, .headerClass{
div.csssize span{display:inline;}
div.csssize input{padding:6px;background:#fff}
}
doesnotexist:-o-prefocus, div.csssize span{display:inline;}
doesnotexist:-o-prefocus, div.csssize input{padding:6px;background:#fff}


The classes explained

div.csssize span{display:none} <- Remove individual option label
div.csssize input <- Style the button appearance
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #eee;
color: #666;
top: 0px;
height: 40px;
width: 60px;
border-radius: 4px;
cursor: pointer;
margin-right: 7px;
outline: none;
border:1px solid #ccc;
}
div.csssize input::before <- Format the text in the button
{ position: absolute;
font: 13px/1 Arial, sans-serif;
left: 7px;
top: 15px;
color:#000;
}

div.csssize input:hover <- Set the background for the hover state
{
background-color: #fff;
}
div.csssize input:checked
{
background-color: #ccc; <- Set the background for the checked state
}

div.size12 input::before
{content: 'Size 12';} <- Set the text to display in the button
div.size14 input::before
{content: 'Size 14';} <- Set the text to display in the button
div.size16 input::before
{content: 'Size 16';} <- Set the text to display in the button

.pinktop2 .detailoptiontext{display:none;} <- Hide the main product option text label where in this case pinktop2 is the product id where the options are shown

Check if using Internet Explorer or Edge or Opera and display accordingly
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div.csssize span{display:inline}
}
@supports (-ms-accelerator:true) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
@supports (-ms-ime-align:auto) {
div.csssize span{display:inline}
div.csssize input{padding:6px;background:#fff}
}
_:-ms-lang(x), _:-webkit-full-screen, .headerClass{
div.csssize span{display:inline;}
div.csssize input{padding:6px;background:#fff}
}
doesnotexist:-o-prefocus, div.csssize span{display:inline;}
doesnotexist:-o-prefocus, div.csssize input{padding:6px;background:#fff}


Andy

Please feel free to review / rate our software

CSS product option color swatches



Please Note, the display on Internet Explorer / Edge will be different as the radio buttons can't be hidden there

In your admin product option page select New Option and make it a radio button



Enter the options you want to display



Set two classes for each option as one can be used globally (radiocolor) and one unique per option (radioblue etc)

You can optionally add the alternate product image swatches



Add the following css to your css file

.radiocolor input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding: 20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiocolor input:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}

.radioblue input
{background-color: #3555c6;}

.radioblue input:checked::before
{color:#fff;}


.radiored input
{background-color: #cc0000;}

.radiored input:checked::before
{color:#fff;}

.radiogreen input
{background-color: #64C174;}

.radiogreen input:checked::before
{color:#fff;}

.radiopurple input
{background-color: #B6A5D3;}

.radiopurple input:checked::before
{color:#fff;}

.radioyellow input
{background-color: #E6ED25;}

.radioyellow input:checked::before
{color:#000;}

.colorswatch .optiontext{display:none;}

The classes explained

.radiocolor input <- Format the general swatch appearance
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding: 20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radiocolor input:checked::before <- Style the check mark
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}

.radioblue input <- Set the individual color swatch backgrounds
{background-color: #3555c6;}

.radioblue input:checked::before
{color:#fff;} <- Set the individual check mark color


.radiored input
{background-color: #cc0000;}

.radiored input:checked::before
{color:#fff;}

.radiogreen input
{background-color: #64C174;}

.radiogreen input:checked::before
{color:#fff;}

.radiopurple input
{background-color: #B6A5D3;}

.radiopurple input:checked::before
{color:#fff;}

.radioyellow input
{background-color: #E6ED25;}

.radioyellow input:checked::before
{color:#000;}

.colorswatch .optiontext{display:none;} <- Hide the main product option text label where in this case colorswatch is the product id where the options are shown

Andy


Please feel free to review / rate our software

Product option image swatches



Please Note, the display on Internet Explorer / Edge will be different as the radio buttons can't be hidden there

In your admin product option page select New Option and make it a radio button



Enter the options you want to display



Set two classes for each option as one can be used globally (radioswatch) and one unique per option (radiopaisley etc)

You can optionally add the alternate product image swatches



Add the following css to your css file

.radioswatch input
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding:20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}

.radiopaisley input
{background-image: url(../colours/paisley.png);}

.radiopaisley input:checked::before
{ position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}


.radiotartan input
{background-image: url(../colours/tartan.png);}

.radiotartan input:checked::before
{position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}

.patternswatch .detailoptiontext{display:none;}
.patternswatch .optiontext{display:none;}

The CSS explained

.radioswatch span{display:none} <- Remove the individual option labels
.radioswatch input <- Style the general appearance of the swatch
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
color: #666;
top: 0px;
padding:20px;
border: 0;
border-radius: 0px;
cursor: pointer;
margin-right: 7px;
outline: none;
}

.radiopaisley input <- Set the background of the first swatch
{background-image: url(../colours/paisley.png);}

.radiopaisley input:checked::before <- Set the check mark of the first swatch
{ position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}


.radiotartan input <- Set the background of the second swatch
{background-image: url(../colours/tartan.png);}

.radiotartan input:checked::before <- Set the check mark of the second swatch
{position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 15px;
top: 12px;
content: '\02143';
transform: rotate(40deg);
color:#fff;
}

.patternswatch .detailoptiontext{display:none;} <- Hide the main option label text
.patternswatch .optiontext{display:none;}

Andy

Please feel free to review / rate our software

Multiple purchase options with colors



In your admin product option page select New Option and make it a multiple purchase option



Enter the choices you want to display



Add the following css to your css file

.multiorange{
color:#ea9e19
}

.multiorange input{
border:1px solid #ea9e19;
color:#ea9e19;
text-align:center;
border-radius:4px
}

div.multiorange::before{
content: '';
border-left:18px solid #ea9e19;
}

.multimauve{
color:#695aa8
}

.multimauve input{
border:1px solid #695aa8;
color:#695aa8;
text-align:center;
border-radius:4px
}

div.multimauve::before{
content: '';
border-left:18px solid #695aa8
}

.multiblue{
color:#4267B2
}

.multiblue input{
border:1px solid #4267B2;
color:#4267B2;
text-align:center;
border-radius:4px
}

div.multiblue::before{
content: '';
border-left:18px solid #4267B2
}

The CSS explained

.multiorange{ <- The color of the text
color:#ea9e19
}

.multiorange input{
border:1px solid #ea9e19; <- The color of input border
color:#ea9e19; <- The color of the input text
text-align:center;
border-radius:4px
}

div.multiorange::before{
content: ''; <- Set blank content
border-left:18px solid #ea9e19; <- The width and color of the swatch to the left of the input field

}

Andy

Please feel free to review / rate our software

In 7.0.1 all types of product option can be given their own css class so it is possible to format text input fields and drop down menus as well as the examples provided above. Radio buttons probably provide the most flexibility but you can also look at examples of styling the other options, Here are some examples from a third party site

Drop down select menus - https://freefrontend.com/css-select-boxes/

Text input fields - https://freefrontend.com/css-input-text/

Some may require the addition of javascript which is probably overkill for product options. Also check in different browsers for compatibility.

Andy

Please feel free to review / rate our software

Am I correct in thinking that this feature doesn't work when using MagicZoom?

Steve
Using ECT PHP versions since 2004 / 5

I don't believe you will have problems using any of this with magiczoom.

Use button style radio options

I want to use this on a product line but I'm a little confused by the instructions.

There is this line in the example css:
.pinktop2 .detailoptiontext{display:none;}

How do I know what to use in place of .pinktop2? Do I need this?

I was going to set up a Small, Medium, Large option that would apply to a large number of different items.

I know Andy isn't here anymore but can someone help clear up my confusion?

Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~

quote:

---

There is this line in the example css:
.pinktop2 .detailoptiontext{display:none;}

How do I know what to use in place of .pinktop2? Do I need this?

---

Hi Julie,
You would need to substitute .pinktop2 with the product ID that the option is assigned to. So if your product ID is ghg-20 you would use

.ghg-20 .detailoptiontext{display:none;}




* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*
*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

Oh, wow...so if I have a 1,000 items I would have to add each of their ProductID's to the css.... yikes!

Is there another way to do this?



Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~

Hi Julie,
I'm afraid not, but you could probably download your inventory and copy and paste the products ID's to your css file easily enough and add them in bulk that way if they're all using the same css code.





* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*
*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

Would the really neat solution to this be if there were a flag that could be set in the Quick Update... section of the admin products page, that when set added a CSS class like "productonsale" to the surrounding DIV of the product? Then you could just have one entry in the CSS file...

div.productonsale .detailoptiontext{display:none;}

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

That would be an awesome idea!! :)

Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~

Hi Julie
If you (or anyone else) wants an advanced version of this then please let me know and I'll send the updater with the changes. I can't add the changes to the updater just yet.
In the end what I did was go for a "Custom CSS Classes" field. That way you can add one or more of whatever class you like to any of the products.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

quote:

---

In the end what I did was go for a "Custom CSS Classes" field. That way you can add one or more of whatever class you like to any of the products.

---

Great idea Vince...

Cool! I'll take an advanced version.... you should have my email from my last pm I sent ya. If not, let me know.

Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~

Hi Julie
Ok, what I've done is put it here as a "Beta"...
https://www.ecommercetemplates.com/updaters.asp?betas=true
...so you can get it now in the normal way by selecting the Beta there. GMail now won't let us send ZIP's even if they are disguised as PDF's so this is the best way I think. Both ASP and PHP versions are available.
By the way Julie. As you seem to have a lot to do with dogs, do you know what to do about a mutt who doesn't like puppies at all? Ours is an American Stanford crossed with just about everything else. She has a lovely character and gets on really well with other dogs, and isn't a dominant character at all; but twice now has gone for puppies that are new additions to families of dogs she already knows. You never know etc so I just thought I'd ask.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

By any chance do you know what files the changes were made to? I'd rather not upload all since I have to make small changes to some but if so, then I'll do it.

As for your dog, I'm not sure what is going on. Unless it has to do with how he views the "pack", a new addition may be felt to be a threat and he acts accordingly. I have some dogs that welcome new dogs/puppies with wagging tail, others just want to eat them for breakfast.

Julie
Owned & loved by 5 German Shepherds
~ RIP Menace & Peanut ~