Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 CSS product image overlays, options and more
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Andy
Administrator

95440 Posts

Posted - 10/25/2018 :  07:04:22  
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

http://ectwp.com/product/Clothes-with-options

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

Andy
Administrator

95440 Posts

Posted - 10/25/2018 :  08:20:31  
Image Overlays CSS

Example of overlays with text "New" http://ectwp.com/product/Clothes-with-options



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

Example: http://ectwp.com/Multiple-Colors



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

Andy
Administrator

95440 Posts

Posted - 10/25/2018 :  09:04:54  
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.

Here are a couple of example from http://ectwp.com/Pattern-Swatch



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

Andy
Administrator

95440 Posts

Posted - 10/26/2018 :  00:53:19  
Use button style radio options

Example: http://ectwp.com/Ladies-Pink-Top-New



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

Andy
Administrator

95440 Posts

Posted - 10/26/2018 :  01:31:17  
CSS product option color swatches

Example: http://ectwp.com/Color-Swatch



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

Andy
Administrator

95440 Posts

Posted - 10/26/2018 :  01:57:57  
Product option image swatches

Example: http://ectwp.com/Pattern-Swatch



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

Andy
Administrator

95440 Posts

Posted - 10/26/2018 :  02:18:28  
Multiple purchase options with colors

Example: http://ectwp.com/Multiple-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

Andy
Administrator

95440 Posts

Posted - 10/31/2018 :  02:59:58  
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

1818charlie
Advanced Member

United Kingdom
333 Posts

Pre-sales questions only
(More Details...)

Posted - 07/10/2019 :  18:45:59  
Am I correct in thinking that this feature doesn't work when using MagicZoom?

Steve
Using ECT PHP versions since 2004 / 5

dbdave
ECT Moderator

USA
8064 Posts

Posted - 07/10/2019 :  19:24:43  
I don't believe you will have problems using any of this with magiczoom.
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.05 seconds. Snitz Forums 2000