How to add a 'tick' mark to 'In Stock' and 'cross' mark for 'Out of Stock'- Phoca Cart

[dmlwebal]

Hi

A simple way to add a tick mark in CSS for your Phoca Cart stores (tested in 4.0.6 and 4.0.7)

Code: Select all

.ph-stock.pc-status-in-stock:before {
    content: "\2705\0020";
    content: "\2611\0020";
    content: "\2714\0020";
    content: "\2713\0020";
}

Then just simply comment out/delete the unwanted version

example

Code: Select all

.ph-stock.pc-status-in-stock:before {
     content: "\2705\0020";
    // content: "\2611\0020";
    //content: "\2714\0020";
    // content: "\2713\0020";
}

For a cross mark for 'out of stock' items, use the following

Code: Select all

.ph-stock.pc-status-out-of-stock:before {
    content: "\274C\0020";
    content: "\2715\0020";
    content: "\2716\0020";
    content: "\2717\0020";
    content: "\2718\0020";
}

Again, simply comment out the unused options

The '\0020' adds in a space character for you

Hope this helps others

PS, there may be other tick or cross unicodes out there, these are just ones that I found

example:
https://www.w3schools.com/charsets/ref_utf_dingbats.asp
https://en.wikipedia.org/wiki/List_of_U ... characters

[Jan]

Hi, great, thank you very much for the info.



Jan