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.
6 thoughts on “How to Remove Comma Separator on Elementor Post Info Widget”
Hi, Thank you for the amazing tutorial. However, I am facing one problem. The comma is removed from first post section only, whereas other posts still shows comma. Why is it like that? Please check this image on the link below for reference. Really looking for your help in this. Thank you!
https://i.imgur.com/CiSiHXi.png
Hi,
Thank you for visiting our site!
Regarding your issue, we assume you have a multiple Post Info widget on your Single Post Template.
To address the problem and remove commas from all elements on your single post template, you need to use “document.querySelectorAll()” instead of “querySelector()”, and add the forEach() loop to ensure that commas are removed from every post section
Here’s the corrected JavaScript snippet for your case:
const divs = document.querySelectorAll(‘.remove-commas’); // Select all elements with the class ‘remove-commas’
divs.forEach(div => {
const text = div.innerHTML;
const newText = text.replace(/,/g, ”); // Remove commas from the text
div.innerHTML = newText; // Update the content
});
This code should fix your problem. Let me know if you need further clarification.
Done! Very thanks.
I I had to change the uppercase letter of “Replace” to lowercase and it worked.
Hello Marcos,
Thank you for your comment and for taking the time to share your thoughts and experiences on this topic. We appreciate your feedback and your interest in our site.
Thankssssss! Asked the Elementor support many times, yet never get a satisfied solution. They always asked me to regenerate CSS without providing any clear solution.
Hi Dietrich,
You’re welcome! It’s always a pleasure to help.
Thank you for visiting our site.