[Support request] Formatting of Cards

Hi there,

It should be possible with a bit of PHP snippet and CSS.

Try adding this CSS:

.wpsp-terms-wrapper {
    position: absolute;
    bottom: 0;
    left: 5%;
    transform: translateY(50%);
    z-index: 9999;
    background-color: yellow;
}

.wp-show-posts-image.wpsp-image-center {
    overflow: visible;
    position: relative;
}

And this PHP code snippet to make it overlay on the image:

add_action('wpsp_inside_image_container',function(){
	echo '<div class="wpsp-terms-wrapper">'.get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) ).'</div>';
});

All list will have what we added on the add_action() snippet as we don’t have access to the list data when using add_action() and remove_action().

But we can control what list displays the added code on wpsp-terms-wrapper with CSS.

We start with this CSS:

.wpsp-terms-wrapper {
    display:none;
}

This ensures wpsp-terms-wrapper doesn’t just display by default.

we then do this CSS:

#wpsp-1234 .wpsp-terms-wrapper {
    display: block !important
    position: absolute;
    bottom: 0;
    left: 5%;
    transform: translateY(50%);
    z-index: 9999;
    background-color: yellow;
}

#wpsp-1234 .wp-show-posts-image.wpsp-image-center {
    overflow: visible;
    position: relative;
}

Where 1234 is your WPSP id. This will display the wpsp-terms-wrapper only of a specific WPSP list with the specified ID. 🙂