Star Ratings: Replace icons

Basics #

The basic structure of star ratings looks as follows:

• 1 icon for the gray (inactive) background
• 1 icon for the yellow (active) foreground

For a 4-star product rating, 4 active and 1 inactive star will be shown.

Icon sources #

On the one hand you can create your own icons with almost every picture editing tool. On the other hand you can make use of a public resource like Iconfinder. Anyway the file format should be SVG, alternatively PNG or GIF. After getting your icons, please upload them on your server (e.g. via WordPress media).

Default sizes #

On the plugin settings page (or via shortcode) you can choose between the following star rating sizes:

• Small = 16px * 16px
• Medium = 20px * 20px
• Large = 30px * 30px

Please be aware that the new icons should be at least 30px * 30px in order to fit all sizes.

Replacing icons via CSS #

On the plugin settings page (tab “output”) please select “Custom style” under the star ratings section. Afterwards you can replace the graphics easily as follows:

Variant 1: Replacing both icons #


.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: url('https://domain.de/path-to-images/star.png');
}

.aawp .aawp-star-rating–custom > span,
.aawp-star-rating–custom > span,
a.aawp-star-rating–custom > span {
background-image: url(‘https://domain.de/path-to-images/star-active.png’);
}

Variant 2: Replacing both icons and defining a custom size #

This example sets a custom size of 32px * 16px for a horizontal icon.

.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
height: 16px;
width: 32px;

background-size: 32px 16px;
background-image: url(‘https://domain.de/path-to-images/star.png’);
}

.aawp .aawp-star-rating–custom > span,
.aawp-star-rating–custom > span,
a.aawp-star-rating–custom > span {
height: 16px;
width: 32px;

background-size: 32px 16px;
background-image: url(‘https://domain.de/path-to-images/star-active.png’);
}

Variant 3: Eliminating the background icon #

This example eliminates the inactive background icon.

.aawp .aawp-star-rating--custom,
.aawp-star-rating--custom,
a.aawp-star-rating--custom {
background-image: none;
}

.aawp .aawp-star-rating–custom > span,
.aawp-star-rating–custom > span,
a.aawp-star-rating–custom > span {
background-image: url(‘https://domain.de/path-to-images/star-active.png’);
}

All previously showed styles should be placed into the settings field “Custom CSS” (tab “output”). Alternatively you can place them into your child-/theme’s styles. Therefore please put .aawp-custom in front of every declaration: e.g. .aawp-custom .aawp .aawp-star-rating--custom { ... }