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

Phoca Cart - complex e-commerce extension
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

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

Post by 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

Tags:
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48086
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

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

Post by Jan »

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

Image

Jan
If you find Phoca extensions useful, please support the project
Post Reply