Reviews load More button replacing with an image

Ask the Community Customization
1

In the reviews widget I would like to replace the “Load more” button with an image from my website
for example
background-image: url('https://mywebsite.com/imgs/myimage.png')

Could you please point me to the css class I need to use
Thank you

1 Like
3

Hi there, @Mark_Warner1 and welcome aboard :waving_hand:

Sure! Here is the correct code:

[class*="ButtonBase__Overlay-sc"] {
background-image: url('https://mywebsite.com/imgs/myimage.png');
}

Keep in mind that the image should be public accessible to make it work. Check it out and let me know if it helped :wink:

4

EDIT… Slight issue this also effects the “Review us on Google” button so i need the specific class for the Load more button here is the full css class though for the buttons

[class*=“ButtonBase__Overlay-sc”] {
background-image: url(‘https://fixcookers.co.uk/wip/imgs/ContactForm_Send.png’);
background-size: contain; /* Ensures the entire image is visible /
background-repeat: no-repeat; / Prevents repeating the background image /
background-position: center; / Centers the image within the container /
height: 100px;
width: 100%; / Use 100% to embrace the full width of the container */
overflow: hidden;
}

5

slight issue this also effects the Review us on google button, so how do i specifically redesign the Load more button ?

1 Like
6

Ah, sorry for missing that!

Here is a code that will be applied to the Load More button only :slightly_smiling_face:

.es-load-more-button-container [class*="ButtonBase__Overlay-sc"] {
    background-image: url('https://fixcookers.co.uk/wip/imgs/ContactForm_Send.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 100%;
    overflow: hidden;
}
7

That is spot on perfect and a super fast response so thank you very much

2 Likes
8

Amazing, a huge thank you for your kind words!

Don’t hesitate to contact us here again if anything else comes up :slightly_smiling_face: