The Elementor Post Info widget displays a post’s author, date, categories, and tags. However, when you set the type of metadata to Terms to show the Tags of your post, by default, tag items are separated by commas.
This article will show how to remove the comma separator on the Elementor Post Info widget. It can give you more control over the layout of your posts. When you remove the commas, you can choose how to space your post tags and how to display them on the page. This can give you more flexibility in creating a visually appealing design.
How to Remove Comma Separator on Elementor Post Info Widget
First, before we start the tutorial, we want to ensure that you’ve already upgraded to the Elementor Pro. In this tutorial, we will work using the Single Post template, while Single Post template is one of the features of Elementor Theme Builder, which is only accessible on the Pro version.
Edit your Single Post Template
On your WordPress dashboard, navigate to Templates -> Theme Builder. Once you enter the Theme Builder window, click the Single Post menu to add a new template. Or you can select an existing one.
Add the CSS Class to the Post Info Widget
Next, we will add the CSS class to the Post Info widget to link with the JavaScript code we will add later.
On your widget settings, navigate to the Advanced tab -> Layout -> CSS Classes. Add remove-commas to the CSS Classes input field.
Add the HTML Widget to the Single Post Template
Now, you need to add the HTML widget to your template. You can place the widget anywhere you want. In this example, we place the HTML widget under the Post Info widget.
Next, copy the JavaScript snippet below and paste it into the HTML Code input field.
<script>
const div = document.querySelector('.remove-commas');
const text = div.innerHTML;
const newText = text. Replace(/,/g, '');
div.innerHTML = newText;
</script>
That’s it. Update your Single Post template by clicking the Update button. You can preview your template by clicking the Preview button or by visiting one of your posts to see the result.
(Bonus) Creating an Awesome Category and Tag Items
Maybe you’re wondering how to make an eye-catching category and tag items as we have (see the image above). You only need to add the custom CSS to the Post Info widget.
On the Post Info widget settings, navigate to the Advanced tab -> Custom CSS. Copy the CSS snippet below and paste it into the Custom CSS input field.
selector .elementor-post-info__terms-list-item{
padding: 2px 6px;
margin-top: 20px;
border: solid 1px #ffb0fe;
border-radius: 8px;
background-color: #ffb0fe;
}
selector .elementor-post-info__terms-list-item:hover{
padding: 2px 6px;
margin-top: 20px;
border: solid 1px #ffb0fe;
border-radius: 8px;
color: #54595f!important;
background-color: #ffffff;
}
The Bottom Line
Removing the comma separator on the Elementor Post Info widget can give you more control over the layout of your posts and make your posts more visually appealing. We also provide a bonus tip on creating eye-catching categories and tag items.
We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.
