Add Picture instead of Text in Pricing Table

[innovatefast]

Hi, I’m trying to change the Title from text to an image in a pricing table.

The URL of the page is: https://texasaudio.com/easy-finance/

Instead of ‘Progressive Leasing’ I want to use the image of: https://texasaudio.com/wp-content/uploads/2019/01/progressive-leasing.png

Instead of SNAP Finance, I want to use the Snap Finance logo:https://texasaudio.com/wp-content/uploads/2019/01/snap-logo.png

Instead of M.E.S.A. Credit, I want to use the image of: https://texasaudio.com/wp-content/uploads/2019/01/mesa-logo.png

Instead of Acima Credit, I want to use the image of: https://texasaudio.com/wp-content/uploads/2019/01/Acima_Logo.png

[paul.r]

Hi,

To achieve that you can replace the titles with img code

Instead of ‘Progressive Leasing’

<img src="https://texasaudio.com/wp-content/uploads/2019/01/progressive-leasing.png">

SNAP Finance,

<img src="https://texasaudio.com/wp-content/uploads/2019/01/snap-logo.png">

M.E.S.A. Credit

<img src="https://texasaudio.com/wp-content/uploads/2019/01/mesa-logo.png">

Acima Credit

<img src="https://texasaudio.com/wp-content/uploads/2019/01/Acima_Logo.png">

Hope this helps

[innovatefast]

Hi,

When I do that, it just shows the text. Here is a screenshot

[nabeel]

Hi again,

To fix the display issue, please add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(".x-pricing-column").each(function(index, el) {
		var image_el = $(this).find('h2').html();
		var url = image_el.match(/\bhttps?:\/\/\S+/gi);
		var src = url[0].slice(0, -5);
		$(this).find('h2').html('<img src="'+ src +'" alt="">');
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[innovatefast]

Still no luck.

[jade]

Hi there,

Actually, the pricing table’s header area is meant to only contain text and not HTML codes.

What you can try now is to set the image as the background of the table header through CSS like this:

#snap-finance h2 {
    background: url(https://texasaudio.com/wp-content/uploads/2019/01/snap-logo.png) no-repeat;
    padding: 54px 0;
    background-size: contain;
    background-position: center center;
}

The code above set the background image to the table entry with snap-finance ID. So feel free to copy the code and change the ID in the code accordingly.

Hope this helps.

[innovatefast]

Thank you, thank you, thank you!!! It is now working

[Prasant]

You are most welcome.